直接写<img src="x.webp">在Safari≤13.1、IE、旧版Android WebView中会留白，因浏览器完全不识别image/webp MIME类型，既不加载也不报错；必须用<picture>+<source type="image/webp">显式声明，并以静态可直访的JPEG/PNG <img>作强制兜底。
直接写 <img src="x.webp"> 在 Safari 13.1 之前、IE、旧版 Android WebView 中会留白，不是“加载慢”，是根本没发起请求——浏览器压根不认 image/webp 这个 MIME 类型。
用 <picture> + <source type="image/webp"> 是唯一可靠路径
浏览器只按 <source> 的 type 值是否匹配自身支持的 MIME 类型来决定加载哪条，不是“选一个试试”。顺序即优先级：
-
type必须严格写成image/webp（不是webp或image/jpg） - 服务器返回的
Content-Type也必须是image/webp，否则 Safari 直接跳过 - AVIF 写
image/avif，JPEG 必须写image/jpeg（image/jpg无效） -
<img src="fallback.jpg">是强制兜底，不是可选项；漏掉整个结构就空白
<img> 的 src 必须是静态、可直访的 JPEG/PNG 地址
常见错误是把 CDN 动态转码路径当兜底：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- ❌
src="logo.jpg?x-oss-process=image/format,webp"—— 不支持 WebP 的浏览器会发这个带参数的请求，可能返回 406 或损坏数据 - ✅
src="logo.jpg"—— 必须能单独粘贴到地址栏里打开并显示正常图片 - 路径要区分大小写（
IMG.JPG≠img.jpg），本地开发建议统一用./logo.jpg -
alt属性不可省，否则无障碍和 SEO 全挂
onerror 只对内联写法稳定生效，且必须防死循环
动态绑定 img.onerror = handler 在旧 Safari 和 Edge 中常不触发，真正跨浏览器可靠的只有 HTML 内联写法：
立即学习“前端免费学习笔记（深入）”；
- ✅
<img src="a.svg" onerror="this.src='a.png'; this.onerror=null"> - ⚠️
onerror="this.src='a.png'"是危险写法：如果a.png也 404，会无限重试 - 更稳妥可加路径判别：
onerror="if (!this.src.includes('fallback')) this.src='fallback.png'; this.onerror=null" -
onerror不响应空src、CORS 阻塞、200 返回占位图等场景——它只管“请求发出后失败”
最易被忽略的一点：所有 fallback 图片（SVG 的 PNG、WebP 的 JPG、AVIF 的 WebP）必须宽高一致、构图一致。否则格式切换时页面会视觉跳变，用户感知就是“闪一下”，而不是“平滑降级”。
