srcset 使用 w 描述符时必须配合 sizes，否则浏览器忽略 srcset、只加载 src；sizes 告知浏览器图片在各断点下的渲染宽度（如 vw/px），供其结合设备 DPR 从 srcset 中选出最匹配的资源。
srcset 用了 w 描述符却没配 sizes，浏览器直接忽略 srcset，只加载 src 指定的图。
srcset 中的 w 描述符必须搭配 sizes
浏览器看到 srcset="small.jpg 400w, medium.jpg 800w" 这种写法时，会进入「宽度匹配模式」——但它根本不知道这张图在页面里实际占多宽。没有 sizes，它无法把「视口宽度 × 设备像素比」和「候选图的 w 值」对上号，结果就是放弃响应式逻辑，退化为加载 src 或第一张图。
常见错误现象：
- 开发者工具 Network 面板里始终只看到
small.jpg被加载，哪怕在桌面端刷新也一样 - 明明写了三张图，但
srcset在 Safari iOS 11–12.0 上完全不生效
正确做法是补全 sizes，例如：sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 400px"。最后一项不能带媒体条件，它是兜底值。
立即学习“前端免费学习笔记（深入）”；
sizes 的值不是 CSS 宽度，而是“告诉浏览器这张图将渲染多宽”
sizes 不控制布局，也不替代 width 或 max-width。它只是提前声明：在某个断点下，这张图最终会占据多少 CSS 像素宽。浏览器拿这个值乘以当前设备的 window.devicePixelRatio，再从 srcset 中挑最接近的 w 值。
使用场景举例：
- CSS 设置了
width: 100%; max-width: 400px;→sizes="(max-width: 400px) 100vw, 400px" - 图片在栅格中固定占 1/3 宽，最小断点 768px →
sizes="(max-width: 768px) 100vw, 33.33vw" - 导航栏 logo 固定高宽，但移动端全屏显示 →
sizes="(max-width: 480px) 90vw, 200px"
容易踩的坑：
- 写成
sizes="100%"或sizes="400"（缺单位）→ 浏览器解析失败，整个sizes被忽略 - 漏掉某段视口范围，比如没覆盖 >1200px 的情况 → 回退到
src - 用
%单位（如50%）→ 不被支持，必须用vw、px、em等
w 和 x 描述符不能混写在同一 srcset 中
浏览器解析 srcset 时，会根据你用的是 w 还是 x 切换整套匹配逻辑。一旦混用，比如 srcset="icon-1x.png 1x, icon-400.png 400w"，多数浏览器直接放弃解析，整个 srcset 失效，只加载 src。
参数差异：
-
x描述符适用于固定尺寸图标（如width: 48px; height: 48px;），无需sizes，但灵活性差 -
w描述符适配流式布局，必须配sizes，推荐用于绝大多数响应式图片场景
性能影响：
- 错用
x在 DPR 变化频繁的设备（如折叠屏横竖切换）上容易选错图 - 只用
w+ 合理sizes能让浏览器在首次 HTML 解析阶段就决定加载哪张，减少重绘与回流
兼容性陷阱：Safari 12.1 之前不认 w + sizes 动态匹配
Chrome/Firefox/Edge(Chromium) 对 srcset + sizes 支持良好，但 Safari 直到 12.1 才完整实现 w 描述符的动态选择。iOS 11–12.0 会忽略 sizes，仅按设备像素比粗略匹配（类似 x 行为），导致小图被放大模糊。
如果你仍需支持这些旧版 Safari：
- 降级方案用
<picture></picture>+<source media></source>，例如：<source media="(max-width: 480px)" srcset="small.jpg"></source> - 保留
src属性作为所有不支持srcset的浏览器兜底 - 避免依赖
sizes计算出的“最优图”，而是在关键断点手动指定srcset候选
真正难的不是写对语法，而是让 sizes 的每个分段都精准对应真实 CSS 布局行为——稍有偏差，浏览器就选错图，且很难从视觉上察觉。
