srcset 仅提供候选图，真正决定加载哪张图的是 sizes 属性与浏览器对当前布局宽度的计算；若 sizes 缺失、错误或不匹配 CSS 实际宽度，浏览器将默认按 100vw 匹配，导致始终加载最大图。
srcset 本身不决定“加载哪张图”，它只是提供候选列表；真正触发适配的是 sizes + 浏览器对当前布局宽度的计算。只写 srcset 而不配 sizes，多数现代响应式布局下等于白写。
为什么写了 srcset 还是加载了最大图
核心问题不是 srcset 没生效，而是浏览器根本没按你预期的宽度去匹配——它默认用 100vw 当作图片渲染宽度，哪怕你的 CSS 把图片设成了 width: 300px。
- 检查 Network 面板里实际请求的图片名，而不是看页面是否“看起来清晰”
- 如果始终只加载
src指向的图，先看控制台有没有Failed to parse 'srcset' value报错 -
sizes值漏单位（比如写成sizes="50"而非sizes="50vw"）会导致整个属性被忽略 - 某些旧版 Android WebView 会静默丢弃
srcset，此时只有src生效——所以src必须指向一个体积适中、清晰度够用的版本（如 800w）
sizes 属性怎么写才不翻车
sizes 不是“建议”，是浏览器做决策的唯一依据。它必须和真实 CSS 布局一致，单位只能是 vw、px、em，不能是 % 或 rem。
- 常见错误：
sizes="(max-width: 768px) 100vw, 50vw"—— 缺少兜底值，Safari 13.1 之前会 fallback 到100vw - 稳妥写法：
sizes="(max-width: 768px) 100vw, (min-width: 769px) 50vw, 50vw"或直接补兜底, 50vw - 如果图片在 CSS 中固定宽
420px，就别写媒体查询，直接sizes="420px" - 断点要覆盖你实际用到的视口范围，比如卡片内嵌图在 iPad 上常卡在 500–700px 区间，但
sizes只写了(max-width: 480px)和800px，中间就只能硬选
srcset 里该用 w 还是 x
优先用 w 描述符。x 描述符只在图片占满视口且无 sizes 时可靠；现代布局中图片宽度由 CSS 控制，x 容易失效。
-
srcset="logo-320w.png 320w, logo-640w.png 640w"+sizes="(max-width: 480px) 100vw, 320px"是标准组合 - 混用
320w和logo-2x.png 2x→ 整个srcset被忽略，回退到src - 只写
srcset="img-2x.jpg 2x"没配sizes→ 小屏手机也加载 2x 图，纯属浪费 -
src必须存在，且不能是最小图（如 320w），否则老设备用户看到的就是模糊图
验证是否真生效的唯一方式
打开 DevTools → Network → 过滤 img → 切换设备预设或拖动窗口宽度 → 刷新 → 看加载的是哪个文件。
立即学习“前端免费学习笔记（深入）”；
- 务必勾选
Disable cache（Chrome）或关闭缓存（Safari），否则可能看到的是旧请求 - 右键请求 →
Copy response headers→ 对照Content-Length确认没被缓存干扰 - 如果 Request Headers 里没有
Sec-CH-DPR或Width，说明浏览器压根没启用响应式选择逻辑 - 别信模拟器缩放，真机或真实视口尺寸变化才有意义
srcset 写得多全，而在 sizes 是否准确反映了图片在当前布局下的真实渲染宽度——这个值一旦和 CSS 不一致，所有候选图都白准备。 
