结论：必须用 srcset 配 sizes 且 sizes 值须与 css 实际渲染宽度严格一致，否则浏览器无法正确选择图片源；混用 w 和 x、sizes 缺失或错误、未设兜底项等都会导致始终加载最大图。
直接说结论：用 srcset 配 sizes，别只写 1x/2x；sizes 必须和 CSS 实际渲染宽度一致，否则浏览器根本不会切图。
为什么写了 srcset 还是只加载最大图
常见现象是 Network 面板里始终请求 src 指向的大图，或所有设备都加载同一张 1200w 图。根本原因不是浏览器不支持，而是 sizes 缺失、写错，或和真实布局脱节。
-
sizes没写 → 浏览器默认按100vw计算，小屏也选大图 -
sizes="(max-width: 768px) 100vw"漏掉兜底项 → Safari 13.1 之前会 fallback 到100vw，宽屏也加载满屏图 - CSS 把图片设为
width: 300px，但sizes写成"100vw"→ 浏览器以为要渲染 1200px 宽，硬选1200w图 -
srcset混用400w和2x→ 整个srcset解析失败，直接回退到src
srcset 里该用 w 还是 x
取决于你控制的是「布局宽度」还是「设备像素比」：
- 想适配不同视口下图片的显示宽度（比如移动端占满、桌面端只占一半）→ 必须用
w单位，且必须配sizes - 只针对 Retina 屏发高清图，且图片始终占满视口（比如全屏 banner）→ 可用
1x/2x，但sizes可省略 - 二者不能混写：
srcset="logo-400w.jpg 400w, logo@2x.jpg 2x"→ 直接失效
现代响应式布局中，图片宽度由 CSS 控制，x 描述符极易失效；w + sizes 才是可靠路径。
如何验证 sizes 是否写对
别靠肉眼判断“看起来清晰”，唯一可信的是 Network 面板的实际请求：
- 打开 DevTools → Network → 过滤
img - 勾选
Disable cache（Chrome）或关闭缓存（Safari） - 切换设备预设（如 iPhone 12、iPad Pro），或拖动窗口宽度
- 刷新页面，看加载的是
hero-320w.jpg还是hero-1200w.jpg - 如果始终只加载
src，检查控制台是否报错Failed to parse 'srcset' value，或sizes里漏单位（如sizes="50"而非sizes="50vw"）
picture 标签不是 srcset 的替代品，而是补充
<picture></picture> 解决的是「艺术方向」问题，不是分辨率切换：
-
<source></source>的media属性控制“用哪张构图”，比如手机裁头像、桌面展全景 - 每个
<source></source>内部仍可写srcset+sizes，用于在该构图下再做分辨率适配 -
<img>必须存在，且带src和alt，否则空白；它不是可选 fallback，而是强制兜底 -
media必须从宽到窄写，否则小屏永远命中第一条；media="(max-width: 767px)"必须放在最后
真正容易被忽略的点是：sizes 声明的不是“我希望图片多宽”，而是“这张图在当前 CSS 布局下**实际会渲染多宽**”——差一个像素，浏览器就可能选错源。它不是建议值，是计算依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
