Images

WebP and AVIF, the challengers of JPG

Are you still using JPG for your website images? It might be time to switch to the new challengers - WebP and AVIF! Both formats can produce smaller file sizes without loss of quality. However, they lack support from many browsers and applications. Check out the guide to learn more.

Article about WebP and AVIF and how they challenge JPG

The most common image formats are JPG and PNG. WebP is on the rise, a format strongly recommended by Google. The WebP (weppie) format is good at further compressing photos.

AVIF, is much newer and actually a derivative of video formats. AVIF also produces much smaller files without noticeable loss of quality.

In short, both WebP and AVIF are initiatives to replace the outdated JPG. However, it turns out that old and well-supported formats are not so easily supplanted. This is mainly due to the lack of support for these images by the main browsers. For example, Safari did not support WebP for a long time, but that is changing.

There is currently very limited support for AVIF, but you can view with Chrome for Desktop. In addition to browsers, applications for building and maintaining websites will also have to support these formats, and that is certainly not the case yet.

Check browser support for WebP and AVIF

Here is a simple HTML page that's checks to see if your browser supports WebP and /or AVIF.

WebP

The first image on the test page should be WebP. If your browser does not support it, it will say JPG on the image.

The image is 768 by 1008 pixels in size. In JPG the image weighs 333 KB and in WebP 171 KB. A saving of almost 50%.

The HTML code used here is standard HTML5. The code checks whether a certain format is supported and otherwise falls back to something familiar:

<picture>
  <source srcset="Amsterdam-WebP.webp" type="image/webp">
  <source srcset="Amsterdam-JPG.jpg" type="image/jpeg"> 
  <img src="Amsterdam-JPG.jpg" alt="Amsterdam">
</picture>

HTML5 code to check for WebP support. When not available it will fall back to JPG.

AVIF

And the same test for the much newer AVIF format. The AVIF image is an additional 12% lighter than the WebP.

JPG

If your browser supports both WebP and AVIF (like the latest version of Chrome) you can see the JPG here to compare the quality:

Photo by Robert Hoeijmakers — *Photo by* *Rob Hoeijmakers*

Support for AVIF in applications

The browsers are a good representation of how far the acceptance of a new file is. But also the applications that work with images. I did a test with Squarespace, the online web builder, and with Pinterest and both don’t even support WebP, let alone AVIF at the moment.