跨浏览器 Webp 图片支持

Cross-browser Webp images support

我有问题。在我的 HTML 页面中，我有很多 Webp 图像，我只能使用 Google Chrome.使用 Mozilla、Explore 和 Safari 等其他浏览器时，我看不到它们。

有解决办法吗？也许不改变每张图片的扩展名（因为它们很多）？

谢谢

您需要回退到受支持的图像格式。

下面的示例使用 <picture> element and the <source> 元素和 img 元素回退。浏览器将尝试从上到下加载 <picture> 元素内的资产，直到所有“条件都满足”（可选的 sizes 属性和复杂的 srcset 不在下面的代码中) 并且支持内容格式。

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg"> 
  <img src="image.jpg" alt="">
</picture>

如果图片在CSS中使用：

您可以使用 Modernizr's .no-webp class 名称来定位不支持的浏览器并提供非 webp 格式：

.no-webp .elementWithBackgroundImage {
  background-image: url("image.jpg");
}

This article 有很好的信息可以使用

Detecting browser WEBP support - Google（WEBP 的创建者）

的指南