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?

Read this https://developers.google.com/speed/webp/ – Rohan Kumar Jul 05 '17 at 06:28 — Rohan Kumar, Jul 05 '17 at 06:28
I know its old but... https://caniuse.com/webp – MiscellaneousUser Feb 03 '22 at 20:27 — MiscellaneousUser, Feb 03 '22 at 20:27

score 45 · Accepted Answer · answered Jul 05 '17 at 06:52

45

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>

answered Jul 05 '17 at 06:52

Sveta

Thanks, but I need to use in Firefox browser and I want to dont change image format for display – ttrasn Jul 05 '17 at 07:13
There's not much you can do thought, firefox just doesn't support it yet. – Sveta Jul 05 '17 at 07:32
8

Do you need the other `` if the jpg one is already in the ``? – Volper Dec 31 '19 at 12:55
@Volper Yes, you really need the second `source`, 'cause on some version of safari, it is not supported well. – ElliotCui Jul 08 '20 at 08:44

score 4 · Answer 2 · answered Mar 21 '19 at 13:08

4

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

answered Mar 21 '19 at 13:08

Gustavo

2

`onerror` is deprecated ([source](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#browser_compatibility)). – Sven May 24 '21 at 15:30

2 Answers2