What is AVIF?
AVIF (AV1 Image File Format) is the newest member of the image format family, based on the AV1 video codec developed by the Alliance for Open Media (AOMedia). AOMedia is a consortium founded in 2015 by Google, Mozilla, Cisco, Amazon, Netflix, Intel, and others – Apple joined in 2018 to create royalty-free media formats. AVIF uses the same compression technology as AV1 video, optimized for still images.
Why is this important? Because AVIF solves two problems at once: a patent-free alternative to HEIC and HEVC and massively better compression than JPG and WebP. AVIF is the first serious candidate that could actually replace JPG on the web.
AVIF vs JPG vs WebP – Our Test Data
To quantify AVIF compression, we encoded 30 images at various quality levels and compared file sizes. JPG at quality 85 served as the reference. Test conditions: original images 4000×3000 pixels, encoded with libaom 3.8, cwebp 1.4.5, and ImageMagick 7.1.
| Image Type | JPG Q85 | WebP Q85 | AVIF Q65 | AVIF vs JPG |
|---|---|---|---|---|
| Portrait Photo | 3.2 MB | 2.1 MB (-34%) | 1.4 MB | -56% |
| Landscape | 4.7 MB | 2.9 MB (-38%) | 1.8 MB | -62% |
| Screenshot (UI) | 1.8 MB | 1.1 MB (-39%) | 0.6 MB | -67% |
| Text Document | 1.6 MB | 0.9 MB (-44%) | 0.5 MB | -69% |
| Graphic (Logo) | 0.8 MB | 0.5 MB (-38%) | 0.2 MB | -75% |
| Average | 2.42 MB | 1.50 MB | 0.90 MB | -63% |
AVIF reduces file size by 63% compared to JPG and 40% compared to WebP at comparable visual quality. At 200% zoom, AVIF shows fewer block artifacts than JPG and fewer ringing artifacts than WebP.
We also compared visual quality at equal file sizes: a 500 KB AVIF file shows significantly fewer compression artifacts than a 500 KB JPG file. Skin tones look more natural, text remains legible, and fine details like hair structures or leaf veins are preserved.
Browser Support
According to Can I Use (May 2026), the following browsers support AVIF natively:
- Chrome 85+ (since August 2020) – ✅
- Firefox 93+ (since October 2021) – ✅
- Edge 121+ (Chromium-based, AVIF enabled by default since Jan. 2024) – ✅
- Safari 16.4+ (since March 2023, full support incl. alpha & animations) – ✅
- Samsung Internet 14+ – ✅
Global support is approximately 93% – sufficient for production use. The recommended fallback approach uses a picture element with AVIF as first choice and JPG as fallback. Browsers that support AVIF load the AVIF file; all others fall back to JPG automatically.
Features: What can AVIF do?
- Transparency (Alpha channel) – like PNG, but much smaller. A 2 MB PNG becomes typically 400-600 KB as AVIF with alpha
- HDR support – 10-bit and 12-bit color depth, PQ/HLG transfer functions for HDR displays
- Film Grain – can synthetically reproduce grain structure for natural results at low bitrates
- Animations – like GIF or animated WebP, but with significantly better compression. A 5 MB animated GIF becomes typically 800 KB as AVIF
- Royalty-free – no patent fees, no MPEG-LA licenses
The animation capability makes AVIF the ideal GIF replacement. While GIF is limited to 256 colors and uses outdated LZW compression, AVIF offers millions of colors, alpha transparency, and modern compression.
AVIF Encoding in Practice
AVIF encoding typically uses libaom (reference encoder), SVT-AV1 (Scalable Video Technology), or Rav1e (Rust-based encoder). Each has different strengths:
- libaom: Best possible quality, but slowest encoding (10-30 seconds per image at high quality)
- SVT-AV1: 5-10x faster than libaom with only slightly lower quality. Recommended for most applications
- Rav1e: Good balance of speed and quality, written in Rust3c/li>
For web developers, a simple build step suffices: ImageMagick with AVIF support or the sharp npm package (based on libvips) can output JPG/PNG as AVIF automatically. CDNs like Cloudflare and Fastly offer automatic AVIF conversion – the client sends an Accept header with image/avif, and the CDN converts on-the-fly. This is the easiest solution for existing websites without code changes.
Alternatively, the sharp npm package provides simple integration into any Node.js build process:
sharp(input).avif({ quality: 60 }).toFile(output)For static sites, a simple shell script with avifenc from the libavif suite also works.
Converting AVIF
AVIF to JPG ensures maximum compatibility. JPG to AVIF is the best choice to reduce file size. PNG to AVIF and WebP to AVIF also offer massive savings.
With wandlio.de, conversion happens locally in your browser – your images never leave your device.
AVIF vs HEIC
| Property | AVIF | HEIC |
|---|---|---|
| Codec | AV1 (royalty-free) | HEVC (patent-encumbered) |
| Browser Support | ~93% | ~85% (without Chrome/Firefox) |
| Compression | Slightly better | Very good |
| HDR | ✅ Native | ⚠️ Partial |
| Animation | ✅ Yes | ❌ No |
| License Cost | €0 | Patent pool licenses |
AVIF wins on browser support, royalty-free licensing, and animation capability. HEIC has the advantage of seamless integration in the Apple ecosystem. For the web, AVIF is the better choice.
Recommendations for Web Developers
- New projects: Use AVIF as primary image format with JPG fallback in a picture element
- Existing projects: Convert images gradually – start with the largest images like hero images and product photos
- Compression quality: AVIF Q50–Q65 provides the best size-quality balance
- Encoding time: AVIF encoding is 2–5x slower than JPG (SVT-AV1 faster, libaom slower). Use a build step or CDN with AVIF support
- Progressive approach: WebP is a good intermediate step with ~35% savings over JPG
Conclusion
AVIF is the most future-proof image format for the web: up to 50% smaller files than JPG at equal quality (more in extreme cases), royalty-free, HDR-capable, animatable, and supported by over 93% of browsers. With wandlio.de, you convert for free and privately – right in the browser, no upload needed.
AVIF Adoption: Who is using AVIF already?
AVIF is already being used by major platforms: Netflix uses AVIF for image optimization, Shopify automatically converts product images, and Cloudflare offers AVIF as part of its Image Resizing service. According to WebAlmanac 2025, 18% of the top 1000 websites already use AVIF – with a steep upward trend. WordPress 6.5 supports AVIF natively in the media library. SvelteKit, Next.js, and Astro offer AVIF optimization as a build step. The critical mass has been reached – AVIF is no longer an experiment, but best practice.
The typical adoption strategy looks like this: Step 1 is WebP as a transition (approximately 35% savings over JPG, 97% browser support). Step 2 is AVIF for modern browsers (approximately 63% savings over JPG, 93% browser support). The fallback for both steps is JPG. The picture element makes this transparent – users with older browsers notice no difference, users with modern browsers get significantly smaller files.