Cross-browser Webp images support

Question

In my HTML pages, I have a lot of Webp images that I can visualize only using Google Chrome. With other browsers like Mozilla, Explore, and Safari I can't see them.

Is there a solution? Maybe without change every image's extension (cause they are a lot)?

Veach

Related - Detecting WebP support – Boatbill

Answer 1

You need to fallback to a supported image format.

Below's example is using the <picture> element and the <source> elements with an img element fallback. The browser will try loading the assets inside the <picture> element from top to bottom until all the "conditions were satisfied" (optional sizes attribute and complex srcset which aren't in the below code) and the content format is supported.

<picture>
    <source srcset='image.webp' type='image/webp'>
    <source srcset='image.jpg' type="image/jpeg'> 
    <img src="image.jpg" alt="">
</picture>

When using the <source> element, setting the type attribute is not required as browsers should be able to infer the type from the file's extension.

The above verbose code can be reduced to a single <img> element with an srcset attribute:

<img src='image.webp' srcset='image.webp, image.jpg'>

---

If the images are used in CSS:

You can use Modernizr's .no-webp class name to target non-support browsers and serve a non-webp format instead:

.no-webp .elementWithBackgroundImage {
  background-image: url("image.jpg");
}

This article has good information you can use

---

Detecting browser WEBP support - A guide by Google (creator of WEBP)

Boatbill

@MarcoP - well, you need 2 formats for sure. You can also use 3rd party image hosting service such as Cloudinary, which can auto-detect browser support and serve the right format to the user – Boatbill

Ok thank you very much, it will be a long work for me ahah – Veach