picture标签本身不处理dpr，必须通过srcset的1x/2x/3x描述符显式声明并按升序排列，配合合法media断点和正确type与content-type匹配，才能实现高分屏自动适配。
picture 标签本身不处理 DPR，靠 srcset 的 x 描述符匹配高分屏
很多人以为 <picture></picture> 能“自动适配 Retina 屏”，其实它根本不读取 window.devicePixelRatio。真正触发 2x/3x 图加载的是 srcset 里的 1x、2x、3x 描述符——浏览器拿到这些标记后，对照当前设备 DPR 自动选源。
所以关键不是写多少个 <source></source>，而是每个 srcset 是否包含正确的 x 描述符，并且顺序合理：
-
srcset中的图必须按 DPR 升序排列：photo-1x.jpg 1x, photo-2x.jpg 2x, photo-3x.jpg 3x（不能颠倒） - 每个
<source></source>的srcset都要带 x 描述符，否则该 source 对高分屏无效 -
<img>的src是 1x 兜底，但它的srcset也得写全，否则 DPR=2 设备可能 fallback 到模糊的 1x 图
media 断点写错会导致高分屏永远加载不到大图
常见错误是断点重叠或语法非法，结果浏览器跳过所有 <source></source>，直接回退到 <img src>——你根本看不出问题，只觉得“2x 屏怎么还是糊的”。
比如下面这段看似合理，实则失效：
<picture><source media="max-width: 768px" srcset="sm-1x.jpg 1x, sm-2x.jpg 2x"><source media="min-width: 768px" srcset="lg-1x.jpg 1x, lg-2x.jpg 2x"> @@##@@ </source></source></picture>
问题出在：media="max-width: 768px" 缺少括号，不是合法媒体查询；min-width: 768px 和前一条重叠（768px 同时满足两者），浏览器按顺序匹配，只会用第一个 source。
正确写法应互斥且带括号：
media="(max-width: 767px)"media="(min-width: 768px) and (max-width: 1279px)"media="(min-width: 1280px)"
type 属性和服务器 Content-Type 不一致会让 WebP/AVIF 静默失败
如果你用 type="image/webp" 声明格式优先，但服务器返回的响应头是 Content-Type: text/plain 或 image/jpeg，Chrome 会直接标记该资源为 blocked:mime-type，且不报错——图片就卡在 loading 状态，最终 fallback 到 <img src="lg-1x.jpg" srcset="lg-1x.jpg 1x, lg-2x.jpg 2x" alt="">。
验证方式很简单：
- 打开 DevTools → Network → 找对应
.webp请求 → 查看 Response Headers 中的Content-Type - 确保它和
<source type="..."></source>完全一致（大小写敏感，image/webp≠image/WEBP） - 本地开发时，Webpack/Vite 默认不设 WebP 的 MIME 类型，需手动配置或改用 CDN
sizes 属性缺失会让 w 描述符完全失效，但 x 描述符不受影响
这点特别容易混淆：srcset 里用 400w、800w 这类宽度描述符时，sizes 是强制要求；但用 1x、2x 时，sizes 可省略。
也就是说，纯高分屏适配（不切宽度）可以只靠 srcset="a.jpg 1x, b.jpg 2x"，不需要 sizes；但一旦混用 w 和 x，或者想让浏览器更精准估算所需像素宽度（尤其在 flex/grid 布局中），sizes 就必须写对：
-
sizes="(max-width: 600px) 100vw, 50vw"表示小屏占满视口，大屏占一半 - 漏写
sizes不报错，但浏览器无法判断“这张图在页面里实际多宽”，w描述符就失去意义，可能选错尺寸 - 医疗影像等对像素精度要求极高的场景，建议避开
w描述符，全程用x+ 固定容器尺寸 +image-rendering: crisp-edges
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
