srcset 总加载最大图的根本原因是 sizes 未准确反映图片实际布局宽度，浏览器依据 sizes 计算的渲染宽度而非屏幕宽度匹配 srcset 中的 w 值；若 sizes 缺失、错配或未覆盖 css 实际宽度（如忽略 max-width 限制），将导致选图严重偏差。
为什么写了 srcset 却总加载最大图
绝大多数情况不是代码写错，而是浏览器根本没按你设想的“设备尺寸”去选图。它真正依据的是 sizes 告诉它的「这张图在页面中会渲染多宽」，再结合 srcset 里带 w 的源去匹配——不是看屏幕宽度，是看布局宽度。如果你没写 sizes，浏览器就默认按 100vw 算，小屏也倾向选大图；如果写了但和 CSS 实际效果不一致（比如容器有 max-width: 600px，sizes 却写 100vw），也会严重偏高。
srcset + sizes 写法必须对齐 CSS 布局宽度
sizes 不是“我想让它显示多宽”，而是“它**实际占多少 CSS 像素宽**”。这个值必须和 DevTools 中看到的图片元素 computed width 一致，否则选图偏差可达 2 倍以上。
- 用 Chrome DevTools 的 Elements → Computed → width 确认真实布局宽度
- 避免把 CSS 的
width: 100%; max-width: 800px直接翻译成sizes="800px"——它在小屏下远小于 800px，应写成sizes="(max-width: 800px) 100vw, 800px" - 兜底值必须存在：
sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 50vw"，最后的50vw是无媒体条件时的 fallback -
srcset中每个w值要覆盖sizes可能产出的所有宽度范围，否则浏览器会 fallback 到src
picture 标签里按设备尺寸分流的关键点
<picture></picture> 本身不识别“设备尺寸”，它靠 <source></source> 的 media 属性做断点判断，而每个 <source></source> 内部的 srcset 才决定具体加载哪张图。常见错误是 media 条件重叠或遗漏兜底。
-
media必须是合法媒体查询，如(max-width: 768px)，不能写成768px或mobile - 多个
<source></source>按顺序匹配，第一个满足条件的生效，所以宽屏条件要放在后面，避免被窄屏规则拦截 -
<img>是必需的，且必须带src（或srcset），否则所有<source></source>失效时页面空白 - 如果想兼顾 DPR，
srcset里用x描述符（如2x），但注意：x和w不能混用在同一srcset中
调试时最容易忽略的三个干扰项
即使语法全对，你也可能看不到预期加载效果，因为浏览器在“帮你省事”。
- 缓存：已加载过的高清图会被复用，切换视口不会重新请求——务必在无痕窗口 + DevTools Network 面板勾选
Disable cache - 设备模拟限制：DevTools 的 Responsive Mode 模拟 DPR 不完全准确，真机测试更可靠；右键图片 → “Open image in new tab” 可直接确认当前 URL
- 网络策略：开启
Save-Data模式（Chrome 设置中可启用）时，浏览器可能主动降级选图，即使sizes和srcset完全匹配
sizes 对它的准确描述、srcset 提供的宽度档位能否覆盖该描述结果。少一个环节，分流就失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
