What Is AVIF?
AVIF (AV1 Image File Format) is a modern image format derived from the AV1 video codec. Developed by the Alliance for Open Media — a group that includes Google, Apple, Netflix, and Amazon — AVIF delivers remarkable compression efficiency while maintaining excellent visual quality.
In practical terms, AVIF can produce images that are 30–50% smaller than WebP and up to 70% smaller than JPEG at equivalent quality levels. That means faster page loads, lower bandwidth costs, and a better experience for mobile users on slower connections.
AVIF vs WebP vs JPEG: How Do They Compare?
Here is how the three formats stack up for a typical 1200×800 photo at comparable visual quality:
| Format | Typical File Size | Browser Support | Alpha (Transparency) |
|---|---|---|---|
| JPEG | ~180 KB | Universal | No |
| WebP | ~120 KB | 95%+ browsers | Yes |
| AVIF | ~70 KB | ~90% browsers | Yes |
AVIF wins on file size in almost every test, especially for photographic images with complex gradients and natural textures.
Browser Support for AVIF
As of 2024, AVIF is supported in:
- Chrome 85+ (August 2020)
- Firefox 93+ (October 2021)
- Safari 16+ (September 2022)
- Edge 121+
- Opera 71+
Internet Explorer does not support AVIF. For full compatibility, serve AVIF with a WebP fallback and a JPEG fallback using the HTML <picture> element.
How to Use AVIF With a Fallback
The safest way to serve AVIF today is with the <picture> element. The browser picks 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="Description" loading="lazy">
</picture>This approach ensures every visitor gets the best format their browser can handle — no broken images, no extra JavaScript.
When Should You Use AVIF?
AVIF is ideal for:
- Hero images and banners — large photos where savings are most visible
- E-commerce product photos — high quality at low file size improves both speed and conversion
- Blog post images — reduce page weight across hundreds of articles
- Portfolio galleries — impressive quality without massive downloads
AVIF is less ideal for tiny icons and simple graphics where PNG or SVG still dominates, and for situations where you need universal IE11 support (use JPEG fallback).
When to Stick With WebP Instead
If your audience includes a significant share of older Safari users (pre-2022), older Edge users, or non-standard browsers, WebP remains the safer modern choice. It has near-universal support and still offers major savings over JPEG. AVIF can be layered on top as a progressive enhancement.
How to Convert Images to AVIF
You can convert images to AVIF using:
- Online converters — upload your image and download the AVIF version instantly
- Squoosh (Google) — in-browser converter with quality sliders
- ImageMagick — command line:
convert input.jpg -quality 60 output.avif - libavif — C library for server-side conversion pipelines
- Sharp (Node.js) —
sharp('input.jpg').avif({ quality: 60 }).toFile('output.avif')
AVIF Quality Settings
AVIF quality is typically set on a scale of 0–100 (100 = best quality, largest file). Unlike JPEG, AVIF quality 60–70 often looks visually lossless because of its superior compression algorithm. Start at quality 60 and compare — most users cannot tell the difference from the original.
Will AVIF Replace WebP?
Over the next 2–3 years, AVIF will likely become the dominant format for photographic web images as browser support matures. WebP will remain relevant for animated images (where AVIF support is still limited) and situations requiring maximum compatibility. For now, using both with proper fallbacks gives you the best of both worlds.
Summary
AVIF is the most efficient image format available today, offering dramatic file size reductions over both JPEG and WebP. With 90%+ browser support in 2024 and simple fallback patterns available, there is no reason not to start using it. Implement the <picture> element with AVIF → WebP → JPEG fallbacks and your pages will be noticeably faster.