What Is AVIF?
AVIF (AV1 Image File Format) is a modern image format based on the AV1 video codec by the Alliance for Open Media. It achieves better compression than WebP: 20–50% smaller than WebP at equivalent quality, completely royalty-free.
AVIF vs WebP vs JPG
| Metric | JPG | WebP | AVIF |
|---|---|---|---|
| Compression | Baseline | +25% better | +40–50% better |
| Transparency | ❌ | ✅ | ✅ |
| HDR and wide gamut | ❌ | Limited | ✅ |
| Color depth | 8-bit | 8-bit | 10–12-bit |
| Browser support (2024) | Universal | 96%+ | 93%+ |
1200×800 photo: JPG 180 KB → WebP 130 KB → AVIF 85 KB (-53% vs JPG)
Convert to AVIF with FFmpeg
ffmpeg -i photo.jpg -c:v libaom-av1 -crf 30 -b:v 0 photo.avif
ffmpeg -i photo.jpg -c:v libsvtav1 -crf 35 photo.avif # faster
CRF 25–35 is optimal for web use.
Convert with Squoosh CLI
npx @squoosh/cli --avif '{"cqLevel": 33, "speed": 4}' photo.jpg
Convert with Python
pip install pillow pillow-avif-plugin
import pillow_avif
from PIL import Image
Image.open("photo.jpg").save("photo.avif", quality=80)
Production Implementation with Fallback
<picture>
<source type="image/avif" srcset="photo.avif">
<source type="image/webp" srcset="photo.webp">
<img src="photo.jpg" alt="Description" loading="lazy" width="1200" height="800">
</picture>
Browser Support (2024)
Chrome 85+, Firefox 93+, Edge 121+, Safari 16+. 93%+ global coverage.
Server Configuration
AddType image/avif .avif
types { image/avif avif avifs; }
Conclusion
AVIF is the most efficient web image format available in 2024. With 93%+ browser support, use <picture> with WebP and JPG fallbacks for full compatibility.