浏览器总加载最大图的主因是sizes缺失或与CSS布局不匹配，导致无法按视口宽度精准选图；必须配对srcset的w描述符与准确sizes值，并禁用缓存验证。
浏览器不会自动“猜”你想要哪张图——srcset 和 sizes 必须配对准确，否则大概率加载最大图，白写。
为什么写了 srcset 还是总加载最大那张？
最常见原因不是语法错，而是 sizes 值和实际 CSS 布局不一致，或者根本没写 sizes。浏览器拿到 srcset="a.jpg 400w, b.jpg 800w" 后，如果没有 sizes，就默认按 100vw 算渲染宽度；视口一宽，它立刻选 800w——哪怕图片被 CSS 压到 300px 宽。
其他干扰项包括：
- 浏览器缓存：已加载过的高清图会被复用，切换小屏也不重发请求
-
sizes里漏单位，比如写成sizes="50"而不是sizes="50vw"，整个值被忽略 -
srcset混用w和x，例如"img-400w.jpg 400w, img-2x.jpg 2x"→ 整个srcset失效，回退到src - 老浏览器（如 IE、旧版 Safari）根本不解析
srcset，只看src，所以src必须指向一个能用的中等尺寸图（比如 800w），不能是最小或最大档
sizes 怎么写才和布局真实匹配？
sizes 不是“建议”，是浏览器计算加载哪张图的唯一依据。它声明的是“这张图在当前视口下会渲染成多宽”，单位必须是 vw、px 等合法长度，不能是 % 或 rem。
立即学习“前端免费学习笔记（深入）”；
举个真实场景：一张卡片内图片，CSS 设为 width: 100%; max-width: 300px;，在移动端占满容器，在桌面端被限制在 300px。
对应 sizes 应该写：
sizes="(max-width: 768px) 100vw, 300px"
而不是：
-
sizes="(max-width: 768px) 100vw, 100vw"（桌面端也按全宽算，会选大图） -
sizes="300px"（无视断点，小屏也强制用 300px，可能选不到合适源） -
sizes="(max-width: 768px) 100%, 300px"（%非法，整个值失效）
srcset 用 w 还是 x？关键看控制粒度
用 w（如 400w）是主流选择，它对应图片原始像素宽，配合 sizes 才能真正响应布局变化；x（如 2x）只在图片尺寸固定、且你明确知道设备 DPR 时可靠。
典型误用：
- 只写
srcset="logo@2x.png 2x"没配sizes→ 小屏手机也加载 2x 图，浪费带宽 -
src指向 1920w 大图 → 老浏览器直接卡顿，且无降级缓冲 - 混用
400w和2x→srcset解析失败，静默回退
推荐写法（w 单位 + sizes）：
<img src="hero-800.jpg" srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw">
怎么验证 srcset 真生效了？
别信“看起来清晰”，也别靠模拟器缩放判断。真正在意的是浏览器到底发了哪个请求：
- 打开 Chrome 无痕窗口（Incognito）
- F12 → Network 面板 → 勾选
Disable cache - 按 Ctrl+Shift+M 切 Device Toolbar，设视口为 400px、700px、1000px 分别刷新
- 过滤
img，看实际加载的是hero-400.jpg、hero-800.jpg还是hero-1200.jpg - 如果始终只加载
src指向的图，检查控制台是否报Failed to parse 'srcset' value
最容易被忽略的一点：sizes 的媒体查询必须和你的 CSS 断点完全一致。哪怕只差 1px，浏览器就可能命中错误分支，选错图源。
