AVIF (AV1 Image File Format) is the latest entry in the modern-image-format race. It uses the AV1 video codec's intra-frame compression, which significantly outperforms JPEG, WebP, and PNG at equivalent visual quality. Real-world savings: 30-50% smaller than WebP, 50-80% smaller than JPEG, with no quality penalty for typical photographic content.
Browser support is now broad: Chrome 85+, Firefox 93+, Safari 16+. Use a <picture> element with <source type="image/avif"> first, then <source type="image/webp">, then a JPEG/PNG fallback in <img>. Browsers serve the first format they support, so older browsers fall back gracefully.
Tradeoffs:
- Encoding is CPU-intensive (~5-10x slower than JPEG, ~2-3x slower than WebP). For build-time encoding this is fine; for on-demand encoding (CDN image transforms), check whether your image service supports AVIF — most modern ones do (Cloudflare Polish, Imgix, Cloudinary, ImageKit).
- Decoding is fast on modern CPUs but slightly slower than WebP on older devices.
- Animation support exists (AVIF Sequence) but tooling is sparse — for animations, MP4 / WebM still beats AVIF in compatibility.
For static photographic images the choice is clear: ship AVIF when supported, WebP for the next tier, JPEG as the universal fallback.