单纯想让局部图片在高DPR屏上更清晰，别用<picture>——直接用<img src="icon.png" srcset="icon@2x.png 2x, icon@3x.png 3x">即可，src提供兼容fallback，浏览器按devicePixelRatio自动选最匹配资源，<picture>在纯DPR场景下反而易出错、增维护成本。
单纯想让局部图片在高 DPR 屏上更清晰，别用 <picture> —— 直接在 <img> 上写对 srcset 和 src 就够了，<picture> 在这种场景下反而容易出错、增加维护成本。
为什么 <picture> 不适合纯 DPR 清晰度提升
设备像素比（DPR）匹配是浏览器原生能力，不依赖容器。只要 <img> 的 srcset 写成 icon@2x.png 2x, icon@3x.png 3x 格式，并配好 src，浏览器就会自动按 window.devicePixelRatio 选最接近的资源。
-
<picture>的<source>必须带media才生效，而media="(min-resolution: 2dppx)"这类写法兼容性差、易被忽略（比如旧安卓 WebView 可能不识别） - 混用
media和srcset在同一个<source>里，Chrome 会直接跳过该<source> - 每个
<source>都要单独维护srcset，但局部图通常不需要“不同构图”，纯属冗余
<img> 的 srcset 怎么写才真正生效
关键不是堆文件，而是格式、fallback 和尺寸一致性：
-
src必须存在，它是所有不支持srcset的环境（如 IE、某些邮件客户端）唯一加载源 -
srcset中每个项必须是路径 x形式，例如：logo@2x.png 2x，不能写成logo@2x.png 2x, logo-800w.jpg 800w（混用x和w描述符会导致整个值被忽略） - 所有 @1x/@2x/@3x 图必须保持完全相同的构图和 CSS 渲染尺寸；如果
width: 100px; height: 100px，那 @2x 图就得是 200×200 像素，否则浏览器拉伸后反而模糊 - 服务器返回的 MIME 类型必须正确（
image/png，不是text/plain），HTTP 状态码不能是 404（否则降级到src）
如何验证局部图真加载了高分版本
别只看 Network 面板第一个请求，它可能是预加载或 fallback：
立即学习“前端免费学习笔记（深入）”；
- 在 Elements 面板右键图片 → “Open in new tab”，检查 URL 是否含
@2x或@3x - DevTools → Rendering → 勾选 “Emulate CSS media features”，手动设
device-pixel-ratio为 2 或 3，硬刷新（Cmd+Shift+R）观察 Network 请求变化 - 控制台执行
window.devicePixelRatio，确认当前真实 DPR；模拟器里必须开启 Device Pixel Ratio 设置，光调视口缩放没用 - 禁用缓存后重试，避免因 304 响应误判实际加载的是哪张图
真正容易被忽略的点是：所有 @2x 图片必须和 @1x 图片在视觉上“一模一样”，只是分辨率翻倍 —— 如果设计师给的 @2x 是重新渲染的锐化版，而 @1x 是模糊压缩版，那 DPR 切换反而会造成局部风格断裂。
