WebP图片在不支持浏览器中显示空白需用显式降级，匹配失败后回退到，IE需polyfill或服务端UA判断。
WebP图片在不支持浏览器中直接显示空白怎么办
不支持 WebP 的旧浏览器（比如 IE、Safari 11 及更早版本）遇到 <img src="xxx.webp" alt="如何使用HTML实现WebP图片降级" > 会直接加载失败，显示破损图标或空白——这不是路径错，是格式被忽略。必须主动提供降级路径，不能依赖浏览器自动 fallback。
<picture></picture> 是唯一可靠方案，<img alt="如何使用HTML实现WebP图片降级" > 的 srcset 不行
srcset 只控制分辨率切换，不感知 MIME 类型；即使写 srcset="a.webp 1x, a.jpg 1x"，不支持 WebP 的浏览器仍会尝试加载 a.webp 并失败。必须用 <picture></picture> 配合 <source></source> 的 type 属性做显式格式协商：
<picture> <source srcset="photo.webp" type="image/webp"> <img src="photo.jpg" alt="描述"> </picture>
-
<source></source>按顺序匹配：浏览器跳过不支持的type，落到<img alt="如何使用HTML实现WebP图片降级" > - 所有现代浏览器（包括 Safari 14.1+）都支持该语法，IE 完全不支持
<picture></picture>，需额外处理 - 不要省略
<img alt="如何使用HTML实现WebP图片降级" >—— 它是降级兜底，也是无障碍和 SEO 必需节点
IE 兼容需要 polyfill 或服务端判断
IE 既不识别 type="image/webp"，也不执行 <source></source>，整个 <picture></picture> 块会被忽略，只显示空白。两种务实解法：
- 前端加 picturefill：轻量 polyfill，检测到不支持时自动读取
data-src或回退到<img alt="如何使用HTML实现WebP图片降级" >的src - 服务端 UA 判断：对已知不支持 WebP 的 UA（如
MSIE、Trident），直接输出<img src="photo.jpg" alt="如何使用HTML实现WebP图片降级" >，跳过<picture></picture>结构 - 注意：不要用 JS 动态插入
<source></source>再触发加载——多数浏览器不会重新解析已渲染的<picture></picture>
响应式 + WebP 降级要避免重复请求
如果同时做尺寸适配和格式降级，容易让浏览器下载多张图（比如先请求 WebP，失败后再请求 JPG）。正确写法是把所有逻辑收束到 <source></source> 中：
立即学习“前端免费学习笔记（深入）”；
<picture> <source media="(min-width: 768px)" srcset="photo-large.webp 1x, photo-large@2x.webp 2x" type="image/webp"> <source media="(min-width: 768px)" srcset="photo-large.jpg 1x, photo-large@2x.jpg 2x"> <source srcset="photo-small.webp" type="image/webp"> <img src="photo-small.jpg" alt="描述"> </picture>
- 每个
<source></source>独立匹配：先按media筛，再按type筛，最后才用srcset选分辨率 - 确保 JPG 版本的
srcset和 WebP 版本一一对应，否则高 DPR 设备可能加载低清 JPG - 构建时用工具（如
imagemin-webp）批量生成双格式，别手动维护两套路径
真正麻烦的是缓存策略和 CDN 对 Accept 请求头的支持程度——有些 CDN 默认不透传该头，导致服务端无法做内容协商式降级，这时候 <picture></picture> 反而是更可控的选择。
