直接用 <img> 的 srcset 就够了，<picture> 在纯像素密度适配场景下反而容易出错，因其语法严格、兼容性差且浏览器原生支持 DPR 匹配无需容器。
直接用 <img> 的 srcset 就够了，<picture> 在纯像素密度（DPR）适配场景下反而容易出错。
为什么 <picture> 不该用于单纯 2x/3x 切换
浏览器对设备像素比（window.devicePixelRatio）的匹配是原生能力，不依赖 <picture> 容器。只要 <img> 标签里写对 srcset 和 src，浏览器就会自动选最接近当前 DPR 的资源。
-
<source>的srcset中混用w和x描述符（比如icon@2x.png 2x, icon-600w.jpg 600w）会导致整个值被忽略——Chrome 会 fallback 到<img>的src，Safari 可能加载错误资源 -
<picture>要求每个<source>的media必须加括号（(max-width: 768px)✅，max-width: 768px❌），漏括号就跳过该条，但开发者常忽略这点 - IE 全系不支持
<picture>，Edge 12–17 有srcset解析 bug，而<img srcset>的兼容性更好（IE 不支持但会退到src）
<img> 的 srcset 正确写法
只用一个 <img> 标签就能完成 1x/2x/3x 自动切换，前提是格式和参数都合规：
-
srcset每个条目必须是图片路径 x，例如：icon@2x.png 2x、icon@3x.png 3x -
src属性必须存在，它是所有旧浏览器和 DPR 不匹配时的唯一 fallback；没有它，不支持srcset的环境会显示空白 - 所有倍率图（@1x/@2x/@3x）必须保持完全相同的构图和 CSS 渲染尺寸，仅分辨率不同；否则高倍图会被拉伸或裁剪失真
- 不要在同一个
srcset里混用w和x：例如icon-400w.jpg 400w, icon@2x.png 2x是无效语法
正确示例：
<img src="icon.png" srcset="icon@2x.png 2x, icon@3x.png 3x" alt="logo">
立即学习“前端免费学习笔记（深入）”；
什么时候才真需要 <picture>
只有当你需要「不同构图」或「不同断点下的独立 DPR 适配」时，<picture> 才有价值。比如：
- 小屏用竖构图 + 2x 图，大屏用横构图 + 2x 图——这时每个
<source>都要带自己的media和含x的srcset - 同一断点下还要按格式降级（如 WebP → JPG），且每种格式都要支持 2x：此时需多个
<source>，分别写type和对应srcset - 多个
<source>的media断点不能重叠，推荐用开区间写法：(max-width: 767px)→(min-width: 768px) and (max-width: 1200px)
调试时最容易被忽略的点
用了 2x/3x 还是加载 1x 图？别急着改代码，先确认：
- 在控制台运行
window.devicePixelRatio，看实际值是不是 2 或 3（iOS 真机通常如此；Chrome 模拟器必须开启 “Device Pixel Ratio” 设置，仅靠响应式视口缩放无效） - 检查图片路径是否 404，浏览器发现资源不可达时会静默 fallback 到
src - 确保服务器没对
@2x.png类路径做特殊重写或拦截（有些 CMS 或 CDN 会误判为恶意路径） -
<img>必须有明确的 CSS 渲染尺寸（比如width: 24px; height: 24px），否则浏览器无法准确计算 DPR 匹配所需的渲染像素数
