Compress and convert images to AVIF

AVIF is the current end of the road on file size

AVIF is a still image wrapped in the AV1 video codec, which is the most sophisticated compression the open web has. On photographs it commonly lands 50 percent smaller than a JPEG of the same visual quality, and 20 to 30 percent smaller than WebP. It is particularly good at the two things older formats are worst at: smooth gradients, where JPEG produces banding, and dark low contrast scenes, where JPEG produces mud.

It supports transparency, wide color gamut, and high dynamic range. If you are shipping photography and page weight is a number someone is holding you to, AVIF is the answer and there is not currently a close second.

The costs, stated plainly

AVIF encodes slowly. Producing an AVIF can take several times as long as producing a WebP from the same source, which is why you will notice this page thinking a little harder on an AVIF conversion than on the others. That cost is paid once, by you, at build time. It is not paid by your visitors.

Decoding is cheap on a modern phone and not free on an old one. On a very large image, a low end device can take noticeably longer to paint an AVIF than a JPEG. For hero images at reasonable dimensions this does not matter. For a 6000 pixel wide image on a five year old Android phone it can.

Browser support is good and not universal. Chrome, Firefox, Safari, and Edge all read AVIF in their current versions. Some older installs, some email clients, and a good deal of non-browser software still do not. This is a format for pages you control, not for files you hand to other people.

How to ship AVIF safely

Use a picture element. Put the AVIF first, the WebP second, and a JPEG or PNG in the img tag as the final fallback. The browser takes the first source it can decode and downloads nothing else. Every visitor gets the smallest file their browser can read, and nobody gets a broken image. You can produce all three files here from the same original by changing the output format and compressing again, which does not consume an extra image from your monthly allowance.

Do not convert an existing AVIF to another AVIF at a lower quality unless you have to. Like any lossy format, it compounds. Go back to the original.

What quality setting to use

AVIF quality numbers do not mean the same thing as JPEG quality numbers, and the same value produces a different result. As a rough guide, AVIF at quality 50 is somewhere around JPEG at quality 75 in visible terms, while being much smaller. Our default of 80 is deliberately conservative, and on most photographs you can pull the slider down to 60 and see no difference at all while cutting the file roughly in half again. Try it on your own image and judge it with your own eyes. The before and after sizes are shown for exactly that reason.