srcset 和 sizes 必须配合使用才能按布局宽度精准选图；单独用 srcset 的 w 描述符不配 sizes 时浏览器退化为 100vw 匹配，易加载过大图片，而 x 描述符仅在无 sizes 时按设备像素比生效，不适应现代响应式布局。
直接说结论：srcset 和 sizes 必须配合使用才能真正按布局宽度选图；单独写 srcset 且带 x 描述符（如 2x）只在无 sizes 时生效，且仅适配设备像素比——这不是大多数响应式场景要的。
为什么写了 srcset 还是加载大图？
常见现象：页面在手机上打开，srcset 里明明有 320w、640w，但 Network 面板里却加载了 1200w 的图。
- 根本原因：没写
sizes，或sizes值写得不合理 - 浏览器默认把图片渲染宽度当成
100vw，然后从srcset中挑最接近的w值——比如视口宽 375px，它发现1200w比320w更“接近”375w（因差值小），就选了大图 -
sizes不是可选项，它是告诉浏览器“这张图在当前断点下实际占多宽”的关键线索
srcset 中 w 和 x 的区别与误用
很多人混淆 320w 和 2x 的适用场景，结果策略失效。
-
320w表示该图片文件的**固有宽度是 320 像素**，用于匹配「布局宽度」——必须搭配sizes使用 -
2x表示该图片适用于 **DPR = 2 的设备**（如 iPhone 8），用于匹配「设备像素比」——仅在**不写sizes** 时才起作用 - 错误组合：
srcset="img-1x.jpg 1x, img-2x.jpg 2x" sizes="(max-width: 768px) 100vw"→ 浏览器看到sizes就自动忽略x，导致2x完全不生效 - 正确思路：想适配高分屏且布局固定？用
w+sizes；只想给 Retina 屏发高清图、不管布局？去掉sizes，纯用x
picture 元素什么时候非用不可？
当你要的不是“同一张图缩放”，而是“不同构图、不同格式、不同内容”的条件切换时，<picture></picture> 是唯一选择。
- 艺术方向裁剪：移动端用竖版特写图，桌面端用横版全景图
<source media="(max-width: 768px)" srcset="portrait.jpg"></source><source media="(min-width: 769px)" srcset="landscape.jpg"></source> - 格式降级：优先加载
webp，不支持时回退到jpeg<source srcset="photo.webp" type="image/webp"></source><source srcset="photo.jpg" type="image/jpeg"></source> - 注意：
<picture></picture>内部的<source></source>按顺序匹配，第一个满足条件的即被采用；<img>是兜底，必须存在且带alt
sizes 属性怎么写才靠谱？
sizes 看似简单，但写错一个值就让整套响应式逻辑失效。
- 语法本质是「媒体查询 + 对应宽度」，例如：
sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 33vw" - 必须覆盖所有可能的视口宽度，尤其要补默认值（现代浏览器支持无兜底，但 Safari 13.1 及更早版本需要）
- 避免写死像素值如
800px而不加媒体条件——这会让小屏也尝试渲染 800px 宽的图，触发大图加载 - 真实项目中建议先确定 CSS 布局：比如 banner 在移动端占满、平板占 50%、桌面固定 800px，再反推
sizes：sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 800px"
最容易被忽略的一点：浏览器选图时，是先根据 sizes 算出图片的「渲染宽度」，再乘以设备 DPR，最后在 srcset 中找最接近的 w 值——这个计算过程完全透明，你无法强制指定某张图，只能靠提供合理梯度的 w 值和精准的 sizes 来引导。所以生成图片资源时，别只做 320/750/1200，要对齐你 sizes 所定义的槽位宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
