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

Question

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

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

sample-webp-image.webp

- ttrasn

---

阅读此链接：https://developers.google.com/speed/webp/ - Rohan Kumar

我知道这很老，但是... - MiscellaneousUser

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>

- Sveta

---

谢谢，但我需要在Firefox浏览器中使用，并且我不想改变图像格式以进行显示。 - ttrasn

不过，你无能为力，因为火狐浏览器还不支持它。 - Sveta

如果 <img> 标签里已经有 JPG 格式的图片，你还需要另外一个 <source> 标签吗？ - Volper

@Volper 是的，你真的需要第二个 source，因为在某些版本的Safari上，它的支持不是很好。 - ElliotCui

Answer 2

如果未找到指定路径的图像，我该如何展示没有图片的情况，类似于这个样子：

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

- Gustavo

---

"onerror"已经被弃用（来源）。 - Sven