how can I show webp image format in HTML

问题:

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 browser can show this image format except chrome? sample image

回答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>

回答2:

What if it doesn't find the image for the specified path, how can I show a no picture image in that case, something similar to this:

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