唯一零JS、SEO友好、原生支持WebP/AVIF降级的方案失效主因是type与Content-Type不匹配、source顺序错误或缺失img src兜底；必须确保MIME一致、AVIF/WebP/JPEG按序排列、img src强制存在且路径有效。

是唯一零 JS、不发额外请求、SEO 友好、原生支持的 WebP/AVIF 降级方案；失效主因不是浏览器不支持，而是 type 与服务器返回的 Content-Type 不匹配、 顺序错误、或缺失必需的 兜底。

为什么写了 type="image/webp" 却还是加载 JPEG

浏览器只认标准 MIME 字符串，且必须和响应头 Content-Type 完全一致。常见断点：

• 服务器返回 Content-Type: text/plain 或空 → 浏览器静默跳过该
• Nginx 未配置 types { image/webp webp; } → .webp 被当成 application/octet-stream
• CDN 没透传 Accept: image/webp 请求头 → 后端无法判断能力，统一返回 JPEG

的顺序为什么不能调换

浏览器从上到下逐个尝试 ，遇到第一个 type 可解码且 media 条件满足的就加载并停止。这不是建议，是执行逻辑本身：

• image/avif 必须放最前：
• image/webp 居中：
• JPEG/PNG 回退必须放在 的 src 属性里，不能写成第三个
• 把 放在 WebP 前面，哪怕设备支持 WebP，也永远加载不到

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

本身不加载图片，真正触发加载的是内部匹配成功的 或必需的 。没有 ，就不会渲染任何内容，也不会发请求：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 不是“备用 source”，而是所有不支持 type 的老浏览器（如 IE、旧 Android WebView）唯一能识别的入口
• 不能是带查询参数的动态地址（如 ?format=webp），也不能是 404 路径；否则整个 会退化为仅显示 alt 文本
• 首屏关键图应在 上加 fetchpriority="high"，提升 LCP；加在 上无效

路径写错导致降级失效的常见坑

所有格式图片必须尺寸一致、构图一致，否则响应式切换时会出现拉伸或视觉跳变；但更基础的问题是：路径一错，连兜底都进不去：

• 本地双击打开 HTML 时，src="logo.png" 可能失败，而 src="./logo.png" 更可靠
• 路径中所有斜杠必须是正斜杠 /，Windows 显示反斜杠 \，但 HTML 里一律不用
• ../images/logo.jpg 表示上一级目录里的 images 文件夹，注意 .. 后必须跟 /，写成 ..images/logo.jpg 就错
• 绝对路径如 file:///C:/project/logo.jpg 理论可行，但跨设备即失效，开发阶段禁用
• 最容易被忽略的是：所有格式的图片 URL 必须真实可访问，且服务端返回的 Content-Type 必须正确（截至 2026 年 10 月 10 日）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！