Skip to main content
Topic: Using WebP Images with Fallback (Read 263 times) previous topic - next topic

Using WebP Images with Fallback

You are not allowed to view links. Register or Login

File sizes for WebP images are typically smaller than their JPEG and PNG counterparts. If your application involves showing a lot of images then probably it makes sense to add WebP support.

Considering the WebP format is created by Google, and Google's Chrome browser has about a 60-65% market share, a lot of your users can be benefited if your application starts serving WebP images.
Detecting WebP Support with <picture> Tag

There are ways to detect WebP images using Javascript and server-side techniques (htaccess for example), but the most robust solution is to use <picture> tag for your images in the webpage. The <picture> tag has been created for these special cases, so it is best to use this to provide the best browser support.

The type tag attribute in a <source> tag specifies a file type for the source image.

Code: You are not allowed to view links. Register or Login
<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg">
</picture>

In the above markup :

    Browsers supporting WebP (Chrome, Opera & Edge) will display "image.webp" <source> element
    Browsers not supporting Webp (Firefox & Safari) will fallback to "image.jpg" <source> element
    Browsers not supporting the <picture> tag (Internet Explorer) will fallback to the <img> tag