旧版 Chrome（≤87）忽略 <source sizes>，仅支持 <img sizes>；Chrome 88+ 开始解析 <source sizes> 但仅采用最后一个匹配项，且 <img sizes> 在有匹配 <source> 时被忽略。
旧版 Chrome（≤87）确实忽略 sizes 属性
Chrome 87 及更早版本在 <picture> 内部的 <source> 上完全不解析 sizes，哪怕写了也当不存在。浏览器只看 srcset 中的宽度描述符（如 100w），然后按视口宽度硬算，不结合 sizes 声明的布局尺寸。结果就是：本该选 320px 图的场景，可能加载了 768px 图，浪费带宽。
sizes 必须写在 <img> 上才被旧版 Chrome 识别
这是关键绕过点——旧版 Chrome 只认 <img sizes="...">，对 <source sizes="..."> 视而不见。所以正确写法是：
<picture> <source media="(min-width: 768px)" srcset="hero-768.jpg 1x, hero-1536.jpg 2x"> <source media="(min-width: 480px)" srcset="hero-480.jpg 1x, hero-960.jpg 2x"> <img src="hero-320.jpg" srcset="hero-320.jpg 1x, hero-640.jpg 2x" sizes="(max-width: 479px) 100vw, (max-width: 767px) 50vw, 33vw"> </picture>
注意三点：
-
sizes只出现在<img>标签上，<source>全部不写 -
<img>的srcset必须覆盖所有断点对应的密度/宽度组合，否则 fallback 会失效 - 如果
<img>没有srcset，旧版 Chrome 就彻底退化成单图加载，sizes无效
Chrome 88+ 开始支持 <source sizes>，但需注意兼容性陷阱
Chrome 88（2020 年 10 月）起才真正解析 <source sizes>，但实际行为仍有偏差：
- 多个
<source>都带sizes时，Chrome 仅用**最后一个匹配的<source>的sizes**，前面的全丢弃 -
<img sizes>在有匹配<source>时会被完全忽略——这点和规范一致，但容易误以为能“兜底” - 若
<source>用了media但没写sizes，而<img>写了sizes，那这个sizes仍生效（因为无匹配 source）
验证是否生效最直接的方法是看 Network 面板的 Size 列
别信 DevTools 的 “Computed” 或 “Elements” 里显示的 currentSrc，它常缓存或误报。真实加载行为得看 Network：
- 强制硬刷新（Ctrl+Shift+R），禁用缓存
- 调整窗口宽度到目标断点（如 420px），观察加载的是哪个 URL
- 对比请求头中的
Sec-Fetch-Width（若有）和实际图宽是否匹配你写的sizes计算逻辑 - 在 Chrome ≤87 中，改
<img sizes>会立刻影响加载图；改<source sizes>则毫无反应
旧版 Chrome 对 sizes 的支持是典型的“半截实现”，最容易被忽略的是：开发者写了 <source sizes> 就以为万事大吉，却没在 <img> 上补全 sizes 和 srcset，导致兼容层直接塌方。
