# 手把手教你写对 picture 标签，别再让它背锅了

上周 code review，看到一个同事写的 picture 标签，差点没把我送走。

他写了这样一个东西：

```html
<picture>
 <source srcset="*webp" type="image/webp">
 <source srcset="*avif" type="image/avif">
</picture>
```
我问：“图呢？”

他说：“啊？这不就出来了？”

我说：“你打开浏览器看看。”

他打开一看，页面空白。因为他忘了写 `<img>`。

这个坑太经典了。picture 标签看起来简单，实际上细节特别多，踩过的人都知道疼。今天我把这几年踩过的坑、review 过的代码、以及 W3C 规范里那些容易被忽略的点，一次性说清楚。


----
## picture 到底是什么

很多人以为 picture 是 img 的升级版，其实不对。

picture 本身是个空壳子，它不渲染任何东西。它的作用只有一个：**帮浏览器做选择**。真正的渲染工作，永远是交给它里面那个 img 标签干的。

所以你一定要记住这句话：

>picture 里面的 img，才是亲儿子。source 只是来应聘的候选人。


----
## 标准架子长这样

先给你一个可以直接复制粘贴的模板：

```html
<picture>
 <source srcset="*avif" type="image/avif">
 <source srcset="*webp" type="image/webp">
 <img
 src=""
 alt="公司前台实景照片"
 width="1200"
 height="630"
 loading="lazy"
 decoding="async"
 >
</picture>
```
这个架子有几个硬性规定：

第一，source 可以有多个，也可以没有，但最后一个必须是 img。

第二，img 必须有 src 和 alt。src 是最后的兜底，alt 是给读屏软件和图片加载失败时看的。

第三，width 和 height 必须写。这不是为了好看，是为了防止页面抖动。浏览器需要提前知道图片占多大地方，不然图片加载出来的一瞬间，整个页面会跳一下。

第四，loading="lazy" 现在基本是标配了，除非首屏关键图才用 eager。

第五，decoding="async" 告诉浏览器不用等这张图片解码完再渲染别的，用户体验会好一些。


----
## source 的三个属性，各管各的事

source 标签有三个核心属性：type、media、srcset。很多人把它们混着用，结果浏览器选图选得乱七八糟。

### type 只管格式

type 的作用就是告诉浏览器：我这有张 AVIF 格式的图，你看看你支不支持。支持就用，不支持就跳过。

```html
<source srcset="*avif" type="image/avif">
<source srcset="*webp" type="image/webp">
```
注意，type 不要用来做宽度判断或者设备判断。有人写过这种：

```html
<source srcset="*avif" type="image/avif" media="(max-width: 767px)">
```
这倒也能跑，但语义上不对。type 只看格式，media 才看设备，各司其职。

### media 管的是“换图”

media 是真正用来做艺术指导的。什么叫艺术指导？就是同一个画面，在不同屏幕上展示不同的构图。

比如一张横幅产品图，电脑上展示全景，手机上要放大突出产品主体。这时候就需要两套完全不同的图片资源：

```html
<picture>
 <source
 media="(min-width: 769px)"
 srcset="product-desktop.jpg"
 >
 <source
 media="(max-width: 768px)"
 srcset="*jpg"
 >
 <img src="" alt="新款智能手表佩戴效果">
</picture>
```
这里有个容易翻车的点：**浏览器是从上到下匹配的**，找到第一个符合条件的 source 就用，后面的直接跳过。

所以你把大屏条件写前面还是小屏条件写前面，结果可能不一样。一般建议大屏条件写前面，因为 min-width 的判断更符合直觉。

### srcset 管的是“同一张图的不同尺寸”

这个最容易被误解。srcset 不是为了让你换图，而是为了让你在同一张图上提供不同分辨率版本，让浏览器根据屏幕密度和设备宽度自己选。

```html
<source
 srcset="jpg 480w,
 jpg 800w,
 jpg 1200w"
 sizes="(max-width: 700px) 90vw,
 800px"
>
```
这里的 480w 表示这张图片的实际宽度是 480 像素，不是 CSS 里的宽度。sizes 告诉浏览器：这个图片在你页面里大概占多宽。浏览器拿到这两个信息后，就能算出该用哪张图最合适。

这里有个规范上的铁律：**w 描述符和 x 描述符不能混用**。你写了 480w 就不能再写 2x，要么全部用 w，要么全部用 x。


----
## 什么时候不该用 picture

这个问题比“怎么用 picture”更重要。

很多人一看到响应式图片，条件反射就上 picture。其实大部分场景根本不需要。

如果你的需求只是：同一张图，给 1x 屏用 1x 图，给 2x 屏用 2x 图。那直接用 img 的 srcset 就够了：

```html
<img
 src=""
 srcset="*jpg 2x"
 alt="会议室全景"
>
```
只有当你需要换图、换格式的时候，才搬出 picture。

怎么判断要不要换图？问自己一个问题：**不同条件下，图片文件本身是不是不一样？**

- 只是分辨率不同 → 用 img + srcset
- 格式不同（AVIF vs WebP vs JPG）→ 用 picture + type
- 构图不同（横图变竖图、裁切不同）→ 用 picture + media
- 暗色模式换 logo → 用 picture + prefers-color-scheme


----
## 几个常见的翻车现场

### 翻车一：忘了写 img

开头那个同事的案例就不重复了。再强调一遍：picture 里面没有 img，就等于什么都没写。

### 翻车二：把样式写在 picture 上

```html
<picture style="object-fit: cover;">
```
object-fit 是 img 的属性，写在 picture 上没有任何效果。正确的是：

```html
<img style="object-fit: cover; object-position: center;" ...>
```
### 翻车三：alt 写得乱七八糟

有些人给不同 source 写不同的 alt，这是错的。alt 只能写在 img 上，而且整组图片只有一个 alt。

还有人写 alt="" 表示装饰性图片，这没问题。但如果是内容图片，alt 必须描述这张图传达的信息，而不是描述文件名。

### 翻车四：source 的顺序搞反了

有人把 AVIF 写在 WebP 后面：

```html
<source srcset="*webp" type="image/webp">
<source srcset="*avif" type="image/avif">
```
浏览器从上往下匹配，如果支持 WebP 就直接用了，根本不会去看 AVIF。所以应该把更先进的格式写在前面。


----
## 实际项目中可以直接用的模板

### 模板一：格式降级

最常见的情况，适用于大多数内容图片：

```html
<picture>
 <source srcset="*avif" type="image/avif">
 <source srcset="*webp" type="image/webp">
 <img
 src=""
 alt="2024年度团建合影"
 width="800"
 height="450"
 loading="lazy"
 decoding="async"
 >
</picture>
```
### 模板二：响应式艺术指导

适用于 banner、主视觉这类需要根据不同屏幕裁切的图片：

```html
<picture>
 <source
 media="(min-width: 1280px)"
 srcset="*jpg 1920w,
 *jpg 2560w"
 sizes="1280px"
 >
 <source
 media="(min-width: 640px)"
 srcset="banner-tablet-1024.jpg 1024w"
 sizes="100vw"
 >
 <source
 media="(max-width: 639px)"
 srcset="banner-mobile-640.jpg 640w"
 sizes="100vw"
 >
 <img
 src=""
 alt="夏季促销活动主视觉"
 width="1920"
 height="600"
 fetchpriority="high"
 >
</picture>
```
首屏的大 banner 记得加上 fetchpriority="high"，让浏览器优先加载。

### 模板三：暗色模式

适用于 logo、图标这类需要跟随系统主题的资源：

```html
<picture>
 <source
 srcset="*svg"
 media="(prefers-color-scheme: dark)"
 >
 <img
 src=""
 alt="公司名称"
 width="160"
 height="40"
 >
</picture>
```
SVG 图标一般不需要 lazy loading，因为它们体积小，而且是首屏可见的元素。


----
## 一份自查清单

每次写完 picture，对照下面这几条过一遍：

- [ ] picture 里面有没有 img
- [ ] img 有没有 src 和 alt
- [ ] width 和 height 写了没有
- [ ] 格式降级的顺序对不对（越先进越靠前）
- [ ] media 的条件会不会冲突或遗漏
- [ ] srcset 里 w 和 x 没有混用
- [ ] 如果只是分辨率切换，能不能换成 img + srcset
- [ ] object-fit 有没有写错地方


----
picture 这个东西，说简单也简单，说复杂也复杂。它的核心逻辑其实就一句话：**告诉浏览器你有什么选项，让浏览器自己选最合适的那个。**

你只要保证每个选项都是对的，剩下的交给浏览器就行。最怕的就是你以为你给了选项，实际上给了一堆 bug。

 推荐查看天气：http://www.362tq.com/shexian/7tian.html
 推荐查看天气：http://www.362tq.com/shexian/10tian.html
 推荐查看天气：http://www.362tq.com/shexian/15tian.html
 推荐查看天气：http://www.362tq.com/shexian/40tian.html
 推荐查看天气：http://www.362tq.com/cixian/
 推荐查看天气：http://www.362tq.com/cixian/zuotian.html
 推荐查看天气：http://www.362tq.com/cixian/7tian.html
 推荐查看天气：http://www.362tq.com/cixian/10tian.html
 推荐查看天气：http://www.362tq.com/cixian/15tian.html
 推荐查看天气：http://www.362tq.com/cixian/40tian.html
 推荐查看天气：http://www.362tq.com/feixiang/
 推荐查看天气：http://www.362tq.com/feixiang/zuotian.html
 推荐查看天气：http://www.362tq.com/feixiang/7tian.html
 推荐查看天气：http://www.362tq.com/feixiang/10tian.html
 推荐查看天气：http://www.362tq.com/feixiang/15tian.html
 推荐查看天气：http://www.362tq.com/feixiang/40tian.html
 推荐查看天气：http://www.362tq.com/yongnian/
 推荐查看天气：http://www.362tq.com/yongnian/zuotian.html
 推荐查看天气：http://www.362tq.com/yongnian/7tian.html
 推荐查看天气：http://www.362tq.com/yongnian/10tian.html
 推荐查看天气：http://www.362tq.com/yongnian/15tian.html
 推荐查看天气：http://www.362tq.com/yongnian/40tian.html
 推荐查看天气：http://www.362tq.com/qiuxian/
 推荐查看天气：http://www.362tq.com/qiuxian/zuotian.html
 推荐查看天气：http://www.362tq.com/qiuxian/7tian.html
 推荐查看天气：http://www.362tq.com/qiuxian/10tian.html
 推荐查看天气：http://www.362tq.com/qiuxian/15tian.html
 推荐查看天气：http://www.362tq.com/qiuxian/40tian.html
 推荐查看天气：http://www.362tq.com/jize/
 推荐查看天气：http://www.362tq.com/jize/zuotian.html
 推荐查看天气：http://www.362tq.com/jize/7tian.html
 推荐查看天气：http://www.362tq.com/jize/10tian.html
 推荐查看天气：http://www.362tq.com/jize/15tian.html
 推荐查看天气：http://www.362tq.com/jize/40tian.html
 推荐查看天气：http://www.362tq.com/guangping/
 推荐查看天气：http://www.362tq.com/guangping/zuotian.html
 推荐查看天气：http://www.362tq.com/guangping/7tian.html
 推荐查看天气：http://www.362tq.com/guangping/10tian.html
 推荐查看天气：http://www.362tq.com/guangping/15tian.html
 推荐查看天气：http://www.362tq.com/guangping/40tian.html
 推荐查看天气：http://www.362tq.com/guantao/
 推荐查看天气：http://www.362tq.com/guantao/zuotian.html
 推荐查看天气：http://www.362tq.com/guantao/7tian.html
 推荐查看天气：http://www.362tq.com/guantao/10tian.html
 推荐查看天气：http://www.362tq.com/guantao/15tian.html
 推荐查看天气：http://www.362tq.com/guantao/40tian.html
 推荐查看天气：http://www.362tq.com/handanweixian/
 推荐查看天气：http://www.362tq.com/handanweixian/zuotian.html
 推荐查看天气：http://www.362tq.com/handanweixian/7tian.html
 推荐查看天气：http://www.362tq.com/handanweixian/10tian.html
 推荐查看天气：http://www.362tq.com/handanweixian/15tian.html
 推荐查看天气：http://www.362tq.com/handanweixian/40tian.html
 推荐查看天气：http://www.362tq.com/handanquzhou/
 推荐查看天气：http://www.362tq.com/handanquzhou/zuotian.html
 推荐查看天气：http://www.362tq.com/handanquzhou/7tian.html
 推荐查看天气：http://www.362tq.com/handanquzhou/10tian.html
 推荐查看天气：http://www.362tq.com/handanquzhou/15tian.html
 推荐查看天气：http://www.362tq.com/handanquzhou/40tian.html
 推荐查看天气：http://www.362tq.com/wuan/
 推荐查看天气：http://www.362tq.com/wuan/zuotian.html
 推荐查看天气：http://www.362tq.com/wuan/7tian.html
 推荐查看天气：http://www.362tq.com/wuan/10tian.html
 推荐查看天气：http://www.362tq.com/wuan/15tian.html
 推荐查看天气：http://www.362tq.com/wuan/40tian.html
 推荐查看天气：http://www.362tq.com/xingtai/
 推荐查看天气：http://www.362tq.com/xingtai/zuotian.html
 推荐查看天气：http://www.362tq.com/xingtai/7tian.html
 推荐查看天气：http://www.362tq.com/xingtai/10tian.html
 推荐查看天气：http://www.362tq.com/xingtai/15tian.html
 推荐查看天气：http://www.362tq.com/xingtai/40tian.html
 推荐查看天气：http://www.362tq.com/lincheng/
 推荐查看天气：http://www.362tq.com/lincheng/zuotian.html
 推荐查看天气：http://www.362tq.com/lincheng/7tian.html
 推荐查看天气：http://www.362tq.com/lincheng/10tian.html
 推荐查看天气：http://www.362tq.com/lincheng/15tian.html
 推荐查看天气：http://www.362tq.com/lincheng/40tian.html
 推荐查看天气：http://www.362tq.com/naqiu/
 推荐查看天气：http://www.362tq.com/naqiu/zuotian.html
 推荐查看天气：http://www.362tq.com/naqiu/7tian.html
 推荐查看天气：http://www.362tq.com/naqiu/10tian.html
 推荐查看天气：http://www.362tq.com/naqiu/15tian.html
 推荐查看天气：http://www.362tq.com/naqiu/40tian.html
 推荐查看天气：http://www.362tq.com/baixiang/
 推荐查看天气：http://www.362tq.com/baixiang/zuotian.html
 推荐查看天气：http://www.362tq.com/baixiang/7tian.html
 推荐查看天气：http://www.362tq.com/baixiang/10tian.html
 推荐查看天气：http://www.362tq.com/baixiang/15tian.html
 推荐查看天气：http://www.362tq.com/baixiang/40tian.html
 推荐查看天气：http://www.362tq.com/longyao/
 推荐查看天气：http://www.362tq.com/longyao/zuotian.html
 推荐查看天气：http://www.362tq.com/longyao/7tian.html
 推荐查看天气：http://www.362tq.com/longyao/10tian.html
 推荐查看天气：http://www.362tq.com/longyao/15tian.html
 推荐查看天气：http://www.362tq.com/longyao/40tian.html
 推荐查看天气：http://www.362tq.com/renxian/
 推荐查看天气：http://www.362tq.com/renxian/zuotian.html
 推荐查看天气：http://www.362tq.com/renxian/7tian.html
 推荐查看天气：http://www.362tq.com/renxian/10tian.html
 推荐查看天气：http://www.362tq.com/renxian/15tian.html
 推荐查看天气：http://www.362tq.com/renxian/40tian.html
 推荐查看天气：http://www.362tq.com/nanhe/

上周 code review，看到一个同事写的 picture 标签，差点没把我送走。

手把手教你写对 picture 标签，别再让它背锅了

picture 标签看起来简单，实际上细节特别多，踩过的人都知道疼。今天我把这几年踩过的坑、review 过的代码、以及 W3C 规范里那些容易被忽略的点，一次性说清楚

前端

开发工具

编程语言

手把手教你正确使用picture标签，避开常见坑：img必须写、source格式顺序要对、srcset和media各司其职。附可直接复用的响应式图片模板与自查清单，涵盖AVIF/WebP降级、暗色模式、艺术指导等场景，助你写出规范高效的响应式图片代码。

代码解释

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

手把手教你写对 picture 标签，别再让它背锅了-腾讯云开发者社区-腾讯云

手把手教你写对 picture 标签，别再让它背锅了

手把手教你写对 picture 标签，别再让它背锅了

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐