AVIF and WebP encoding quality settings

AVIF and WebP are modern image formats that generally produce smaller file sizes compared to the widely used JPEG format. This post explains what quality setting to pick when generating AVIF and WebP images as alternatives for serving JPEG on the web. The goal is to find the quality setting that will create images that look as good as the JPEG, but with a smaller size to optimize page load time without sacrifizing image quality.

One more thing: This post is advice for tuning your automatic image optimization process where if you're anything like me you'll configure a global value once and then never look back. If you are the type of person who optimizes each image individually, then this post is probably not for you πŸ˜‡. But you may still want to play with my tool.

The 1 minute version #

If you usually encode JPEGs with quality setting 60, then encode AVIF with quality setting 50 and WebP with quality setting 65. You should expect your AVIF files to be on average 36% smaller and your WebP images 15% smaller than the equivalent JPEG image.

Quality settings for a range of JPEG qualities #

More generally, this table maps quality settings for JPEG to the respective AVIF and WebP quality settings:

JPEG quality50607080
AVIF quality48515664
WebP quality55647282

There are some notable differences in how well the different image codecs perform for varying image dimensions (especially between very small images like thumbnails and highres images). If you want to fully optimize things, check out this pivot table for the gory details.

Visual verification #

Quality numbers are cool, but you might want to verify that I did not just pick them out of thin air. For a head-to-head comparison of images with the varying quality settings, check out this tool:

Methodology #

To generate the data above, for a set of sample images:

  • I generated JPEG, AVIF, and WebP images for various screen dimensions and with a multitude of quality settings.
  • I then used dssim to calculate how visually different each of these images are from the source images.
  • And finally I picked those AVIF and WebP images in a given size and JPEG quality setting that were as different from the source image (again, as determined by dssim) as the respective JPEG.

For the full details, check out this GitHub project.

Caveats #

  • All quality settings are expressed on a range from 1 to 100.
  • Images were encoded using the sharp image processing library. Results with different encoders may vary.
  • The underlying data was generated from only 4 images (showing a landscape, a person, flowers, and architecture). These sample images may not be representative for the images on your website and you may require different encoding settings (Although I don't think so πŸ˜›). You can easily rerun the same fully automated process that I used for this post through this GitHub project.
  • If you're like "LOL, why only 4 sample images". The method explodes these out to over 2300 generated images. It is easy to add more samples, but it does cost a lot of CPU.

Browser support #

All modern browsers support WebP. At the time of this writing (February 2021) not all browsers support AVIF yet. However, very broad browser suport for AVIF is a safe bet with Chromium and Firefox having already shipped support and Apple, maker of Safari and the WebKit engine, being part of the AV1 consortium that makes the AVIF codec.

Check out my recent post on image optimization for how to load different image codecs with graceful degradation to JPEG using the picture element.

Summary #

With my image sample set AVIF images were on average 36% smaller and WebP images were 15% smaller than the equivalent JPEG. If you are looking for ways to improve metrics like Largest Contentful Paint, then supporting modern image formats may be a quick way to make progress.

For a wider perspective on image loading optimization on the web, check out my post on image loading optimizations.