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:
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: