根本原因是sizes缺失导致浏览器退化为加载src或第一张候选图；sizes必须与css渲染宽度严格对齐，且语法容错率极低，需通过devtools实测宽度换算并静态生成。
为什么没写 sizes 就加载了最大图
根本原因不是浏览器“选错了”，而是它压根没走响应式逻辑——sizes是srcset用w描述符时的强制搭档，缺了就退化为只加载src或第一张候选图。你写了srcset="small.jpg 400w, large.jpg 1200w"，但没配sizes，浏览器就当没这回事，直接拉large.jpg。
sizes 必须和 CSS 渲染宽度严格对齐
浏览器不读你的 CSS，它只信sizes里写的值。哪怕你用max-width: 320px; width: 100%把图片压到 320px 宽，只要sizes="(max-width: 768px) 100vw"，它就按当前视口（比如 1200px）算出 1200px，然后去srcset里挑 ≥1200w 的图。
- 打开 DevTools → Elements → 选中
<img>→ 右侧 Computed 面板看width的实际像素值 - 把这个值换算成
vw：比如 300px / 视口宽度 × 100，再填进对应断点的sizes项 - 常见布局映射示例：
– 全宽卡片（左右各 16px 边距）→ 实测宽度约 93vw，不能写calc(100vw - 32px)（calc()在sizes中多数浏览器不支持）
– 栅格三列（含 gap）→ 不是简单写33.33vw，要减去间隙像素再换算
– 固定最大宽max-width: 800px→ 写成sizes="(max-width: 800px) 100vw, 800px"
sizes 语法错一个空格就整个失效
sizes 是个极其脆弱的字符串，浏览器解析失败就直接丢弃整条属性。常见硬伤：
Comet AI 浏览器
下载
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
- 媒体条件括号和数值间缺空格：
(max-width:768px)100vw❌，必须是(max-width: 768px) 100vw✅ - 最后一项带媒体条件：
(min-width: 1200px) 33vw❌，兜底值必须无条件，如33vw - 用了非法单位：
50%、calc(100% - 2rem)、auto（非懒加载场景）都不行，只认vw、px、em - 漏掉兜底值：旧版 Safari 可能完全忽略
sizes，导致响应式失效
sizes 不能靠 JS 动态生成
浏览器在 HTML 解析阶段就决定加载哪张图，此时 CSS 还没计算、JS 更没执行。你用 document.querySelector('img').setAttribute('sizes', ...) 或 React 的 useEffect 设置，请求早已发出，毫无意义。
- 动态设置只适用于懒加载且明确声明
loading="lazy"+width/height的极少数场景 -
sizes="auto"目前仅限 Chrome Canary 和最新稳定版支持，且依赖loading="lazy"和固有尺寸，非懒加载图片禁用 - 工程化方案必须在构建时生成，比如扫描 HTML + 解析对应 CSS，提取每个断点下的 computed width，再转成合法
sizes字符串
真实渲染宽度和 sizes 声明之间哪怕差 10px，都可能让浏览器跨档选图。别抄模板，别信设计稿标注，一定要用 DevTools 看 Computed width，再手动换算。
