如何使用HTML实现WebP图片降级-html教程-PHP中文网

WebP图片在不支持浏览器中显示空白需用显式降级，匹配失败后回退到，IE需polyfill或服务端UA判断。

如何使用html实现webp图片降级

WebP图片在不支持浏览器中直接显示空白怎么办

不支持 WebP 的旧浏览器（比如 IE、Safari 11 及更早版本）遇到会直接加载失败，显示破损图标或空白——这不是路径错，是格式被忽略。必须主动提供降级路径，不能依赖浏览器自动 fallback。

是唯一可靠方案，的 `srcset` 不行

srcset 只控制分辨率切换，不感知 MIME 类型；即使写 srcset="a.webp 1x, a.jpg 1x"，不支持 WebP 的浏览器仍会尝试加载 a.webp 并失败。必须用配合的 type 属性做显式格式协商：

<picture><source srcset="photo.webp" type="image/webp">
  @@##@@
</source></picture>

按顺序匹配：浏览器跳过不支持的 type，落到
所有现代浏览器（包括 Safari 14.1+）都支持该语法，IE 完全不支持，需额外处理
不要省略 —— 它是降级兜底，也是无障碍和 SEO 必需节点

IE 兼容需要 polyfill 或服务端判断

IE 既不识别 type="image/webp"，也不执行，整个块会被忽略，只显示空白。两种务实解法：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

前端加 picturefill：轻量 polyfill，检测到不支持时自动读取 data-src 或回退到的 src
服务端 UA 判断：对已知不支持 WebP 的 UA（如 MSIE、Trident），直接输出，跳过结构
注意：不要用 JS 动态插入再触发加载——多数浏览器不会重新解析已渲染的

响应式 + WebP 降级要避免重复请求

如果同时做尺寸适配和格式降级，容易让浏览器下载多张图（比如先请求 WebP，失败后再请求 JPG）。正确写法是把所有逻辑收束到中：

<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">
  @@##@@
</source></source></source></picture>