<picture>标签本身不触发Retina适配，必须在匹配成功的<source>或内部<img>上显式使用srcset并带1x/2x描述符，否则高DPR设备一律fallback到src图；media语法错误、<source>缺media/type、<img>缺src、MIME类型不匹配或混用x/w描述符均导致失效。
只用 <picture> 标签本身不会触发 Retina 适配——必须在匹配成功的 <source> 或内部 <img> 上显式写 srcset 并带 1x/2x 描述符，否则高 DPR 设备一律 fallback 到 src 图。
为什么写了 <picture> 却始终加载同一张图
浏览器不主动“猜”你要适配 Retina，它只严格按 <source> 的 media 匹配、再按 srcset 中的 x 描述符选图。一个环节出错就全退到 <img src>。
-
media值语法错误：比如写成media="max-width: 768px"（缺括号），浏览器直接忽略该<source> -
<source>有srcset但没配media或type：它不参与选择，等于白写 -
<img>缺src：页面留空，不是报错，是静默失败 - 服务器返回的
Content-Type和type="image/webp"不一致（比如返回text/plain）：Network 面板显示blocked:mime-type
srcset 必须用 x 描述符，且顺序不能错
适配 DPR=2/3 屏只认 1x、2x、3x；w 描述符不管用，除非你同时配了 sizes 并想按布局宽度算——那是另一套逻辑。
- 正确写法：
srcset="photo.jpg 1x, photo@2x.jpg 2x, photo@3x.jpg 3x" - 最高倍率图必须放最后：浏览器从左到右匹配，遇到第一个满足 DPR 的就停；如果
3x放前面，2x设备永远选不到2x图 - 禁止混用：
photo-400w.jpg 400w, photo@2x.jpg 2x是未定义行为，Chrome 可能整个srcset忽略
<img> 的 src 不是可选项，而是强制兜底
老浏览器（如 IE、旧版 Safari）和部分低版本 Android WebView 完全不解析 srcset，只看 src。漏掉它，整张图就空白。
立即学习“前端免费学习笔记（深入）”；
-
src应该指向一个中等清晰度、体积适中的版本（比如 800w JPEG），既不至于在小屏浪费带宽，也不至于在桌面端糊成一片 - 即使只打算支持现代浏览器，也别省略
src——缓存失效、CDN 配置错误、MIME 类型错位时，它就是最后一道防线 -
alt必须存在且有意义，否则可访问性失败
调试时优先看 Network 面板里的实际请求头
别信“我写了 2x 就一定加载 2x 图”。打开 DevTools → Network → 刷新，点开图片请求，检查：
- 有没有
Sec-CH-DPR？没有说明浏览器根本没启用 DPR 感知逻辑（可能是禁用了 UA client hints，或页面没声明<meta name="viewport">） - 响应头
Content-Type是否和type属性完全一致？大小写、空格、分号都不能差 - 加载的是哪条
<source>？Network 面板里看到的请求路径，得和你写的media断点、srcset顺序对得上
最容易被忽略的是：所有配置都写对了，但服务器返回的 MIME 类型和 type 属性差一个字母或大小写，浏览器就静默跳过整条 <source>——这种问题在本地开发时尤其难复现，因为本地服务常默认返回 text/plain。
