图片格式自动降级依赖HTML原生机制：按顺序匹配标准MIME类型，Content-Type响应头须严格一致，AVIF/WebP/JPEG依次降级，为强制兜底且src须为旧格式。
图片格式自动降级不是靠 JavaScript 检测后换 src，而是靠 HTML 原生机制——。浏览器按顺序匹配支持的 type 并加载对应资源，不依赖 JS，不触发重排，零延迟。
type 属性必须写对标准 MIME 类型
浏览器只认标准 type 值，不看文件后缀，也不做内容嗅探。写错等于主动屏蔽该 source。
- ✅ 正确：
type="image/avif"、type="image/webp"、type="image/jpeg" - ❌ 错误：
type="avif"、type="image/jpg"（JPG 应为image/jpeg）、type="webp"
同时，服务器返回该资源时，HTTP 响应头 Content-Type 必须与 type 值完全一致。Safari 等浏览器发现不匹配会静默跳过，不报错也不降级。
source 顺序决定实际加载优先级
浏览器从上到下逐条检查，遇到第一个 type 被支持 且 图片能成功解码，就立即使用它，停止后续匹配。
- 推荐顺序：
<source srcset="a.avif" type="image/avif"></source>→<source srcset="a.webp" type="image/webp"></source>→<source srcset="a.jpg" type="image/jpeg"></source> - AVIF 放最前：Chrome/Firefox/Edge 120+ 已稳定支持，但 Safari 16.4 之前不支持，需 fallback
- WebP 放中间：覆盖 iOS 14+ Safari、Android WebView 及所有现代桌面浏览器
- JPEG 放最后一个 source：作为格式层面的最后一道防线
img 标签是不可省略的强制兜底
<picture></picture> 本身不渲染也不请求资源，真正触发加载的是匹配成功的 <source></source> 或最终的 <img alt="图片格式优化怎么根据浏览器支持自动降级" >。
-
<img alt="图片格式优化怎么根据浏览器支持自动降级" >必须带src和alt，否则语义缺失、无障碍失败、SEO 受损 -
src必须指向旧格式（如.jpg或.png），不能是 WebP 或 AVIF，否则旧浏览器仍空白 - 漏掉
<img alt="图片格式优化怎么根据浏览器支持自动降级" >，整个结构失效——哪怕写了三个<source></source>，浏览器一个都不认时页面就是空白
避开静默失败的常见链路断点
很多“降级没生效”不是代码写错，而是环境没对齐：
- CDN 或图床未配置
Content-Type，导致 AVIF/WebP 返回text/plain或application/octet-stream - 本地开发用 file:// 协议打开 HTML，部分浏览器拒绝加载非同源或无 Content-Type 的资源
- 服务端未透传 Accept 头（如
Accept: image/avif,image/webp,*/*），影响 Service Worker 动态响应逻辑（如有）
实机测试比模拟器更可靠，尤其关注 iOS Safari、微信内置 WebView、旧版 Android 浏览器的实际表现。
