单纯为适配2x/3x设备像素比提升清晰度，应优先使用<img>的srcset（如srcset="icon@1x.png 1x, icon@2x.png 2x"），而非<picture>；因DPR匹配由浏览器原生驱动，仅作用于<img>的srcset中x描述符，<picture>在此场景冗余且易出错。
单纯为提升清晰度（即适配 2x/3x 设备像素比），<picture> 不是首选，甚至容易出错；用 <img> 的 srcset 配 2x 就够了。
为什么 <picture> 在纯清晰度场景下反而多余
浏览器对设备像素比（DPR）的识别和资源选择，完全由 <img> 标签内的 srcset 中的 x 描述符驱动——比如 icon@2x.png 2x。这个过程不依赖 <picture> 容器，也不需要 <source> 参与。
-
<source>的srcset若只含x值但没写media，整个<source>会被浏览器忽略（规范要求至少带media或type） - 强行套
<picture>多一层解析，还可能因顺序或语法错误导致降级到src，反而加载低清图 - 旧版安卓 WebView、邮件客户端等对
<picture>支持不稳定，而<img srcset="... 2x">兼容性高得多（IE 除外，但它本就不支持x）
真正该用 <picture> 的时候：宽度 + DPR + 构图/格式三者都要控
只有当你同时需要按视口宽度切换图片尺寸、按 DPR 提升分辨率、还要换构图或格式时，<picture> 才不可替代。
- 小屏加载竖构图 +
@2x小图，大屏加载横构图 +@2x大图——这时每个<source>的media筛断点，其srcset负责该断点内的 DPR 适配 - 想优先用
image/avif，不支持就退到image/webp，最后兜底image/jpeg——必须靠<source type="...">实现 -
media值必须加括号：(max-width: 767px)✅，max-width: 767px❌（后者整条<source>被跳过）
<picture> 里配 DPR 的正确写法
如果真要结合断点和 DPR，关键不是把 2x 写在 <source> 里就完事，而是分层控制：
立即学习“前端免费学习笔记（深入）”；
- 每个
<source>必须有明确media，且不能重叠（推荐开区间：(max-width: 480px)→(min-width: 481px)） -
<source>的srcset只管自己断点下的多倍图，例如小屏用hero-sm@1x.jpg 1x, hero-sm@2x.jpg 2x - 末尾的
<img>必须带src（1x fallback）和完整srcset（覆盖所有支持场景），否则不支持<picture>的浏览器会空白 -
<source>必须写在<img>前面，顺序错则全部失效
验证是否真加载了 @2x 图
别只看 Network 面板第一个请求——那可能是预加载或 fallback。确认方式很直接：
- 在 Elements 面板右键图片 → “Open in new tab”，看 URL 是不是
xxx@2x.png - DevTools → Rendering → 勾选 “Emulate CSS media features”，手动设
device-pixel-ratio: 2，刷新后观察 Network 请求变化 - 控制台执行
window.devicePixelRatio，确认当前环境真实值；模拟器里必须开启 Device Pixel Ratio 设置，光调视口缩放没用 - 如果始终加载
@1x，先检查服务器是否返回200和正确 MIME 类型（如image/png），404或text/plain会导致直接降级
真正容易被忽略的点是：所有 @2x 图片必须和 @1x 保持完全相同的构图与 CSS 渲染尺寸，仅分辨率不同；否则高倍图拉伸或裁剪会失真——这不是标签问题，是资源准备问题。
