标签本身不自动适配视网膜屏，必须在上用srcset配1x/2x描述符且不设sizes，否则高dpr设备无法触发切换；若的media写错、缺src或type不匹配，浏览器将静默回退至。
srcset 配 x 描述符，并确保 <img> 存在且带 src，否则所有高 DPR 设备都会静默 fallback 到那张图。
为什么写了 <picture></picture> 却始终加载同一张图
这是最常被忽略的“失效”现象。浏览器不会主动猜测你是否想适配 2x 屏——它只严格按 <source></source> 的条件匹配，一个都匹配不上就直接走 <img src>。
-
media值写错：比如media="max-width: 768px"（缺括号）或media="768px"（非媒体查询语句），浏览器直接忽略该<source></source> -
srcset单独出现但没配media或type：该<source></source>不参与选择，等于白写 -
<img>缺src：页面图片区域留空，不是报错，是静默失败 - Network 面板看到
blocked:mime-type：说明服务器返回的Content-Type和你写的type="image/webp"不一致（比如返回text/plain）
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应该指向一个中等清晰度、体积适中的版本（比如800wJPEG），既不至于在小屏浪费带宽，也不至于在桌面端糊成一片 -
alt必须存在且有意义，否则可访问性失败 - 即使你只打算支持现代浏览器，也别省略
src——缓存失效、CDN 配置错误、MIME 类型错位时，它就是最后一道防线
调试时优先看 Network 面板里的实际请求头
别信“我写了 2x 就一定加载 2x 图”。打开 DevTools → Network → 刷新，点开图片请求，检查 Request Headers：
- 有没有
Sec-CH-DPR？没有说明浏览器根本没启用 DPR 感知逻辑（可能是禁用了 UA client hints，或页面没声明<meta name="viewport">） - 响应头
Content-Type是否和type属性完全一致？大小写、空格、分号都不能差 - 加载的是哪条
<source></source>？右键图片 → “Copy → Copy element”，看实际渲染用的是哪个路径
src 的兜底强度、以及服务器返回的 MIME 类型是否与前端声明严丝合缝——这三个地方出错，连 window.devicePixelRatio 是多少都不重要了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
