sizes 是 w 描述符的强制搭档，缺之则浏览器无法计算目标物理像素宽度，导致 srcset 失效；它提供图片在布局中的 CSS 像素宽度，配合 devicePixelRatio 决定加载哪张图。
直接说结论：sizes 不是可选项，而是 srcset 用 w 描述符时的强制搭档——漏掉它，浏览器就无法计算目标物理像素宽度，大概率退化为只加载 src 或瞎选第一张。
为什么必须配 sizes 才能用 w 描述符
srcset 里的 400w、800w 这些值只是“图片本身有多宽”，不代表它在页面里会显示多宽；浏览器真正需要的是“这张图在当前布局下占多少 CSS 像素”，再乘以设备 window.devicePixelRatio，才能算出该加载哪张。而 sizes 就是干这个的：它不控制样式，只提供布局上下文。
常见错误现象：
- 写了
srcset="a.jpg 400w, b.jpg 800w"却没写sizes→ 浏览器忽略srcset，只加载src -
sizes里写了300px或100%→ 语法非法，整条属性被丢弃 -
sizes="(max-width: 768px) 100vw"但没写兜底项（如, 50vw）→ 视口 > 768px 时无匹配，回退到src
sizes 的写法必须覆盖所有视口断点
sizes 是一个逗号分隔的列表，每项由「媒体条件 + 长度值」组成，最后一项不能带媒体条件，它是默认 fallback。
立即学习“前端免费学习笔记（深入）”；
使用场景示例：
- CSS 中设了
max-width: 400px; width: 100%;→sizes="(max-width: 400px) 100vw, 400px" - 栅格系统中占 1/3 宽，最小断点 768px →
sizes="(max-width: 768px) 100vw, 33.33vw" - 移动端全宽、平板半宽、桌面固定 600px →
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 600px"
注意：sizes 中的长度单位只支持 vw、px、em、rem、calc()，不支持 %；媒体条件里括号间不要加空格（(max-width:768px) 比 (max-width: 768px) 更稳妥，尤其对旧版 Edge）。
srcset 里 w 和 x 描述符不能混用
浏览器看到 srcset 里既有 400w 又有 2x，会直接放弃整个属性，降级到 src。
正确选择逻辑：
- 用
w+sizes：适合内容区图片，布局宽度随视口变化（如文章配图、Banner） - 用
1x/2x：适合固定尺寸小图，比如头像、图标，CSS 里明确写了width: 24px; height: 24px; - 想兼顾？改用
<picture>+ 多个<source>，按媒体查询或格式分流
性能影响：错用 x 描述符配合响应式布局，可能在 iPhone SE（375px 宽 + 3x DPR）上加载 1200w 图，远超实际所需；而正确写 sizes="(max-width: 375px) 100vw" + srcset="a.jpg 400w, b.jpg 800w"，浏览器会选最接近 375×3≈1125 的 800w 图，更合理。
验证是否生效的实操方法
别靠肉眼猜，用浏览器 DevTools 看真实行为：
- 打开 Network 面板，刷新页面，筛选
Img类型，看加载的是哪张 URL - 在 Elements 面板选中
<img>，右键 → “Reload frame” 或切换设备模拟器，观察 Network 是否变化 - 在 Console 里运行
document.querySelector('img').currentSrc，直接读取当前生效的源地址 - 对 iOS 11–12.0 或旧 Edge，建议加
<picture>fallback，因为它们对sizes解析不完整
最容易被忽略的一点：sizes 的“长度值”不是目标图片宽度，而是它在布局中占据的 CSS 空间——哪怕你用 CSS 把图片缩成 1px，只要 sizes 写的是 100vw，浏览器仍会按视口全宽 × DPR 去找图源。
