如何在HTML中使用webp图片格式

Question

我知道这是一种新的图像格式，但我不知道如何在 HTML 中显示它。

有谁知道我该怎么做？除了chrome之外还有哪些浏览器可以显示这种图片格式？

Answer 1

您像使用任何图像一样使用 webp：

<img src="img.webp" />

然而，由于它并不总是受支持（参见 http://caniuse.com/#feat=webp），您可以使用它来设置后备：

<picture>
  <source srcset="img.webp" type="image/webp">
  <source srcset="img.jpg" type="image/jpeg"> 
  <img src="img.jpg">
</picture>

Answer 2

如果找不到指定路径的图片怎么办，在这种情况下如何显示无图片图片，类似这样：

<img src="img.jpg" onerror="this.src = 'nopicture.gif';"/>

How to use webp image format in HTML