AVIF (AV1 Image File Format) is derived from the AV1 video codec — the same technology powering high-quality video streaming on YouTube, Netflix, and Twitch. When applied to still images, AV1's compression algorithms produce files that are consistently 40–55% smaller than JPEG and 20–30% smaller than WebP at equivalent visual quality.
In 2025, AVIF has crossed the threshold from "experimental" to "production-ready" for most websites. Browser support reached 92% globally. Here's everything you need to use it correctly.
What is AVIF?
AVIF stands for AV1 Image File Format. It was standardized by the Alliance for Open Media (AOMedia) in 2019 and uses intra-frame encoding from the AV1 video codec to compress individual still images.
Unlike JPEG's 30-year-old DCT algorithm, AV1 uses more sophisticated techniques including:
- Larger transform block sizes — 4×4 up to 64×64, vs JPEG's fixed 8×8
- More transform types — 16 directional transforms vs JPEG's 2
- In-loop filters — removes blocking artifacts within the codec
- Perceptual optimization — prioritizes preserving what the eye notices most
The result: AVIF achieves better quality at lower file sizes than any image format that preceded it.
Real AVIF Compression Data
Tested across three image categories, comparing file sizes at visually equivalent quality (all outputs indistinguishable at 100% zoom on a retina display):
| Image | JPEG | WebP | AVIF | AVIF vs JPEG |
|---|---|---|---|---|
| Landscape photo (4K, 3840×2160) | 2,840 KB | 1,980 KB | 1,290 KB | -55% |
| Portrait photo (1200×1500) | 320 KB | 224 KB | 148 KB | -54% |
| Product photo (800×800) | 185 KB | 128 KB | 82 KB | -56% |
| Text-heavy screenshot | 180 KB | 112 KB | 74 KB | -59% |
| Illustration (flat colors) | 95 KB | 62 KB | 44 KB | -54% |
AVIF's advantage is most pronounced in complex photographic content and very low bitrate encoding — where JPEG produces severe blocking artifacts but AVIF maintains smooth gradients and sharp edges.
Browser Support in 2025
| Browser | AVIF Support | Version Added |
|---|---|---|
| Chrome | ✓ | v85 (Aug 2020) |
| Firefox | ✓ | v93 (Oct 2021) |
| Safari | ✓ | v16.1 (Oct 2022) |
| Edge | ✓ | v121 (2024) |
| Samsung Internet | ✓ | v14 (2021) |
| iOS Safari | ✓ | iOS 16 (2022) |
| Global coverage | ~92% | Mar 2025 |
The ~8% without AVIF support are primarily older browser versions and some Samsung Internet users. Always provide a WebP or JPEG fallback.
AVIF vs WebP: Which to Choose?
| Factor | AVIF | WebP |
|---|---|---|
| Compression (photographs) | Best — 40–55% smaller than JPEG | Good — 25–35% smaller than JPEG |
| Browser support | ~92% | ~97% |
| Encoding speed | Slow (10–50× slower than JPEG) | Fast (2–3× slower than JPEG) |
| Decoding speed | Slightly slower than WebP | Fast |
| Tooling support | Growing | Widespread |
| Animation | Yes | Yes |
| HDR / wide color | Yes | Limited |
The practical answer: Use AVIF for hero images and above-the-fold content where LCP matters most. Use WebP for the rest. Always provide a fallback via <picture>.
How to Encode AVIF Images
Browser-Based (Easiest)
iCompressIt supports AVIF encoding in browsers that support it (Chrome, Firefox, Safari 16+), with automatic WebP fallback for browsers that don't. Drop your image and the tool handles format detection automatically.
Command Line with avifenc
# Install: brew install libavif (Mac) or apt install libavif-bin (Linux)
# Encode AVIF (quality 0-63, lower = better quality)
avifenc --min 24 --max 36 input.jpg output.avif
# Recommended for web photos
avifenc --min 28 --max 40 --speed 6 input.jpg output.avifSharp / Node.js
const sharp = require('sharp');
await sharp('input.jpg')
.avif({ quality: 65, effort: 4 })
.toFile('output.avif');Squoosh (Browser GUI)
squoosh.app supports AVIF encoding with quality preview. Good for testing single images before committing to a batch conversion workflow.
HTML Implementation with Fallbacks
Always implement AVIF with fallbacks. The <picture> element handles this automatically:
<!-- AVIF with WebP + JPEG fallbacks -->
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Hero image"
width="1440" height="600" fetchpriority="high">
</picture>
<!-- With responsive srcset -->
<picture>
<source
type="image/avif"
srcset="hero-800.avif 800w, hero-1440.avif 1440w"
sizes="100vw">
<source
type="image/webp"
srcset="hero-800.webp 800w, hero-1440.webp 1440w"
sizes="100vw">
<img
src="hero-1440.jpg"
srcset="hero-800.jpg 800w, hero-1440.jpg 1440w"
sizes="100vw"
alt="Hero" width="1440" height="600"
fetchpriority="high">
</picture>When to Use AVIF (and When Not To)
Use AVIF for:
- Hero images and above-the-fold content (biggest LCP impact)
- Large featured photographs on photography or portfolio sites
- Product images on e-commerce where bandwidth costs are high
- Sites with known modern-browser audiences (tech, developer audiences)
Skip AVIF for:
- Email images (no support in email clients)
- Server-side rendering where encoding time is a bottleneck
- Sites targeting audiences with a significant IE/legacy browser share
- Very small images under 5 KB (format overhead not worth it)
FAQ
Is AVIF supported on iPhone?
Yes, from iOS 16 and Safari 16 (October 2022). iPhones running iOS 16+ (the vast majority of active iPhones as of 2025) fully support AVIF.
Does AVIF support transparency?
Yes — full alpha channel support in both lossy and lossless modes. AVIF can replace PNG for transparent images with better compression.
Why is AVIF encoding so slow?
AVIF's superior compression requires more computational work during encoding. A JPEG that encodes in 0.1 seconds may take 1–10 seconds as AVIF. This is a build-time problem, not a load-time problem — end users download the pre-encoded file instantly.