srcset需明确标注x或w单位才有效，w必须配sizes属性，x可单独使用；常见问题包括sizes不准确、混用单位、未写sizes等，导致加载大图。
srcset 里写什么尺寸才有效
srcset 不是随便写几个分辨率就行，浏览器只认 srcset 中明确标注了像素密度（x）或视口宽度（w）的值，否则会被忽略。常见错误是只写 img.jpg 800w 却没配 sizes，或者混用 x 和 w 单位导致解析失败。
-
w单位必须搭配sizes属性一起用，比如sizes="(max-width: 768px) 100vw, 50vw" -
x单位可单独使用，适合固定宽高的图片，如头像：avatar@2x.jpg 2x - 所有
srcset中的w值应基于图片在页面中实际占位宽度来估算，不是原始文件宽度
为什么加了 srcset 还总是加载大图
最常见原因是 sizes 写得不准确，或者没写。浏览器拿到 srcset 后，会先查 sizes 算出“当前图片应该多宽”，再从 srcset 列表里挑最接近的那个 w 版本。如果 sizes 写成 "100vw"，但图片实际只占 300px 宽，浏览器仍可能选 1920w 的图。
- 用 Chrome DevTools 的 Network → Header 查看
Request Headers里的dpr和viewport-width，确认设备上报是否正常 - 检查 CSS 是否覆盖了图片宽度（比如
width: 100%但父容器没设宽），这会让sizes计算失准 - 避免在
sizes里用em或rem，只推荐vw、px和媒体查询语法
如何为不同屏幕密度和布局同时适配
单靠 srcset + sizes 只能解决宽度维度；要兼顾 DPR（比如 Retina 屏）和布局断点，得组合用。典型做法是用 w 描述宽度候选，再补上 2x 版本作高 DPR 回退。
- 推荐写法：
srcset="photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w, photo-1200w@2x.jpg 2x" - 这样浏览器在 400px 宽 + DPR=2 的设备上，会优先选
photo-800w.jpg（比400w更匹配），而不是硬切到2x版本 -
2x版本只在没有足够w候选时启用，所以别省略中等宽度的w项，否则高 DPR 设备反而加载更大图
srcset 配合 picture 元素做艺术指导
当需要为不同视口换完全不同的图片（比如桌面端横图、移动端竖图），srcset 不够用，必须套 <picture></picture>。这时 srcset 放在 <source></source> 里，每个 <source></source> 对应一个媒体条件。
<source media="(max-width: 768px)" srcset="mobile.jpg 1x, mobile@2x.jpg 2x"></source><source media="(min-width: 769px)" srcset="desktop-800w.jpg 800w, desktop-1600w.jpg 1600w"></source>-
<img src="fallback.jpg" alt="">是必填的降级项，不能省 - 注意：
<source></source>的media是按顺序匹配的，第一个满足的生效，后续忽略
真正难的是预估各断点下图片的渲染宽度，这个得靠真实设备调试，模拟器容易误判。一旦 sizes 或 media 写偏一点，就可能在 iPhone 上加载桌面图，在折叠屏上加载小图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
