必须用 <picture> + 显式 <source type> + <img> 兜底，三者缺一不可；因浏览器按序匹配 <source>，仅当无匹配时才回退到 <img>，且 <img> 需非自闭合、带 src 和 alt，type 必须与服务端 Content-Type 精确匹配。
直接写 <img src="x.webp"> 会留白，必须用 <picture> + 显式 <source type> + <img> 兜底，三者缺一不可。
为什么不能只写一个 <source>
浏览器按顺序匹配 <source>，遇到第一个 type 支持且资源可解码的就加载并停止。如果只写一个 <source type="image/webp">，旧 Safari 或 IE 就完全跳过，也不查后面的 <img>——因为 <picture> 里没有匹配项时，<img> 才是最终 fallback；但若你漏了 <img>，或把它写成自闭合标签（<img />），整个结构就空白。
必须确保：
-
<source>按格式先进到兼容排序：image/avif→image/webp→ （不写 JPEG 的<source>） -
<img>必须存在、非自闭合、带src和alt -
<img src>必须是静态可直访的.jpg或.png，不能含查询参数（如?format=webp）
type 属性写错一个字符就失效
type 不是提示，是硬性开关。浏览器只认标准 MIME 类型字符串，且必须和服务端返回的 Content-Type 响应头完全一致。
立即学习“前端免费学习笔记（深入）”；
常见错误：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
type="webp"❌（缺image/）→ Safari 静默跳过 -
type="image/jpg"❌（正确是image/jpeg）→ Chrome 可能侥幸，Safari 一定不认 -
type="image/webp"✅，但服务器返回Content-Type: application/octet-stream→ 同样跳过
验证方式：DevTools → Network → 点开那个 AVIF/WebP 请求 → 查 Response Headers 里的 Content-Type 是否精确匹配。
最简可用的降级模板（AVIF → WebP → JPG）
以下代码已通过 Chrome 120+、Firefox 120+、Safari 16.4+、iOS 14+、Android WebView 测试，首屏关键图建议加 fetchpriority="high" 在 <img> 上：
<picture> <source srcset="logo.avif" type="image/avif"> <source srcset="logo.webp" type="image/webp"> <img src="logo.jpg" alt="公司Logo" fetchpriority="high"> </picture>
注意：
- 所有图片宽高、构图、裁剪比例必须一致，否则切换时视觉跳变
-
srcset这里没写多尺寸，是因为单图场景下只需格式降级；如需响应式尺寸，请配合sizes使用，且每个srcset必须含w描述符（如"logo-400w.avif 400w, logo-800w.avif 800w"） - 本地双击打开 HTML 时，路径建议统一用
./logo.jpg，避免相对路径解析失败
开发阶段怎么确认降级真起了作用
别只看页面有没有图——要看 Network 面板里实际加载的是哪个 URL，以及它的 Content-Length 和 Content-Type。
实操建议：
- 开启 DevTools 的
Disable cache，勾选Large rows，方便看清每张图的完整请求地址 - 用设备模拟器切换 DPR（如 iPhone 12 是 3x），观察是否加载了对应
srcset中的资源 - 手动把
logo.avif文件删掉，刷新后应看到 Network 中加载的是logo.webp；再删logo.webp，应加载logo.jpg—— 这才是链路完整
最容易被忽略的是服务器配置：Nginx 要加 types { image/avif avif; image/webp webp; }，CDN 要透传 Accept 请求头，否则后端根本收不到 Accept: image/avif,image/webp，也就无法返回对应格式。
