图片降级自动切换的核心是++，浏览器按顺序匹配并加载首个成功项，为强制兜底且必须存在、可用；漏写或404会导致白屏，须为最后一个子元素。
图片降级自动切换的核心是 <picture></picture> + <source></source> + <img>
浏览器会按 <source></source> 顺序尝试加载，遇到第一个匹配且能加载成功的就停，后续 <source></source> 被忽略；<img> 是强制兜底——无论前面是否匹配、是否加载失败，它都必须存在且会被渲染（哪怕只是占位）。这点常被误以为“只有前面全失败才用 <img>”，其实不是。
常见错误现象：<picture></picture> 里漏写 <img>，或写了但 src 指向 404，结果页面空白；又或者把 <img> 放在 <source></source> 前面，导致降级逻辑失效（HTML 规范要求 <img> 必须是 <picture></picture> 的最后一个子元素）。
-
<source></source>的media属性只在 CSS 媒体查询层面匹配，不校验资源是否存在 -
<source></source>的type属性只检查 MIME 类型声明，不验证服务器实际返回内容（比如你写type="image/webp"，但服务器返回了 JPEG，浏览器仍会尝试加载，然后解码失败报错） - 所有
<source></source>的srcset中的路径，必须真实可访问，否则会触发网络错误，但不会跳到下一个<source></source>—— 浏览器只管“匹配”，不管“能不能加载成功”
WebP 降级到 JPEG/PNG 必须靠 type + 服务器响应头配合
仅靠 <source type="image/webp" srcset="a.webp"></source> 不够。如果用户浏览器支持 WebP，但服务器对 .webp 请求返回了 Content-Type: image/jpeg（比如 Nginx 配置漏了），浏览器会解析失败，控制台报 Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING 或类似解码错误，且不会自动 fallback 到下一个 <source></source>。
实操建议：
- 用
curl -I https://example.com/a.webp检查响应头中Content-Type是否为image/webp - Nginx 需显式添加：
types { image/webp webp; }，并确保.webp文件后缀被识别 - 开发时可在本地起个 Python HTTP 服务快速验证：
python3 -m http.server 8000 --directory ./assets，再手动请求看响应头 - 不要依赖 JS 检测 WebP 支持来动态插入图片——这会阻塞渲染、增加 FOUC 风险，原生
<picture></picture>更可靠
srcset 和 sizes 在降级链中不是“备用”，而是“同一格式下的响应式选择”
很多人混淆 <source srcset="small.jpg 480w, medium.jpg 768w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"></source> 和降级的关系。这段代码只作用于该 <source></source> 匹配时的分辨率适配，跟“WebP → JPEG”这种格式降级无关。它不会因为 small.jpg 加载失败就去加载 medium.jpg，更不会跨 <source></source> 切换。
正确分层逻辑：
- 第一层：由
<source></source>的media或type决定“用哪一组资源” - 第二层：在选定的那组内，由
srcset+sizes+ 设备 DPR 决定“具体加载哪个 URL” - 第三层：最终加载失败（404、超时、MIME 错误）时，
<img>仍会渲染，但它的src必须可用，否则就是白屏
移动端 Safari 对 AVIF 支持差，type="image/avif" 降级需谨慎
Safari 16.4+ 才开始支持 AVIF，且仅限 macOS；iOS/iPadOS 直到 17.4 才部分支持，且默认禁用硬件解码，大图易卡顿甚至崩溃。如果你写了：<source type="image/avif" srcset="a.avif"><source type="image/webp" srcset="a.webp"><img src="a.jpg"></source></source>，在旧版 Safari 上，第一个 <source></source> 会被跳过（因不识别 type），直接进入第二个；但如果第二个也因 MIME 或路径问题失败，就会落到 <img>。
关键点：
- 不要假设
type属性能“探测”浏览器能力——它只是声明，不触发任何 JS 式的运行时检测 - AVIF 文件体积虽小，但编码复杂度高，CDN 缓存命中率低，首次加载延迟可能反超 WebP
- 生产环境若要用 AVIF，建议先用
Accept请求头做服务端协商（如 Cloudflare Rules 或 Nginx map），再配合<picture></picture>作为兜底，而非只靠前端声明
最易被忽略的是：降级不是“自动容错”，而是“声明式匹配 + 强制兜底”。所有 <source></source> 的路径都要真能访问，<img> 的 src 必须是 100% 可用的最后防线，否则一出错就是视觉断层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
