必须用srcset+sizes或<picture>显式声明设备像素比适配逻辑，否则高清屏必然模糊、低DPR设备必然浪费带宽；仅靠src或width:100%无法解决DPR差异导致的模糊问题。
直接结论：仅靠 src 或 width:100% 无法解决 DPR 差异导致的模糊问题；必须用 srcset + sizes 或 <picture> 显式声明设备像素比适配逻辑，否则高清屏必然模糊、低DPR设备必然浪费带宽。
为什么 retina 屏上图片看起来发虚？
根本原因不是“图片太小”，而是浏览器没拿到足够像素的源图去渲染。CSS 像素（比如 300px 宽的容器）在 DPR=2 设备上实际需要 600 物理像素宽的图像才能填满且不插值。如果只给一张 300w 的图，浏览器只能拉伸它——结果就是模糊。
常见错误现象：
- 开发时在 MacBook Pro 上看着清晰，测试人员用 iPhone 15 拍照反馈“界面截图糊”
- 同一张
img标签，在 Chrome DevTools 切换 Device Mode 后清晰度突变 - 使用
background-image+background-size: cover时，@2x图片没生效，仍走 1x fallback
真正该做的：用 srcset 明确告诉浏览器“这张图在 DPR=2 时该用哪张”。
立即学习“前端免费学习笔记（深入）”；
srcset 中 w 和 x 描述符怎么选？
w 描述符按视口宽度匹配，x 描述符按设备像素比匹配——二者不能混用在同一 srcset 值里。选哪个取决于你控制图像尺寸的方式：
- 如果你用 CSS 控制图片宽度（如
max-width: 100%），且图片在不同断点下占据不同视口比例，就用w+sizes - 如果你固定图片 CSS 尺寸（如
width: 200px; height: 100px），但希望 DPR=2 时加载双倍像素图，就用x描述符 -
srcset="icon@1x.png 1x, icon@2x.png 2x"是合法的；srcset="icon-400.png 400w, icon@2x.png 2x"是非法的，浏览器会忽略整个srcset
示例（固定尺寸适配 DPR）：
<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x" alt="logo">
<picture> 什么时候必须用？
当你要同时满足三个条件时：不同屏幕宽度 + 不同 DPR + 不同图片格式或裁剪方式，<picture> 是唯一解法。比如 IndexTTS2 WebUI 中，手机端需要竖构图小图、桌面端需要横构图大图、且桌面端优先用 webp。
- 每个
<source>可独立指定media（宽度）、type（格式）、srcset（含w或x） -
<img>标签是 fallback，必须存在，且它的src不参与匹配逻辑，只在所有<source>都不命中时才加载 - 注意：
type="image/webp"在 Safari 14+ 才被完全支持，旧版 Safari 会跳过该<source>直接走<img>fallback
典型结构：
<picture> <source media="(max-width: 768px)" srcset="ui-mobile.jpg"> <source type="image/webp" srcset="ui-desktop.webp 1x, ui-desktop@2x.webp 2x"> <img src="ui-desktop.png" alt="UI screenshot"> </picture>
容易被忽略的兼容性与性能细节
很多团队加了 srcset 就以为万事大吉，但实际部署后仍有模糊或加载异常——问题常出在这些地方：
-
sizes值写错：比如写成sizes="(max-width: 768px) 100vw, 50vw"，但实际图片容器在 768px 以上是800px宽，浏览器就会选错图 - CDN 缓存未区分 DPR：同一 URL 被缓存为单版本，导致
srcset失效；需确认 CDN 支持Vary: DPR或用路径区分（如/img/logo@2x.png） - 懒加载（
loading="lazy"）与srcset共存时，部分老版 Android WebView 会忽略srcset，只加载src - WebP/AVIF 图片没提供 fallback：Safari 13 及更早版本不支持
type="image/webp"，必须确保<img>的src是 PNG/JPEG
最稳妥的做法：先用 srcset + sizes 覆盖 90% 场景；复杂艺术方向或格式降级需求，再上 <picture>；所有高清图必须配套提供 1x fallback 路径。
