Every few years a new image format promises smaller files and better quality. AVIF is the latest one gaining serious attention, and unlike some past contenders, it’s supported by the major browsers. Whether you should use it depends on a few practical points.
What AVIF is
AVIF (AV1 Image File Format) is a modern image format based on the AV1 video codec. It supports both lossy and lossless compression, transparency, animation and wide color ranges. The headline feature is efficiency: at the same visual quality, AVIF files are often noticeably smaller than JPG, and frequently smaller than WebP too, though results vary from image to image.
The benefits
- Smaller files. Faster pages and less data used, particularly useful for image-heavy sites.
- Transparency support. Like PNG and WebP, it can have see-through areas.
- Good at smooth gradients. It tends to handle skies and soft shading with less blocky banding than JPG at low quality.
The drawbacks
- Slower to create. Encoding AVIF takes more processing power than JPG or WebP, which matters if you generate many images.
- Uneven software support. Current versions of the major browsers can display it, but some older browsers, image editors, email clients, social platforms and upload forms still can’t.
- Not ideal everywhere. Many sites that accept uploads still only list JPG and PNG.
How it compares
- JPG: universal, fairly small, lacks transparency.
- PNG: lossless, supports transparency, large for photos.
- WebP: smaller than JPG, broad support, a safe modern choice.
- AVIF: often smallest, broad browser support, slower to produce, less universal outside browsers.
For a full breakdown of the older formats, see JPG vs PNG vs WebP.
Using AVIF on a website safely
The safest approach is to offer AVIF with a fallback, using the HTML picture element. The browser takes the first source it understands:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Mountain lake at sunrise" width="1200" height="800">
</picture>Visitors with newer browsers get the smallest file, and everyone else gets WebP or JPG. It takes more work to produce three versions, though, which is why many site owners stop at WebP.
When AVIF is worth it
- You run a site with lots of large photos where page weight really matters
- Your platform or plugin generates AVIF automatically
- You’re comfortable keeping fallbacks
When to skip it for now
- You’re uploading to a form, marketplace or social site that may reject it
- You’re sending images by email or sharing with other people
- You just have a small blog, where well-sized WebP or JPG images already do the job
A practical recommendation
For most people, resizing images properly and using WebP gives the biggest improvement for the least trouble. Consider AVIF as an extra step if you’ve already done the basics. Our guides on converting images to WebP and the best image format for web are a good place to start. And no format will rescue an oversized image, so check the optimization checklist too.
Start by getting dimensions right with our online image resizer, then choose the format that suits your needs.