picture 标签的文档翻过不少遍，真正在项目里用上的场景其实数得过来 🖼️。三年下来就四个，其余情况 img srcset 就够了，没必要把结构搞复杂。整理出来做个记录。
场景一：换构图
桌面端横幅图，到了手机上人物被裁得只剩一半。这种情况叫艺术方向，不是清晰度问题，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，结构更轻，维护成本也低。