sizes是srcset使用w描述符时的强制搭档，缺之则浏览器无法计算目标物理像素宽度，直接忽略srcset而加载src；它必须带单位、真实反映css渲染宽度，且与媒体断点严格对齐。
srcset用w描述符时，sizes不是可选，而是必须存在
只写srcset="img-400w.jpg 400w, img-800w.jpg 800w"但漏掉sizes，浏览器会退回到100vw作为占位宽度——哪怕你页面里这张图实际只宽300px，它也会去加载800w的图。因为浏览器根本不知道“这张图在当前布局下要渲染多宽”，sizes就是干这个的。
常见错误是以为sizes只是“建议”，其实它是计算起点：浏览器先按sizes算出渲染宽度（比如320px），再从srcset中挑最接近且不小于该值的w项（比如选400w）。
-
sizes值必须带单位：sizes="50vw"合法，sizes="50"无效 - 媒体查询要覆盖真实布局断点，别照着设计稿“大概写个768px”，得看CSS里这张图真正换宽的视口临界点
- 如果图片被CSS强制设为
width: 200px，但sizes写成100vw且视口是1200px，浏览器就会按1200px去匹配——哪怕你永远只显示200px
sizes媒体条件必须和CSS布局严格对齐
比如你用Flex或Grid把卡片内图片设为“小屏占满、中屏占半、大屏固定400px”，那sizes就得写成：sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 400px"。如果CSS实际在500px视口下让图片占了300px，但sizes里没覆盖这个区间，浏览器就只能用 fallback（通常是最后一个值）来算，结果可能错配。
检查方法很简单：打开DevTools → Elements → 选中img → 看Computed面板里“Rendered width”是多少，再对照sizes输出的值是否一致。
- 不要写过于保守的
sizes，比如全写100vw，这等于放弃响应式控制 - 避免嵌套媒体查询冲突，比如CSS里用
@media (min-width: 768px)，但sizes里用(max-width: 767px)，边界值容易漏判 -
sizes中多个条件是“从左到右匹配第一个成立的”，顺序错了会导致误判
srcset里的w单位是图片固有宽度，不是显示宽度
img-640w.jpg 640w中的640w指这张图原始像素宽是640px，跟它最后在页面里显示多宽无关。浏览器拿这个数去和sizes算出的“渲染宽度”比，而不是和CSS设置的width比。
所以如果你有一张1200px宽的图，但通过CSS缩到200px显示，srcset里就不该放1200w——除非你真需要高DPR设备上显示清晰（此时还要配合DPR计算，见下一点）。
- 生成不同尺寸图时，确保文件名和
w值真实对应，别把800px图标错标成1200w - 同一张图不用同时混用
w和x描述符，容易触发浏览器降级逻辑 - 如果目标是适配2x屏，但又想控体积，优先用
w+sizes，而不是盲目加2x——后者在小屏上反而加载更大图
为什么DevTools里Network面板总看到最大图被加载
最常见原因是sizes值偏大，或者srcset里缺少中间档位。比如sizes="(max-width: 768px) 90vw"在375px视口下算出来是337px，但srcset只提供320w和640w，浏览器只能选640w（因为320w小于337px，不够用）。
另一个隐蔽问题是浏览器未启用响应式选择逻辑：检查Network里图片请求的Request Headers，如果没有Sec-CH-DPR或Width字段，说明当前环境（比如禁用JS的调试模式、某些隐私浏览）跳过了srcset决策流程，直接回退到src。
- 测试时别只看桌面模拟器，真机访问+开启“Network Conditions”里的“Disable cache”和“Throttling”更准
-
src属性不能省——它是所有老浏览器和降级场景下的兜底，只写srcset会导致IE、旧Safari完全不显示图 - 图片CDN如果做了强缓存，改了
srcset可能看不到效果，先清缓存或加版本参数
srcset提供候选源，sizes声明占位宽，浏览器按规则查表匹配——少一个环节，就退回原始加载逻辑。最容易被忽略的是sizes与CSS布局的实时一致性，它不像JS能动态重算，一旦写死就全程生效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
