WebP and AVIF image formats: which one should you use?

Written by Ramón Saquete

Google’s Web Picture Format (WebP) offers better features and compression rates than the other classic formats (JPG, GIF and PNG) and is now available for use in all major browsers. However, the new AVIF format offers compression rates up to 30% better than WebP and some additional features, with the drawback that, unlike WebP, the AVIF format is not yet available in most browsers, and your images require a little more processing effort to be decoded.
Previously we already saw how to include WebP images in the HTML, but we did not explain how to convert images to WebP, nor the characteristics that this format has. In this entry we will see all about WebP and the new AVIF format.

What are WebP and AVIF image formats?

The WebP (Web Picture Format) image format is Open Source licensed and incorporates almost all the features of the other Web image formats and, all other things being equal, offers better compression rates.

The AVIF image format (AV1 Image File Format) is open like Webp, offers the same features as WebP, better compression at the cost of longer processing time and some additional functionality, which will be discussed later.

Therefore, the two formats are suitable for almost any situation, making it easier to decide which format is the most suitable for each image, which is one of their main advantages.

WebP History

It is said that the WebP format was invented by Google, but this is a half-truth. Google actually bought a company called On2 Technologies that had developed a video encoder called VP8. Google engineers analyzed the compression rates of the algorithms used by VP8 to compress each frame individually and found that they achieved very good compression ratios. Therefore, they decided to use these algorithms to create the format for WebP images.

For the VP8 video encoder, they created a container called WebM, one of the video formats with the best compression rates and greater support on the web. Like any other video container or file type such as .MP4, .MOV, .AVI or .MKV, WebM can internally use different encoders for video and audio, the most advanced being currently VP9 for video and Opus for audio. In this entry we will analyze only the WebP image format.

AVIF History

The AVIF format was created by the Alliance for Open Media (AOMedia), a company specializing in the development of video streaming technologies. The invention of AVIF has followed the same path as WebP and, like WebP, is based on how the frames are encoded by a video encoder, in this case AV1. This is why AVIF is the acronym for AV1 Image File Format.

Browser compatibility

Currently all browsers support WebP. The only problem is that In the desktop version of Safari, formatting is only supported with Mac OS version Big Sur or higher. Consequently, until a few years have passed in web development, it will be advisable to continue supporting these older versions of Mac OS. To do this we can indicate different image formats in the HTML or change the images to the WebP version when the server detects the HTTP header parameter “Accept”, with the type “image/webp”, as this website does.

AVIF currently only supports Google Chrome for desktop and Android, the native Android browser and Opera. So there are still many browsers to add support for this format. However, it is already recommended to use it because Google Chrome has the largest share of users and, therefore, optimizing for this browser, we get a benefit in performance that will affect the majority of visits. The MIME type used by this format is “image/avif”, and you can specify this format together with WebP as follows:

<picture>
    <source srcset="/img/imagen.avif" type="image/avif" />
    <source srcset="/img/imagen.webp" type="image/webp" />
    <img src="/imgs/imagen.jpg" alt="texto SEO" />
</picture>

Advantages and features of WebP and AVIF over other formats

WebP and AVIF image formats nowadays support all the features we are going to see in the following points. These imitate those of other formats which they replace and which we will discuss next to each feature.

• Lossy, non-transparent compression, like JPG, but with higher compression by using modifications and additional steps of the original JPG algorithm. In WebP, if we increase the compression a lot, we will see that the algorithm divides the image in squares of 16×16 pixels. This effect is accentuated in JPEG but is with AVIF the squares are not so noticeable. In this case, we will see that the details are blurred as if it were an impressionist painting (see image below).

  

  For the above example the images have been compressed as follows:

  JPEG: with the Gimp program the quality has been lowered to 0 and 4:2:0 subsampling has been selected (roughly speaking, the subsampling indicates the resolution used for each channel in the YUV color mode). A 3KB image has been obtained.

  WebP: with the command line tool cwebp, the parameter -q 0 (indicates minimum quality) has been used. Subsampling is not selectable here and lossy compression is always 4:2:0. A 2 KB image has been obtained.

  AVIF: with the command line tool avifenc, the parameters –min 63 –max 63 (indicates minimum quality), -y 420 (4:2:0 subsampling), -s 0 (maximum CPU cost) have been used. A 1KB image has been obtained.
  Obviously, we will never compress the images to the maximum, but it is a good way to demonstrate that more modern formats allow to lower the quality further and therefore increase the compression without affecting the image.
  

• Lossless compression with transparencies, like PNG, but with denser and faster compression in the case of Webp and much denser and somewhat slower in the case of AVIF.
  In WebP, when lossless compression is used, a different algorithm or format is applied internally that works exclusively with 24-bit color per pixel, in RGB color mode. This means 8 bits for each of the three channels. When there is transparency, we will have 8 more bits for the alpha channel, making a total of 32 bits per pixel.
  AVIF, on the other hand, adds quite interesting additional functionalities, although it is rare for browsers to incorporate them. It allows 8, 10 or 12 bits of color depth for each of the channels, so we will have images with gradients that we can only appreciate in a professional monitor and graphics card for photography. In addition, it allows HDR images, a feature that is relatively easier to find in a user monitor.
• Lossy and transparent compression. In both WebP and AVIF we have the option to choose the quality percentage for color information (RGB channels) and transparencies (alpha channel) separately. There was no image format that did this and it was a necessary feature, as PNG-24 takes up too much space for very large images. It is estimated that in a lossy WebP with transparency, the size is reduced by 60% to 70% compared to the lossless PNG version.
  When we need to use images with WebP or AVIF transparencies, the best option is usually to leave the alpha channel at 100% quality or lossless, as the lossless algorithm used in both cases is very good.
• Both formats allow animations, just like GIF, but with higher compression and 24-bit color, instead of 8-bit indexed like GIF. For AVIF, animations are not yet supported in browsers.

Disadvantages of WebP and AVIF

Despite their many virtues, WebP and AVIF are not all -encompassing and there are situations where other image formats are preferable:

• The only classic format that sometimes outperforms WebP is PNG-8, when we have images with very few colors. PNG-8 is a format in which we use 8 bits per pixel of indexed color, which means that we will have a palette of 256 colors chosen from the more than 16 million available to represent the image. If, when saving the file, this palette is further reduced, either because the image allows it or by applying a screening to the image, the savings will be greater than in the WebP version, which always works with at least 24 bits.
  AVIF also works with at least 24bits, but the compression is so good that it beats PNG-8 by far.
• Neither WebP nor AVIF are vector image formats, that’s what SVG is for. In these cases, SVG will usually win out over the rest, although as it is the only one that is saved in text mode we must take into account that it is also the only image format to which Brotli q11 or Gzip compression must be applied at the server level.
• With certain WebP images, the savings are not excessive compared to the version used in the classic image format. In these cases, it may not be worth the optimization effort required to have the image in both formats, depending on whether or not this task has been automated. Thus, if we analyze a website with PageSpeed Insights or Lighthouse, it will recommend using Webp on an image only if the saving is greater than 8 KB.
• It must be said that the APNG standard, which allows 24-bit animations with lossless compression in PNGs, beats the compression of animations made with Webp, even when the latter uses lossy compression. APNG is not available in all browsers, but it is available in most of them, so it is an option to consider in these cases.

In addition to the above, neither WebP nor AVIF support the progressive or interlaced display used by the JPEG and PNG formats respectively. Progressive display consists of displaying the entire image and progressively less pixelated as it is downloaded. According to WebP documentation, this type of display would introduce a very high CPU cost.

What is the best way to compress images in WebP or AVIF?

The famous image editing program Gimp allows you to open images and export them to WebP. If you don’t know it, I invite you to try this fantastic free and Open Source software. You can also open and save WebP files from Adobe Photoshop, but here you have to install a plugin that is somewhat outdated, so I do not recommend it. However, none of the above options will give good results. The best option and the one with which we will obtain smaller file sizes is the official command line tool cwebp, available at the following link:
https://developers.google.com/speed/webp/docs/precompiled.

We will choose the most updated version for our operating system, download and unzip the zip file, in which we will find a /bin folder. This folder must be included in the PATH environment variable of our operating system, because then we will have available all the command line tools to compress and decompress WebP from a terminal or command console. That done, we will use cwebp to compress WebP, for example, as follows:

cwebp entrada.png -q 80 -blend_alpha 0xffffff -o salida.webp

In this example we compressed a PNG image with a quality of 80%, combining the transparent parts with white and without saving transparency information. There are many more options: for example, instead of using “-blend_alpha”, we could indicate a transparency quality level of 60% with “-alpha_q 60” or remove the alpha channel with “-noalpha” and it will fill the transparent pixels with colors similar to those surrounding them.

Command-line tools may seem cumbersome to users, but they are the ideal interface for developers and system administrators who want to automate the conversion of a large set of images.

There are also programming libraries that allow WebP compression to be integrated into a CMS.

To compress in AVIF we have the online tool https://squoosh.app/ and the official command line tool that can be downloaded for Windows at the following link, selecting the latest release: https://github.com/AOMediaCodec/libavif/releases. We can also compile it for Linux, downloading the source code from the same link, or install it on Mac OS with:

brew install joedrago/repo/avifenc

To use the compression tool we will type in the terminal:

avifenc entrada.jpg -o salida.avif

Finally, many CDNs offer the possibility of compressing images to WebP or AVIF without us having to do anything more than activate the option in their panel.

Other formats: JPEG XR and JPEG 2000

Microsoft made an attempt to release its own format for the web, JPEG XR. It improves JPEG compression at a cost of higher CPU usage for writing and reading. This format, contrary to what might be expected from Microsoft, is openly licensed, but despite that it was not successful and in the latest versions of Edge is no longer available, so it should not be considered as an option.

The image format JPEG 2000 or JP2, developed by the Joint Photographic Experts Group as a replacement for JPEG, it is available only in Safari and it has nothing to do as an open web format for the large number of patents it uses and because it does not compress as much as WebP, let alone AVIF.

Both formats allow lossy, lossless and transparent compression.

Conclusion

AVIF is the best format for the web currently available, as the increase in CPU usage over WebP is not significant and the compression obtained is much higher. Since this is a patent-free format, it meets all the requirements to replace the rest, something that will happen gradually, which will eventually save work when creating different versions of the file format for each image. However, it will be a long time before all browsers support it, so we still have to use AVIF together with WebP and the classic formats to support all browsers and thus provide users with images in the smallest possible size.

In the field of photo and image retouching applications, not even WebP, after several years, still has native support in most of them, so the best and most updated option to compress in the new formats will remain for a long time the official command line tools.

Bibliography

• Comparison between WebP and AVIF
• https://developers.google.com/speed/webp
• https://developers.google.com/speed/webp/docs/compression
• https://developers.google.com/speed/webp/docs/c_study
• https://web.dev/uses-webp-images/
• https://web.dev/codelab-serve-images-webp/
• http://blog.webmproject.org/2010/07/inside-webm-technology-vp8-intra-and.html
• https://aomediacodec.github.io/av1-avif/