跨浏览器Webp图像支持

Question

我有一个问题。在我的 HTML 页面中，我有很多 Webp 图像，只能使用 Google Chrome 才能可视化。使用其他浏览器，如 Mozilla、Explore 和 Safari，我看不到它们。

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

谢谢

Answer 1

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

下面的示例使用

<picture>

元素和

<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>

使用

<source>

元素时，不需要设置

type

属性，因为浏览器应该能够从文件扩展名推断类型。

上面的冗长代码可以简化为具有

<img>

属性的单个

srcset

元素：

<img src='image.webp' srcset='image.webp, image.jpg'>

---

如果在 CSS 中使用图像：

您可以使用 Modernizr 的

.no-webp

类名来定位不支持的浏览器并提供非 webp 格式：

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

这篇文章有很好的信息你可以使用

---

检测浏览器 WEBP 支持 - Google（WEBP 创建者）的指南