不同浏览器上的Webp图像

Question

我有问题。在我的HTML页面中，有很多 Webp 图片，这些图片只能使用 Google Chrome 进行可视化。使用 Mozilla ， Explore 或 Safari 等其他浏览器时，我看不到它们。

有解决方案吗？也许无需更改每个图像的扩展名（因为它们很多）？

谢谢

Answer 1

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

下面的示例使用<picture>元素和img元素后备的<source>元素。浏览器将尝试从上到下在<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类名来定位不支持的浏览器并提供非webp格式：

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

This article有很好的信息可供您使用

---

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