8

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

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Marco P
  • 115
  • 1
  • 7

1 Answers1

15

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)

vsync
  • 118,978
  • 58
  • 307
  • 400
  • @MarcoP - well, you need 2 formats for sure. You can also use 3rd party image hosting service such as [Cloudinary](https://cloudinary.com/blog/quick_guide_using_webp_on_your_website_or_native_apps), which can auto-detect browser support and serve the right format to the user – vsync Nov 08 '18 at 11:34
  • Ok thank you very much, it will be a long work for me ahah – Marco P Nov 08 '18 at 11:36