How AVIF makes photos smaller
AVIF uses the intra-frame tools of the AV1 video codec. In practice that means it can describe the same picture in fewer bytes than JPG. caniuse puts it as generally better compression than WebP, JPEG, PNG and GIF. MDN says lossy AVIF images are around 50 percent smaller than JPEG ones, and that AVIF generally compresses better than WebP.
You pay in time. AVIF encoding is slower than JPG, and slower the bigger the picture. AVIF encoding cost grows quickly with the number of pixels, so the converter picks a faster encoder setting for bigger pictures: speed 6 up to 2 megapixels, 7 up to 8, 8 up to 24 and 9 above that, on a scale where 10 is fastest. A faster setting finds fewer savings, so very large photos come out a little bigger than they could.
What we measured
On a 2048 by 1536 photo saved as a JPG at quality 92 (967 KB), the AVIF at the default quality of 65 was 372 KB, 61 percent smaller, in about 2.7 seconds on a busy laptop (three runs, 2.6 to 2.8). That comparison is not at equal quality, because the JPG was saved at a high setting.
For a fairer test we took a 384 by 288 crop and scored each file with SSIM, a measure of structural similarity to the original. The AVIF at quality 65 scored 0.9716 and was 21.7 KB. A JPG from the browser's own encoder scored 0.9672 at quality 85 (29.4 KB) and 0.9748 at 90 (40.2 KB), so a JPG that matches the AVIF's score needs about 36 KB. The AVIF was around 39 percent smaller. We did not test a more thorough JPEG encoder, such as the one this site uses for JPG, so the real gap may be smaller, and it varies by picture.
In short, quality 65 scored between a JPG at 85 and one at 90 in this test.
Support, and how to use AVIF on a site
AVIF is supported by Chrome 85, Firefox 93, Safari 16.4 and Edge 121. Safari 16.1 to 16.3 have partial support, on macOS 13 and later only, and Firefox 93 to 112 show still pictures but not animated ones. caniuse counts about 96 percent of browser use worldwide as full support. MDN still says to provide a fallback in WebP, JPEG or PNG with the picture element, because support is not yet comprehensive.
The usual pattern is the HTML picture element: a source of type image/avif first, then your JPG in the img tag inside it. Browsers that understand AVIF take the first, and the rest use the JPG. Keep your JPG files, since they are the fallback.
When not to convert
- For other people's programs. Email, document editors, print shops and many upload forms cannot open AVIF. Send JPG there.
- For your master copies. A JPG converted to AVIF is lossy twice. Keep the JPG, or better the original, and make AVIF copies for the web.
- For tiny pictures. They still shrink, but by little: a 32 by 32 JPG of 1.1 KB became 702 bytes, and a 128 by 128 one went from 6.7 KB to 4.9 KB. Weigh a few hundred bytes against keeping two versions of the file.
- When a picture must load progressively. MDN notes that AVIF has no progressive rendering, so the file must be fully downloaded before it shows.
Metadata is not copied into the AVIF. That drops the camera and the GPS position, which is good for privacy, but it also drops the date taken. Keep your JPG if you need those.