直接用 <img> 的 srcset 配 x 描述符（如 logo.png 1x, logo@2x.png 2x）即可按设备像素密度（DPR）自动选图，无需 <picture> 或 JS；关键要避免混用 w、省略 1x、添加 sizes 或格式错误，否则整个 srcset 会被忽略。
直接用 <img> 标签的 srcset 属性就能匹配设备像素密度（DPR），不需要 <picture>。关键不是“怎么写”，而是“怎么写才不被浏览器忽略”。
只用 x 描述符，且不加 sizes，浏览器才会按 DPR 选图
比如设备是 2x 屏（如 iPhone、MacBook Retina），浏览器会自动加载 2x 对应的图；1x 屏就加载 1x 图。这个过程是原生支持的，无需 JS 干预。
✅ 正确写法：纯密度适配（最常用场景）
- 每个
srcset条目必须是「图片路径 + 空格 + x 值」，例如：icon@1x.png 1x, icon@2x.png 2x, icon@3x.png 3x -
src属性必须存在，作为所有旧浏览器和 DPR 不匹配时的兜底 - 所有图必须构图一致、CSS 渲染尺寸相同（比如都设为
width: 40px; height: 40px），否则高倍图会被拉伸或压缩失真 - 不要混用
w和x：icon-400w.jpg 400w, icon@2x.png 2x是无效语法，整个srcset会被浏览器忽略
示例：
<img src="logo.png"
srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
alt="品牌标识">⚠️ 常见失效原因
- 加了
sizes属性（哪怕只是sizes="100vw"）→ 浏览器立刻切换成「宽度匹配模式」，1x/2x完全失效 -
<source>里写了2x（在<picture>中）→source的srcset不解析x，只取第一个可用资源 -
srcset值里有空格错误（如icon@2x.png 2x两个空格）→ 整个值解析失败，回退到src - 服务器返回图片时
Content-Type错误（比如.webp返回text/plain）→ 图片加载失败，控制台报错但不提示具体原因
? 浏览器怎么选？不是“等于”，而是“向上找最接近”
- 设备 DPR = 1.5 → 优先选
2x（因无1.5x，且2x ≥ 1.5） - DPR = 2.6 → 选
3x（比2x更接近） - DPR = 1 → 选
1x（如果没写1x，部分 Safari 可能 fallback 到src，甚至空白）
所以建议至少覆盖 1x、2x、3x，不要省略 1x。
? 怎么确认真的加载了 2x 图？
别靠肉眼判断是否“清晰”，也不信 devicePixelRatio 控制台输出：
- 打开 Chrome DevTools → Network 面板 → 过滤
Img - 硬刷新（Ctrl+Shift+R / Cmd+Shift+R）
- 查看实际请求的 URL，是不是
logo@2x.png - 再切到 Sensors → Device Pixel Ratio → 改成 1 或 2，对比请求变化
不复杂但容易忽略
