HTML响应式设计中通过Picture标签实现视网膜屏图像自动适配

为什么写了 <picture> 却始终加载同一张图

这是最常被忽略的“失效”现象。浏览器不会主动猜测你是否想适配 2x 屏——它只严格按 <source> 的条件匹配，一个都匹配不上就直接走 <img src>。

• media 值写错：比如 media="max-width: 768px"（缺括号）或 media="768px"（非媒体查询语句），浏览器直接忽略该 <source>
• srcset 单独出现但没配 media 或 type：该 <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, [email protected] 2x, [email protected] 3x"
• 必须把最高倍率图放最后：浏览器从左到右匹配，遇到第一个满足 DPR 的就停；如果 3x 放前面，2x 设备永远选不到 2x 图
• 不要混用：photo-400w.jpg 400w, [email protected] 2x 是未定义行为，Chrome 可能整个 srcset 忽略

<img> 的 src 不是可选项，而是强制兜底

老浏览器（如 IE、旧版 Safari）和部分低版本 Android WebView 完全不解析 srcset，只看 src。如果漏掉，整张图就空白。

• src 应该指向一个中等清晰度、体积适中的版本（比如 800w JPEG），既不至于在小屏浪费带宽，也不至于在桌面端糊成一片
• 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>？右键图片 → “Copy → Copy element”，看实际渲染用的是哪个路径