跨浏览器 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>

如果在 CSS 中使用图像：

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

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