CODEWITHSUNDEEP
htmlimagewebp
Marco P
Marco P

Reputation: 123

Cross-browser Webp images support

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)?

Upvotes: 8

Views: 5874

Answers (1)

vsync
vsync

Reputation: 130065

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)

Upvotes: 16

Related Questions