WEBP 图像回退答案

【问题标题】：WEBP image fall backWEBP 图像回退
【发布时间】：2018-05-16 08:58:53
【问题描述】：

我在互联网上搜索了很多，在网上找不到正确的示例或完整的教程，可以完整教授。所以请大家给我推荐一些好的例子。

我已经在地段或网站上尝试过 WEBP 代码，例如使用现代化工具、检查浏览器支持或使用背景图像。

【问题讨论】：

css-tricks 有很好的指导：css-tricks.com/using-webp-images
@HonsaStunna 我尝试了所有方法，但没有一个是完整的教授

【解决方案1】：

有一篇关于 stucox 的文章，您可以在其中找到一些使用带有modernizr 和后备图像的 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/

【讨论】：

如果 css 在行（关键 css），首先下载 jpg 图像，当 dom 准备好 webp 时，不是吗？
似乎如此。我不使用这种方法，但为了性能，在折叠或关键 css 之上，我不建议这样做。他还描述了一种没有 javascript 的方法，您必须滚动到“这是发生了什么”stucox.com/blog/using-webp-with-modernizr/…
但这无济于事，无论如何都需要jpg。

【解决方案2】：

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

这是一个示例代码

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

【讨论】：

【解决方案3】：

您应该使用 picture 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 声明是不兼容浏览器的后备。来源的顺序定义了每种格式的重要性。因此，如果第一个在其浏览器中可用，将加载第一个。

【讨论】：