How to use webp image format in HTML

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

Newsom

Read this developers.google.com/speed/webp – Dragline

I know its old but... caniuse.com/webp – Schoolbag

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>

Silversmith

Thanks, but I need to use in Firefox browser and I want to dont change image format for display – Newsom

There's not much you can do thought, firefox just doesn't support it yet. – Silversmith

Do you need the other <source> if the jpg one is already in the <img>? – Dapsang

@Dapsang Yes, you really need the second source, 'cause on some version of safari, it is not supported well. – Brazzaville

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

Wolpert

onerror is deprecated (source). – Kiangsu