Use WebP images with a fallback 2019-03-13

WebP is the new lossless image format from Google , and it seems to become the new favourite image format on the web. Unfortunately, not all browsers support it today.

Fortunately, HTML5 brings a possibility to use WebP images wit a fallback, using the picture tag.

An example:

Instead of using

<img src="image.webp" />

you can use

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

for a fallback image on non-supporting browsers.

The two images below demonstrate this behaviour: