浏览器能自动切换分辨率，但需正确使用srcset和sizes：仅区分设备像素密度用1x/2x；按渲染宽度选图必须用w描述符+sizes；sizes须准确反映图片实际css宽度，否则选图失效。
浏览器自己就能做分辨率切换，不需要你写 JavaScript —— 但必须写对 srcset 和 sizes，否则它会乱选图。
什么时候该用 1x/2x，什么时候必须配 sizes + w
关键看你想控制什么：
- 只区分「设备像素密度」（比如 Retina 屏 vs 普通屏），用
srcset="img-1x.jpg 1x, img-2x.jpg 2x"，sizes可省略； - 想按「页面中图片实际渲染宽度」选图（比如小屏只显示 320px 宽，就不该加载 1200px 图），必须用
w描述符 +sizes，1x/2x在这时完全失效； - 混用
1x和w会触发未定义行为，浏览器可能忽略部分条目。
sizes 写错，srcset 就等于白写
sizes 不是“建议尺寸”，而是告诉浏览器“这张图在当前断点下**大概占多少 CSS 像素宽**”。如果写错，浏览器只能瞎猜：
- 错例：
sizes="(max-width: 768px) 100vw"—— 缺少默认值，Safari 13.1 之前会 fallback 到100vw，小屏也加载大图； - 正解：
sizes="(max-width: 480px) 100vw, (min-width: 481px) and (max-width: 960px) 50vw, 33vw"，最后的33vw是兜底； - 更常见错误：
sizes="50vw"配srcset="img-320.jpg 320w, img-640.jpg 640w"—— 小屏下50vw ≈ 180px，但最小只有320w，只能硬选，浪费带宽。
srcset 里的 w 值不是显示宽，是图片文件的固有宽度
很多人把 srcset="img-sm.jpg 320w" 理解成“给 320px 宽的容器用”，这是错的。这里的 320w 表示这张图本身是 **320 像素宽** 的原始文件：
- 浏览器拿到
sizes计算出“这张图要渲染成 310px 宽”，再从srcset中挑最接近的w值（比如320w）； - 所以你得提前生成多个真实宽度的图：320px、640px、800px、1200px……不能靠缩放一张图应付；
- 别写
srcset="img.jpg 100w, img.jpg 200w"—— 文件名一样，浏览器可能缓存混淆，或直接跳过重复项。
真正容易被忽略的点是：sizes 必须和 CSS 布局保持同步。如果某个断点下图片容器实际宽度是 calc(100% - 40px)，但 sizes 还写 100vw，浏览器就永远选不准。这不是语法问题，而是语义错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
