WEBP图像回退

Question

我在互联网上搜索了很多，但在网上找不到合适的例子或完整的教程。所以伙计们，请给我推荐一些好的例子。

我在很多网站或网站上尝试过WEBP代码，比如使用modernizer，检查浏览器支持，或者使用背景图像。

Answer 1

在stucox上有一篇文章，在那里你可以找到一些将webp图像与现代图像和备用图像一起使用的示例。这应该可以解决您的问题。

/* Result pending */
.js .container {
   background-image: none;
}
/* No JS / WebP not supported */
   .no-js .container,
   .js.no-webp .container {
   background-image: url('image.jpg');
}
/* WebP supported */
   .js.webp .container {
   background-image: url('image.webp');
}

http://www.stucox.com/blog/using-webp-with-modernizr/

Answer 2

您可以使用onerror事件处理程序并修复它。

下面是一个示例代码

<img src="image.webp" onerror="this.onerror=null; this.src='image.png'">

Answer 3

您应该使用图片html元素，如w3schools所述。

<picture>
  <source type="image/webp"  srcset="img_pink_flowers.webp">
  <source srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

最后一个img声明是不兼容浏览器的后备。源的顺序定义了每种格式的重要性。因此，如果第一个文件在浏览器中可用，将加载第一个文件。