Format
What Is AVIF? The Next-Generation Image Format Explained
AVIF is an open image format derived from the AV1 video codec — it delivers the smallest file sizes of any common format, typically 50% smaller than JPEG at equivalent quality.
What is AVIF?
AVIF (AV1 Image File Format) is an image format published by the Alliance for Open Media (AOMedia) in 2019. It is derived from intra-frame encoding of the AV1 video codec — the same codec behind next-generation web video streaming. AVIF is royalty-free and open, making it an attractive alternative to HEIC, which carries patent licensing requirements.
AVIF supports lossy and lossless compression, full 8-bit alpha transparency, HDR color (up to 12-bit per channel), wide color gamut (Display P3, Rec. 2020), and animation. In terms of features, it is the most capable image format available for web use.
How AVIF compression works
AVIF uses AV1's intra-frame prediction — the same techniques the codec uses to compress individual video frames. This includes directional prediction, DC prediction, and a variety of transform sizes (4×4 up to 64×64), giving the encoder far more flexibility than JPEG's fixed 8×8 DCT blocks.
The result is that AVIF handles difficult content much better than JPEG or WebP — smooth gradients stay smooth at high compression, fine textures retain more detail, and the notorious 8×8 blocking artifacts of JPEG don't appear.
The tradeoff is encode speed. Encoding a single AVIF image can take 5–20× longer than encoding an equivalent WebP, and much longer than JPEG. This makes AVIF impractical for on-the-fly server-side image generation but perfectly suitable for pre-encoded static assets.
File size comparison
At equivalent visual quality, AVIF is consistently the smallest format for photographic content. For graphics, the gap over WebP is smaller but still meaningful.
| Format | Relative size (photo) | Relative size (graphic) | Notes |
|---|---|---|---|
| JPEG | 100% | — | Baseline |
| WebP lossy | ~65% | ~70% | Good default for web |
| AVIF lossy | ~50% | ~58% | Best size, slow encode |
| AVIF lossless | ~80% | ~65% | Beats PNG, still slow encode |
Browser and OS support
| Platform | Support | Since |
|---|---|---|
| Chrome | Full | Chrome 85 (2020) |
| Firefox | Full | Firefox 93 (2021) |
| Safari | Full | Safari 16 / iOS 16 (2022) |
| Edge | Full | Edge 121 (2024) |
| macOS | Full (macOS Ventura+) | 2022 |
| iOS | Full (iOS 16+) | 2022 |
| Android | Full (Chrome) | 2020 |
Devices running iOS 15 or earlier and Safari versions before 16 do not support AVIF. If your analytics show significant traffic from older Apple devices, serve AVIF with a WebP fallback using the <picture> element.
When to use AVIF
- Pre-encoded static assets: Hero images, product photos, and banners that are generated once and served many times. Encode them to AVIF offline where encode time doesn't matter.
- High-quality photography: AVIF's compression quality at low bitrates is excellent — useful when you need images to look great at aggressively small file sizes.
- HDR content: AVIF supports 10-bit and 12-bit color depth and HDR transfer functions (HLG, PQ), making it the right format for HDR images when HDR display support matures.
Pair AVIF with a WebP or JPEG fallback for any page that must support older browsers:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="…">
</picture>AVIF vs other formats
| Format | Compression | Alpha | HDR | Browser support | Encode speed |
|---|---|---|---|---|---|
| AVIF | Lossy + Lossless | Yes | Yes | Chrome/Firefox/Safari 16+ | Slow |
| WebP | Lossy + Lossless | Yes | No | All modern | Fast |
| JPEG | Lossy | No | No | Universal | Very fast |
| HEIC | Lossy + Lossless | Yes | Yes | Limited (Apple ecosystem) | Fast |
Frequently asked questions
Is AVIF supported in all browsers?
Not yet universally. Chrome (v85+), Firefox (v93+), and Safari (v16+, macOS Ventura / iOS 16) all support AVIF. Edge 121+ added support. Older Apple devices on iOS 15 or earlier will not display AVIF. For maximum compatibility, serve AVIF with a WebP or JPEG fallback using the <picture> element.
How much smaller is AVIF than WebP?
AVIF is typically 20–30% smaller than WebP at equivalent visual quality for photographic content. For graphics and illustrations, the gap narrows. The tradeoff is encode time — AVIF encoding is significantly slower than WebP, making it less practical for on-the-fly server-side generation.
Does AVIF support transparency?
Yes. AVIF supports full 8-bit alpha transparency in both lossy and lossless modes — the same alpha capability as PNG and WebP.
What's the difference between AVIF and HEIC?
Both use similar compression technology, but HEIC is based on HEVC (H.265) while AVIF uses AV1. HEIC is Apple's format, dominant in the Apple ecosystem (iPhone photos). AVIF is the open, royalty-free version developed by the Alliance for Open Media — it has broader web browser support and no licensing concerns.
Should I use AVIF or WebP?
Use AVIF where you can — it delivers the best file sizes. But always pair it with a fallback for browsers that don't support it yet. A <picture> element serving AVIF first, WebP second, and JPEG last covers all browsers while giving modern users the best experience. For server-side on-the-fly generation, WebP is more practical due to faster encode times.