HTML Picture标签如何结合source标签提供多种图片格式降级

Picture标签本身不提供降级，真正起作用的是内部source顺序、type判断及最后img兜底；浏览器按source从上到下逐个检查，必须同时满足media（若存在）和type（浏览器支持该MIME类型）才加载，否则回退至img的src。

Picture 标签本身不提供降级，真正起作用的是内部 source 的顺序 + type 判断 + 最后那个 img 兜底。浏览器不会“尝试所有格式”，而是按 source 从上到下逐个检查：必须同时满足 media（如果写了）和 type（浏览器支持该 MIME 类型），才选中并加载；一旦选中，就停止往下看。没一个匹配，才用

的 src。

格式降级必须按浏览器支持度排序

现代项目主流是 WebP → AVIF → JPEG/PNG。但顺序不能只看“新不新”，得看实际覆盖范围：

1. WebP 放第一位：Chrome、Edge、Firefox 全支持，Safari 14+ 开始支持，覆盖绝大多数用户
2. AVIF 放第二位：Chrome 85+、Firefox 93+、Safari 16.4+ 支持，但 Safari 16.4 之前完全不认，所以不能放 WebP 前面
3. 的 src 必须是 JPEG 或 PNG：这是兜底，所有浏览器都认，且必须可访问、带 alt

type 属性必须写准，不能省略或写宽泛

浏览器靠 type 决定“跳过还是加载”，不是靠文件后缀。写错等于白写：

1. 正确写法：type="image/webp"、type="image/avif"
2. 错误写法：type="webp"（缺 image/ 前缀）、type="image/jpg"（标准是 jpeg）、type="image/png"（虽然能识别，但 不需要 type，只用于 source）
3. 别写 type="image/*" 或空着——浏览器无法判断，可能发请求再失败，浪费带宽

结构必须完整，img 是刚需不是可选

哪怕你写了十个 source，只要没

，整个 picture 就渲染为空白，且无障碍阅读器读不到替代文本：

1. 必须在 picture 最后，且带 src 和 alt
2. 的 src 不要用 JavaScript 动态填，必须是静态可访问路径
3. 不要以为 “我全用了 WebP，不用 fallback”，旧版 Safari、部分国产 WebView 仍大量存在

服务端响应头要对得上 type

浏览器看到 type="image/webp"，就会期望服务器返回 Content-Type: image/webp。如果返回 text/plain 或 application/octet-stream，这个 source 就被静默忽略——DevTools 里看不到报错，只少加载一张图：

1. 用 curl -I 检查真实响应头：curl -I https://site.com/photo.webp
2. 确保 Web 服务器（Nginx/Apache）配置了 .webp 和 .avif 的 MIME 类型映射
3. CDN 缓存时注意是否剥离或改写了 Content-Type