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

Question

I know this is a new format for images, but I don't know how to show it in HTML.

Does anyone know how I can do that? Which browsers can show this image format besides chrome?

sample-webp-image.webp

Answer 1

You use webp like any image:

<img src="img.webp" />

However since it's not always supported (see http://caniuse.com/#feat=webp ), you can use this to set a fallback:

<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';"/>