Picture标签本身不提供降级，真正起作用的是内部source顺序、type判断及最后img兜底；浏览器按source从上到下逐个检查，必须同时满足media（若存在）和type（浏览器支持该MIME类型）才加载，否则回退至img的src。
Picture 标签本身不提供降级，真正起作用的是内部 source 的顺序 + type 判断 + 最后那个 img 兜底。浏览器不会“尝试所有格式”，而是按 source 从上到下逐个检查：必须同时满足 media（如果写了）和 type（浏览器支持该 MIME 类型），才选中并加载；一旦选中，就停止往下看。没一个匹配，才用 的 src。
格式降级必须按浏览器支持度排序
现代项目主流是 WebP → AVIF → JPEG/PNG。但顺序不能只看“新不新”，得看实际覆盖范围：
- WebP 放第一位：Chrome、Edge、Firefox 全支持，Safari 14+ 开始支持，覆盖绝大多数用户
- AVIF 放第二位：Chrome 85+、Firefox 93+、Safari 16.4+ 支持，但 Safari 16.4 之前完全不认，所以不能放 WebP 前面
-
的 src 必须是 JPEG 或 PNG：这是兜底，所有浏览器都认，且必须可访问、带 alt
type 属性必须写准，不能省略或写宽泛
浏览器靠 type 决定“跳过还是加载”，不是靠文件后缀。写错等于白写：
- 正确写法：
type="image/webp"、type="image/avif" - 错误写法：
type="webp"（缺 image/ 前缀）、type="image/jpg"（标准是 jpeg）、type="image/png"（虽然能识别，但不需要 type，只用于 source）
- 别写
type="image/*"或空着——浏览器无法判断，可能发请求再失败，浪费带宽
结构必须完整，img 是刚需不是可选
哪怕你写了十个 source，只要没 ，整个 picture 就渲染为空白，且无障碍阅读器读不到替代文本：
立即学习“前端免费学习笔记（深入）”；
-
必须在 picture 最后，且带 src 和 alt
-
的 src 不要用 JavaScript 动态填，必须是静态可访问路径
- 不要以为 “我全用了 WebP，不用 fallback”，旧版 Safari、部分国产 WebView 仍大量存在
服务端响应头要对得上 type
浏览器看到 type="image/webp"，就会期望服务器返回 Content-Type: image/webp。如果返回 text/plain 或 application/octet-stream，这个 source 就被静默忽略——DevTools 里看不到报错，只少加载一张图：
- 用 curl -I 检查真实响应头：
curl -I https://site.com/photo.webp - 确保 Web 服务器（Nginx/Apache）配置了 .webp 和 .avif 的 MIME 类型映射
- CDN 缓存时注意是否剥离或改写了 Content-Type
