AVIF优先、WebP次之、JPEG/PNG兜底，浏览器按顺序加载首个支持且可解码的格式。AVIF兼容Chrome/Firefox/Edge 120+，WebP覆盖iOS 14+及主流桌面浏览器，JPEG/PNG作最终备选。
格式顺序必须从先进到兼容
浏览器只认第一个既支持 type 又能成功加载的
- AVIF 放第一：Chrome 120+、Firefox 120+、Edge 120+ 原生支持；旧 Safari 和部分 Android WebView 不认，会直接跳过
- WebP 放第二：覆盖 iOS 14+ Safari、Android 4.0+、所有主流桌面浏览器
-
JPEG 或 PNG 放在最后一个
或直接交给 ：作为格式层面的兜底，不是必须写进，但
type 属性必须写对、写全
type 不是可有可无的标识，它是浏览器判断“支不支持”的唯一依据。写错一个字符，整条
- ✅ 正确写法：
type="image/avif"、type="image/webp"、type="image/jpeg"（注意不是 image/jpg）、type="image/png" - ❌ 错误写法：
type="webp"、type="image/jpg"、type="avif" - 服务器返回的 Content-Type 也必须和 type 完全一致，否则 Chrome 可能侥幸加载，Safari 一定跳过
img 标签是强制存在的最终兜底
。漏掉
，整个结构就空白：
-
必须带 src 和 alt，不能自闭合（不能写成
<img />） -
必须指向一个真实可访问的 JPEG 或 PNG 文件，不能带查询参数（如
logo.jpg?format=webp），否则旧浏览器可能触发 406 或加载损坏数据 - 不要把 WebP 或 AVIF 地址塞进
，它起不到降级作用，只会让不支持的浏览器显示空白
常见静默失败原因
很多“降级没生效”不是代码错了，而是链路断了：
立即学习“前端免费学习笔记（深入）”；
- CDN 或 Nginx 没透传 Accept 请求头 → 后端无法根据
Accept: image/avif,image/webp返回对应格式 - 写了
type="image/avif"，但服务器返回的是 JPEG 文件，Content-Type 却没改成image/jpeg→ 浏览器校验失败，跳过 顺序反了，比如 WebP 写在 AVIF 前面 → 现代浏览器永远用不上 AVIF
