WebP and AVIF, the challengers of JPG

Online check to see if your browser supports WebP and AVIF. Concise guide on the new image formats.

WebP and AVIF, the challengers of JPG
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:

Does my browser support WebP and/or AVIF?
A quick check to see if your browser or application support the modern image formats WebP and AVIF.
Browser support WebP and AVIF check 

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.

Squoosh, online tool for conversion

If you want to experiment with WebP or AVIF yourself, Squoosh is a very handy site:

https://squoosh.app

Conversion tools for AVIF to JPG

Here is a quick list for conversions from AVIF to JPG and WebP to JPG, or from JPG to AVIF and JPG to WebP.

CloudConvert
>File converter service - more than 200 different audio, video, document, ebook, archive, image, spreadsheet and presentation formats supported.
A tool that can also go from HEIC to WEBP
Convertio — File Converter
Convertio - Easy tool to convert files online. More than 309 different document, image, spreadsheet, ebook, archive, presentation, audio and video formats supported.
Another tool that can also go from HEIC to WEBP
AVIF Converter | avif.io ✨
Convert all image types to avif for free.🚀 Supports bulk converting. Blazing fast. Privacy protected. Compress your images now!⏱