Cross-browser Webp images support

Question

I have a problem. 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)?

Thanks

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>

---

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)