响应式图片解决的是两个截然不同的需求，而这两者经常被混为一谈。
分辨率切换：用 srcset
问题：同一张图需要以不同像素尺寸交付，好让手机不必下载桌面尺寸的文件。
工具：带宽度描述符的 srcset，加上 sizes 属性告诉浏览器该图在各断点下的渲染宽度。浏览器据此为当前视口和设备像素比挑选最合适的候选。
关键点：由浏览器选择。你描述选项和布局，它来决定。这也是为什么 srcset 与自动生成多种宽度的构建流程配合得很好。
艺术指导：用 picture
问题：不同尺寸下需要不同的图。一张主体很小的宽幅电影感首屏图，在手机上会看不清内容，你想换成更紧凑的裁剪。
工具：picture 元素，内含带媒体条件的 source 子元素，以及一个 img 兜底。这里是你来决定，浏览器服从第一个匹配的 source。
典型场景：
- 桌面用宽幅横构图，移动端用方形或竖构图。
- 桌面用详细图表，移动端用简化版。
- 某个语言区用烧了文字的版本，其他地区用另一版。
格式回退同样用 picture
source 元素的另一大用途，是提供现代格式并带回退：先一个 AVIF source，再一个 WebP source，最后 img 里放 JPEG。浏览器取它支持的第一个类型。顺序很重要——把效率最高的格式放最前，因为浏览器不做比较，只取第一个匹配。
哪些错误会让它形同虚设
- 忘了 img 兜底。 picture 里的 img 不是可选项，它才是真正渲染的元素。没有它什么都不显示。
- 属性写错了元素。 alt、width、height、loading 和 fetchpriority 都属于 img，而不是 picture 或 source。
- 比例变了却没预留空间。 如果各断点的艺术指导裁剪比例不同，每个断点都要有自己的预留比例，否则布局偏移会卷土重来。
- 用 picture 做纯粹的分辨率切换。 能用，但你会失去浏览器根据设备像素比和网络状况自行判断的能力。那种情况请用 srcset。
- 在 CSS 里又做了一遍艺术指导——两套机制各自显示隐藏图片，在部分浏览器上会造成重复下载。
快速抉择
- 同一张图、不同尺寸 → srcset + sizes。
- 不同裁剪或不同内容 → picture + source media。
- 不同文件格式 → picture + source type。
- 三者同时使用完全合法：source 元素可以同时带 media 和 srcset。
从普通的 srcset 起步。只有当构图在小尺寸下确实失效时，才动用 picture——艺术指导会让素材产量翻倍，所以要把它花在真正影响理解的地方。