What is AVIF Image Format?
AVIF is an image format based on AV1 video codec that delivers superior compression at high visual quality.
What is AVIF?
AVIF (AV1 Image File Format) is an open, royalty-free image format derived from the AV1 video codec, standardized by the Alliance for Open Media (AOMedia) in 2019. It uses the HEIF container (ISO/IEC 23008-12) to store still images and image sequences encoded with AV1. In practical testing, AVIF produces files roughly 50% smaller than JPEG and 20% smaller than WebP at equivalent perceived quality (SSIM). It supports HDR, wide color gamut (including BT.2100), 10- and 12-bit color depth, alpha transparency, and animated sequences. As of April 2026, all major browsers—Chrome (since 85), Firefox (since 93), Safari (since 16.1), and Edge—support AVIF natively. We use AVIF as the primary image format on nearly every project we ship, falling back to WebP and then JPEG via the <picture> element for the negligible remaining unsupported clients.
How it works
AVIF encoding applies the same intra-frame compression techniques used in AV1 video to individual still images. The encoder breaks an image into superblocks (up to 128×128 pixels), predicts pixel values using directional intra-prediction modes, transforms the residual with a hybrid DCT/ADST transform, and entropy-codes the result with a multi-symbol arithmetic coder.
The practical encoding pipeline typically looks like this using sharp in a Node.js build step:
import sharp from 'sharp';
await sharp('input.jpg')
.avif({
quality: 50, // 1-100, lower = smaller file
effort: 5, // 0-9, higher = slower but better compression
chromaSubsampling: '4:2:0'
})
.toFile('output.avif');
For static sites (Astro, Next.js with next/image), the framework's built-in image pipeline handles format negotiation via the Accept header. In Next.js 14+, AVIF is the default preferred format when the browser signals support.
Key encoding trade-off: AVIF encoding is significantly slower than JPEG or WebP. At effort level 5, encoding a 2000×1500 photo takes roughly 2–5 seconds on a modern CPU, versus ~100ms for JPEG. That's fine for build-time or CDN-edge generation, but real-time on-the-fly encoding at scale needs purpose-built infra (Cloudflare Image Resizing, Imgix, Cloudinary, or Vercel's image optimizer all handle this).
Decoding is fast—comparable to WebP in all modern browsers—so there's no runtime performance penalty for end users.
When to use it
AVIF is the right default for most images on the web in 2026. Specific guidance:
Use AVIF when:
- Serving photographic content (hero images, product photos, blog thumbnails)—the compression gains are largest here
- You need transparency without the bloat of PNG (AVIF with alpha beats WebP with alpha)
- HDR or wide-gamut color accuracy matters (photography portfolios, e-commerce where color fidelity drives conversions)
- Animated images where you'd otherwise reach for GIF or animated WebP
Skip AVIF when:
- You're serving simple icons or logos with few colors—SVG is better
- You need lossless compression of screenshots with sharp text—PNG or WebP lossless may decode faster
- Encoding speed is critical in a synchronous request path and you can't cache results
- Your audience is on legacy embedded browsers (kiosks, older smart TVs) where only JPEG is safe
AVIF vs alternatives
| Feature | AVIF | WebP | JPEG | JPEG XL |
|---|---|---|---|---|
| Compression (photo) | Best (~50% < JPEG) | Good (~30% < JPEG) | Baseline | Best (rivals AVIF) |
| Browser support (Apr 2026) | ~96% global | ~97% global | ~100% | Chrome dropped support; Safari only |
| Transparency | Yes (8/10/12-bit) | Yes (8-bit) | No | Yes |
| HDR / Wide Gamut | Yes | No | No | Yes |
| Animation | Yes | Yes | No | Yes |
| Encode speed | Slow | Fast | Very fast | Medium |
| Decode speed | Fast | Fast | Very fast | Fast |
| Royalty-free | Yes | Yes | Yes | Yes |
JPEG XL had the potential to replace everything, but Chrome removed support in v110 (2023) and it never recovered meaningful browser share. That makes AVIF the practical winner. We default to AVIF with WebP fallback on every project—it's the only combination that matters.
Real-world example
On an e-commerce Astro site we shipped in late 2025, we converted 1,200 product images from JPEG to AVIF at quality 48 using sharp in the build pipeline. Average file size dropped from 185 KB to 74 KB per image—a 60% reduction. Total page weight for a category page with 40 product thumbnails went from 1.8 MB to 720 KB. Largest Contentful Paint (LCP) improved from 2.9s to 1.8s on a throttled 4G connection in Lighthouse. The <picture> element served AVIF to 95.7% of visitors (per Cloudflare analytics), WebP to 3.8%, and JPEG to the remaining 0.5%. Build time increased by about 90 seconds for the full image set, which was acceptable for a static deploy.