在构建现代网页时，为了让图片在手机、平板和桌面显示器上都能以合适尺寸和清晰度展示，我们可以使用 picture 标签结合 srcset 和 media 属性来实现响应式图片。这种方式允许开发者针对不同的视口条件提供不同的图像资源，浏览器会自动选择最匹配的一条。
基本结构说明
picture 标签作为一个容器，内部可以放置多个 source 元素和一个 img 元素。每个 source 通过 media 属性定义生效的媒体查询条件，通过 srcset 给出该条件下可用的图片地址及描述。img 标签作为兜底，保证不支持 picture 的浏览器也能显示图片。
核心属性作用
- media：书写媒体查询，如最大宽度或最小宽度，用来判断当前环境。
- srcset：提供图片路径及像素密度或宽度描述，供浏览器挑选。
- type：可指定图片 MIME 类型，如 image/webp，用于格式兼容。
正确写法示例
下面给出一个常见的断点写法，在屏幕宽度小于 600 像素时使用小图，600 到 1200 像素使用中图，更大屏幕使用大图，同时支持高清屏的 2x 资源。
<picture>
<source media="(max-width: 600px)"
srcset="small.jpg 1x, small-2x.jpg 2x">
<source media="(min-width: 601px) and (max-width: 1200px)"
srcset="middle.jpg 1x, middle-2x.jpg 2x">
<source media="(min-width: 1201px)"
srcset="large.jpg 1x, large-2x.jpg 2x">
<img src="middle.jpg" alt="响应式示例图片">
</picture>
使用宽度描述符的写法
除了使用像素密度 1x、2x，也可以使用宽度描述符 w 配合 sizes 属性，让浏览器根据布局宽度选择。
<picture>
<source media="(max-width: 800px)"
sizes="100vw"
srcset="img-400.jpg 400w, img-800.jpg 800w">
<source media="(min-width: 801px)"
sizes="50vw"
srcset="img-800.jpg 800w, img-1200.jpg 1200w">
<img src="img-800.jpg" alt="宽度描述符示例">
</picture>
常见错误与注意点
| 错误做法 | 正确建议 |
|---|---|
| 把 media 写在 img 上 | media 只能用于 source 元素 |
| srcset 中缺少描述符 | 必须带 1x、2x 或 w 描述符 |
| 忘记写 img 兜底 | 始终在 picture 内放置 img |
浏览器选择逻辑
浏览器会从第一个 source 开始依次检查 media 条件，命中第一条满足条件的 source 后，根据其 srcset 和当前设备像素比或布局宽度选出具体图片。若都不匹配，则使用 img 的 src。理解这一顺序能帮助我们合理安排 source 的先后。
记住：picture 只是提供选择，真正决定显示哪张图的是浏览器依据 media 和 srcset 的匹配结果。
小结
使用 picture 标签配合 srcset 与 media 时，先规划断点，再为每段媒体条件准备对应资源，并保留 img 作为兼容兜底，就能写出稳定可靠的响应式图片代码。