WEBP图像回退

Question

我在互联网上搜索了很多，但找不到合适的示例或完整的教程，可以全面地介绍。因此，请大家推荐一些好的示例。

我已经尝试在许多网站上使用WEBP代码，例如与现代化工具一起使用、检查浏览器支持或使用背景图片。

- Harden Rahul

---

css-tricks有一个很好的指南：https://css-tricks.com/using-webp-images/ - Honsa Stunna

@HonsaStunna 我尝试了所有的方法，但没有一个是完全专业的。 - Harden Rahul

Answer 1

你可以利用onerror事件处理程序并进行修复。

这是一个示例代码。

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

- Kolappan N

Answer 2

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

- Honsa Stunna

---

如果css是内联的（关键CSS），首先下载JPG图像，当DOM准备好时再下载WebP，不是吗？ - Jose Nobile

看起来是这样。我不使用这种方式，但为了性能、以上折叠或关键 CSS，我不建议以这种方式处理。他还描述了一种无需 JavaScript，您需要滚动到“这里发生的情况”http://www.stucox.com/blog/using-webp-with-modernizr/#fallback-without-javascript - Honsa Stunna

但这并没有帮助，JPG 文件仍然被请求。 - Honsa Stunna

Answer 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声明是不兼容浏览器的回退方案。每种格式的重要性由源顺序定义。如果在其浏览器中可用，则会加载第一个。

- Lu Chinke