<picture>标签本身不自动适配视网膜屏，必须在<img>上用srcset配1x/2x描述符且不设sizes，否则高DPR设备无法触发切换；若<source>的media写错、缺src或type不匹配，浏览器将静默回退至<img src>。

标签本身不自动适配视网膜屏，必须显式用 srcset 配 x 描述符，并确保 <img> 存在且带 src，否则所有高 DPR 设备都会静默 fallback 到那张图。

为什么写了 <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, 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。如果漏掉，整张图就空白。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 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”，看实际渲染用的是哪个路径

真正容易被忽略的是：断点互斥性、src 的兜底强度、以及服务器返回的 MIME 类型是否与前端声明严丝合缝——这三个地方出错，连 window.devicePixelRatio 是多少都不重要了。