### [写了三年 picture：真正用上的就这四个场景](https://www.huociguo.com/article/1804)

**Published:** 2026-10-02T10:45:37

**Author:** 米了

**Excerpt:** picture 标签的文档翻过不少遍，真正在项目里用上的场景其实数得过来 🖼️。三年下来就四个，其余情况 就够…

picture 标签的文档翻过不少遍，真正在项目里用上的场景其实数得过来 🖼️。三年下来就四个，其余情况 `img srcset` 就够了，没必要把结构搞复杂。整理出来做个记录。

![桌面上的手机与笔记本电脑](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-17561470.jpeg)

同一页面要在手机与桌面呈现不同构图，picture 才有用武之地

## 场景一：换构图

桌面端横幅图，到了手机上人物被裁得只剩一半。这种情况叫艺术方向，不是清晰度问题，srcset 解决不了。用 media 查询换 source，宽屏给横图，窄屏给方图。

## 场景二：新格式降级

```
<picture>
  <source srcset="a.avif" type="image/avif">
  <source srcset="a.webp" type="image/webp">
  <img src="a.jpg" alt="示例">
</picture>
```

浏览器遇到不认识的 type 会跳过整条 source，自动落到下一种格式 ✅。AVIF 体积小三成，这套写法让新格式敢上生产。

## 场景三：深色模式专用图

截图类、插画类图片在深色背景下发白刺眼。media 写 `prefers-color-scheme: dark`，配一套深色资源。拿 CSS 滤镜硬转的方案试过，照片直接偏色，不可靠 ⚠️。

## 场景四：高密度屏与性能组合

img 上保留 srcset 加 sizes 管清晰度，配合 `decoding="async"` 与宽高声明，Retina 屏清晰且不掉帧。首屏主图记得 loading 用 eager，别懒加载。

四个场景之外，单一图片多尺寸交给 img srcset，结构更轻，维护成本也低。

**Tags:** AVIF格式, picture标签, 响应式图片, 深色模式适配, 艺术方向

**Categories:** HTML5

---