直接写<img src="x.webp">会导致旧浏览器（如Safari≤13.1、IE、旧版Android WebView）显示空白，因其根本不识别image/webp MIME类型，既不加载也不报错；必须用<picture>+<source type="image/webp">显式声明并以JPEG/PNG格式的<img>作兜底，且<img src>须为静态可直访路径。
为什么直接写 <img src="x.webp"> 会出问题
因为 Safari 13.1 之前、IE、旧版 Android WebView 完全不识别 image/webp，遇到就当无效资源，不加载也不报错，页面留白。这不是“浏览器兼容性差”，而是格式未被声明支持，浏览器连解码器都不会调用。你写的 src 是一个 URL，但它的 MIME 类型不在浏览器白名单里，它就被静默丢弃了。
<picture> 中 <source> 的 type 值必须严格匹配标准 MIME 类型
写错一个字符就等于失效：type="webp"、type="image/webp"（正确）、type="image/jpg"（错误，应为 image/jpeg）、type="image/png"（正确）——只有完全一致，且服务器返回的 Content-Type 也一致，浏览器才会考虑加载它。
- AVIF 用
image/avif - WebP 用
image/webp - JPEG 必须用
image/jpeg，不是image/jpg或image/jpe - PNG 用
image/png
服务器若返回 Content-Type: image/webp，但 HTML 写成 type="webp"，Safari 会跳过；Chrome 可能侥幸加载，但不可靠。
<source> 顺序决定实际加载结果，不是“备选”，是“优先级队列”
浏览器从上到下逐条检查：<source> 满足两个条件才停：① type 声明的 MIME 类型被当前浏览器支持；② 对应资源能成功解码（即文件真实存在、格式合法、网络可访问）。满足即用，不再往下看。
立即学习“前端免费学习笔记（深入）”；
- 把
image/avif放最前：现代 Chrome/Firefox/Edge 能用上，旧 Safari 自动跳过 - 接着放
image/webp：覆盖 iOS 14+、Android 4.0+、几乎所有桌面浏览器 -
<img src="logo.jpg">是强制兜底，不是可选项——漏掉整个结构就空白 - 不要把 JPEG 写成第三个
<source>：它只是格式 fallback，不是响应式 fallback，放<img>的src里才起作用
<img> 的 src 必须是可直访的 JPEG/PNG，不能带查询参数
常见错误是让 <img src="logo.jpg?format=webp">，这在不支持 WebP 的浏览器里会触发 406 或返回损坏数据，导致图片不显示。它必须是一个静态、通用、无需协商的地址。
-
src地址要能单独在浏览器地址栏打开并显示正常图片 - 不要用 CDN 动态转码路径（如
?x-oss-process=image/format,avif）作为<img>的src -
alt属性不可省，否则无障碍和 SEO 都失败 - 所有格式图片的宽高、构图、裁剪比例必须一致，否则切换时视觉跳变
真正容易被忽略的不是怎么写 <source>，而是服务器是否透传 Accept 请求头、CDN 是否按 Accept 返回对应格式、以及 <img> 的 src 是否真的能独立存活。链路断一环，降级就静默失效。
