直接用<img>的srcset配2x/3x就足够适配DPR，<picture>在纯像素比切换场景下冗余且易错；其核心价值在于断点布局或格式降级，而非DPR匹配。
直接用 <img> 的 srcset 配 2x/3x 就够了，<picture> 在纯像素比切换场景下是冗余的，还容易配错。
为什么不用 <picture> 只为适配 DPR
浏览器对设备像素比（DPR）的判断和资源选择，完全由 srcset 中的 x 描述符驱动，跟 <picture> 无关。<picture> 的价值在于「艺术方向」或「断点布局」——比如小屏换竖构图、横屏换宽图、WebP fallback 等。如果只是同一构图下提供 1x/2x/3x 版本，<img> 自身就能完成全部逻辑，且更轻量、兼容性更好。
-
<picture>内部每个<source>若只写srcset不带media或type，它会被忽略（规范要求至少含srcset或type，但无条件时无法触发匹配） - 强行套
<picture>会多一层解析开销，且<img>的src和srcset仍会被浏览器读取，可能造成冗余请求或逻辑混淆 - 旧版安卓 WebView、部分邮件客户端等对
<picture>支持不稳，而<img srcset>的兼容性高得多（IE 除外，但 IE 本就不支持x描述符）
srcset="a@1x.jpg 1x, a@2x.jpg 2x, a@3x.jpg 3x" 怎么写才生效
关键不是“写了多个 x”，而是格式、兜底和文件可达性都必须到位：
- 必须有
src属性作为 1x 基础 fallback：<img src="a@1x.jpg" srcset="a@1x.jpg 1x, a@2x.jpg 2x, a@3x.jpg 3x">—— 没src，旧浏览器直接空白 -
srcset中每个条目严格为「路径 + 空格 + x 值」，不能混w单位：srcset="a@2x.jpg 2x, b-600w.jpg 600w"是无效的，整条srcset会被降级到src - 确保图片文件真实存在且 HTTP 返回码为 200，MIME 类型正确（如
image/jpeg），否则加载失败后直接退到src - 验证是否真加载了 2x 图：DevTools → Rendering → “Emulate CSS media features” → 设置
device-pixel-ratio: 2，再刷新看 Network 里请求的是不是@2x.jpg
<picture> 里非要配 DPR，该怎么组织
仅当你要「同时响应视口宽度 + DPR」时才需要，比如：小屏设备加载小尺寸 + 高倍图，大屏加载大尺寸 + 高倍图。这时 <source> 的 media 控制断点，其内部 srcset 控制 DPR：
立即学习“前端免费学习笔记（深入）”；
<picture> <source media="(max-width: 480px)" srcset="icon-sm@1x.png 1x, icon-sm@2x.png 2x, icon-sm@3x.png 3x"> <source media="(min-width: 481px)" srcset="icon-lg@1x.png 1x, icon-lg@2x.png 2x, icon-lg@3x.png 3x"> <img src="icon-lg@1x.png" srcset="icon-lg@1x.png 1x, icon-lg@2x.png 2x" alt="icon"> </picture>
- 浏览器先按
media找到匹配的<source>，再在它的srcset里按当前 DPR 选图 -
<img>的srcset不是可选的——它是不支持<picture>的浏览器的最终 fallback，也参与 DPR 选择 - 所有
@2x图必须和@1x图保持完全相同的 CSS 渲染尺寸（比如都是width: 24px; height: 24px），否则高倍图会拉伸或裁剪
最容易被忽略的细节
很多人调了半天发现还是加载 1x 图，问题往往不在 HTML 写法，而在环境或资源本身：
-
window.devicePixelRatio在 Chrome 模拟器里默认是 1，必须手动开启「Device Pixel Ratio」设置，不能只靠缩放视口 - iOS 真机上
devicePixelRatio是 2 或 3，但某些企业内网代理或 CDN 会篡改响应头，导致图片返回text/plain，浏览器静默失败后退到src -
<picture>中的<img>必须有src，哪怕你认为它永远不会被用到——没有src，整个标签在旧浏览器里就是空节点
