Bottom line: AVIF is the next-generation image format based on AV1 video coding, 50% smaller than JPEG and 20% smaller than WebP, while supporting lossless compression, HDR, wide color gamut, and alpha channels. Taking a 1920×1080 photo as an example, JPEG quality 85 is about 420KB, while AVIF at equivalent quality is only 210KB. AVIF uses AV1 intra-frame coding technology (block partitioning prediction + transform coding + loop filtering), with compression efficiency far exceeding JPEG's DCT. As of 2026, Chrome, Firefox, Safari, and Edge all natively support AVIF, with global browser coverage at approximately 96%. Below we start from technical principles, providing a four-format comparison and migration guide.
If you're not yet familiar with web image format comparisons, we recommend first reading WebP vs PNG vs JPG: Which Web Image Format to Choose?.
1. What Is AVIF
AVIF (AV1 Image File Format) is an image format released by the Alliance for Open Media (AOMedia) in 2019, based on the intra-frame coding technology of the AV1 video encoder. AV1 itself is an open-source, royalty-free coding standard designed for next-generation video (8K/120fps), and its intra-frame coding tools are equally applicable to static image compression. AVIF packages AV1's intra-frame coding into a standalone image container format.
| Feature | AVIF | WebP | JPEG | PNG |
|---|---|---|---|---|
| Release year | 2019 | 2010 | 1992 | 1996 |
| Underlying codec | AV1 intra | VP8 intra | DCT | DEFLATE |
| Lossy compression | Supported | Supported | Supported | Not supported |
| Lossless compression | Supported | Supported | Not supported | Supported |
| Alpha channel | Supported | Supported | Not supported | Supported |
| HDR/wide gamut | Supported (12-bit) | Not supported (8-bit) | Not supported (8-bit) | Not supported (8/16-bit) |
| Animation support | Supported | Supported | Not supported | APNG extension |
| Royalty | Free open-source | Free open-source | Free | Free |
AVIF's core advancements over the previous-generation WebP include: support for 12-bit color depth and HDR (High Dynamic Range), while WebP only supports 8-bit SDR; higher compression ratio (10%–30% smaller at equivalent quality); and support for richer coding tools (directional prediction, more flexible block partitioning). The trade-off is slower encoding speed — AVIF encoding takes approximately 3–5 times longer than WebP.
2. AVIF Technical Principle in Detail
AVIF's compression pipeline has three core stages: block partitioning prediction, transform coding, and loop filtering. Each stage inherits advanced tools from AV1 video coding, which is the fundamental reason AVIF's compression efficiency far exceeds JPEG's.
2.1 Block Partitioning Prediction
AV1 divides the image into coding blocks (maximum 128×128), each of which can be recursively subdivided into smaller sub-blocks (minimum 4×4), adaptively selecting partitioning based on image content. Predictive coding uses already-reconstructed pixels to predict the current block, encoding only the residual (the difference between actual and predicted values).
| Prediction Type | Principle | Suitable Region | vs JPEG |
|---|---|---|---|
| Intra prediction | Predict using adjacent encoded pixels | Smooth areas/gradients | JPEG has no prediction, full encoding |
| Directional prediction | 56 directional angle predictions | Edges/texture directions | JPEG has no directional prediction |
| Palette prediction | Color palette indexing | Text/icons/animation | JPEG lacks this tool |
| Block copy | Copy other regions within image | Repetitive textures | JPEG lacks this tool |
2.2 Transform Coding
The residual after prediction is transformed from the spatial domain to the frequency domain using transform coding, compressing by quantizing high-frequency coefficients. AV1 supports multiple transform types, more flexible than JPEG's single DCT.
| Transform Type | Block Size | Use Case | Advantage |
|---|---|---|---|
| DCT | 4×4 to 64×64 | General-purpose | Classic transform, energy concentration |
| ADST (Asymmetric Discrete Sine Transform) | 4×4 to 32×32 | Directional edges | Better for edge residuals |
| Identity transform | 4×4 to 32×32 | Lossless/low-loss | Skip transform, direct quantization |
| Recursive transform | Combined | Complex textures | Two-level transform improves energy concentration |
2.3 Loop Filtering
The reconstructed image after quantization develops blocking and ringing artifacts, which AV1 repairs using multi-level loop filtering. This is the key reason AVIF's quality at low bitrates is significantly better than JPEG's.
| Filter Stage | Function | Processing Order | Effect |
|---|---|---|---|
| CDEF (Directional Deblocking Filter) | Remove block boundary artifacts | Stage 1 | Smooth block boundaries |
| LR (Loop Restoration Filter) | Wiener filter / self-guided filter | Stage 2 | Restore detail textures |
| Super-resolution reconstruction | Reconstruct from low-resolution frames | Stage 3 | Enhance high-frequency detail |
For the overall image compression approach, see Image Compression Guide: JPG/PNG/WebP Format Comparison.
3. Case Study: Four-Format Real-World Comparison
Let's compare AVIF, WebP, JPEG, and PNG formats using the same test image for size, quality, and encoding time. Test sample: 1920×1080 natural landscape photo, 24-bit true color, original BMP approximately 5.93MB.
Image characteristics: 1920×1080, 24-bit color, with sky gradients, leaf textures, and building edges, original BMP 5.93MB.
Size and quality comparison (target SSIM 0.92):
| Format | Parameters | File Size | vs Original | SSIM Quality | vs JPEG |
|---|---|---|---|---|---|
| PNG (lossless) | DEFLATE max | 4.82MB | -18.7% | 1.000 | +938% |
| JPEG | Quality 85 | 420KB | -92.9% | 0.921 | Baseline |
| WebP | Quality 80 | 298KB | -95.0% | 0.923 | -29.0% |
| AVIF | Quality 55 (CRF) | 210KB | -96.5% | 0.925 | -50.0% |
Result: At equivalent quality (SSIM 0.92+), AVIF is only 210KB, 50% smaller than JPEG and 29.5% smaller than WebP. PNG lossless has the highest quality but the largest size (4.82MB), making it unsuitable for photo content. AVIF performs particularly well in leaf texture and sky gradient areas — JPEG develops visible color blocks at low bitrates, while AVIF has virtually no visible artifacts.
Encoding time comparison:
| Format | Encoding Time | Decoding Time | Speed Rating | Use Case |
|---|---|---|---|---|
| JPEG | 18ms | 8ms | Very fast | Real-time encoding |
| WebP | 65ms | 15ms | Fast | Real-time web |
| AVIF | 280ms | 22ms | Slow (encode) / Fast (decode) | Pre-generation |
| PNG | 120ms | 12ms | Medium | Lossless scenarios |
AVIF encoding takes 15 times longer than JPEG and 4 times longer than WebP, because AV1's block partitioning prediction and transform selection require extensive rate-distortion optimization calculations. However, AVIF decoding is only 2 times slower than JPEG — minimal impact on the browsing experience. We recommend pre-generating AVIF images on the server side (encoding at build time) rather than real-time encoding.
4. Browser Compatibility and Migration Strategy
AVIF browser compatibility has largely matured after 2023, but fallback solutions for older browsers are still needed. The table below lists support across mainstream browsers.
| Browser | Supported Version | Release Date | Global Share | Support Status |
|---|---|---|---|---|
| Chrome | 85+ | September 2020 | 65% | Native support |
| Safari | 16.4+ | March 2023 | 18% | Native support |
| Edge | 92+ | 2021 | 5% | Native support |
| Firefox | 93+ | October 2021 | 3% | Native support |
| Opera | 71+ | 2020 | 2% | Native support |
| IE | Not supported | — | <1% | Needs fallback |
Global browser support for AVIF is approximately 96%, with only IE and very old browser versions lacking support. The recommended migration strategy uses HTML5's picture tag for progressive enhancement.
| Migration Strategy | Implementation | Compatibility | Maintenance Cost | Recommendation |
|---|---|---|---|---|
| picture tag | Multi-format source + img fallback | 100% | Low | ★★★★★ |
| AVIF only | Use avif directly | 96% | Very low | ★★★☆☆ |
| Accept header negotiation | Server returns based on Accept header | 100% | Medium | ★★★★☆ |
| JPEG only | No migration | 100% | Very low | ★☆☆☆☆ |
Recommended picture tag syntax:
<picture><source srcset="photo.avif" type="image/avif"><source srcset="photo.webp" type="image/webp"><img src="photo.jpg" alt="Landscape photo"></picture>
The browser selects the first supported format by priority: if AVIF is supported, it uses AVIF (smallest); otherwise it tries WebP, and finally falls back to JPEG. This approach enjoys AVIF's compression advantages while ensuring older browsers display correctly. For the complete web image optimization solution, see Web Image Optimization: 50% Performance Improvement in Practice.
5. Format Selection Recommendations for Different Scenarios
AVIF is excellent but not suitable for all scenarios. Image format selection for different scenarios requires comprehensive consideration of compression ratio, compatibility, encoding speed, and feature requirements.
| Scenario | Recommended Format | Reason | Size Reference |
|---|---|---|---|
| E-commerce product images | AVIF (primary) + JPEG (fallback) | Pursuit of ultimate size, faster loading | JPEG 420KB→AVIF 210KB |
| News & media | WebP (primary) + JPEG (fallback) | Fast encoding, good compatibility | JPEG 420KB→WebP 298KB |
| HDR photography | AVIF | Only mainstream format supporting 12-bit HDR | Lossless HDR only available with AVIF |
| UI icons/screenshots | PNG | Lossless requirement, sharp edges | No size impact |
| Social media | AVIF or WebP | Small size, fast sharing | Both work |
| Email embedding | JPEG | Email client compatibility first | AVIF not recommended (poor compatibility) |
| Video thumbnails | AVIF | Natural pairing with AV1 video | 50% smaller than JPEG |
| Real-time generation (CAPTCHA, etc.) | JPEG | Encoding speed priority | 18ms vs AVIF 280ms |
A general principle: choose AVIF for pre-generated static content (optimal size), JPEG/WebP for real-time generation (speed priority), PNG for lossless requirements, and AVIF for HDR content (the only option). SmartSlim can automatically generate multiple formats (AVIF+WebP+JPEG) during batch conversion, covering all compatibility scenarios in one pass.
6. FAQ
Q1: What is the AVIF format?
AVIF (AV1 Image File Format) is an image format based on AV1 video coding, released by the Alliance for Open Media (AOMedia) in 2019. AVIF leverages AV1's intra-frame coding technology to compress static images, achieving 50% smaller sizes than JPEG and 20% smaller than WebP, while supporting lossless compression, HDR, wide color gamut, and alpha channels. AVIF is an open-source, royalty-free next-generation image compression standard, already natively supported by Chrome, Firefox, and other mainstream browsers.
Q2: How much smaller is AVIF than JPEG?
At the same visual quality (SSIM 0.9+), AVIF is approximately 50% smaller than JPEG. For example, a 1920×1080 photo: JPEG quality 85 is about 420KB, while AVIF at equivalent quality is about 210KB. Compared to WebP, AVIF is about 20% smaller at medium quality, with the advantage becoming more pronounced at high quality (30%+ smaller). AVIF's compression advantage comes from AV1's more advanced predictive coding and transform tools, particularly excelling in complex texture areas.
Q3: How is AVIF browser compatibility?
As of 2026, AVIF is supported by mainstream browsers: Chrome 85+ (September 2020), Firefox 93+ (October 2021), Edge 92+ (2021), Safari 16.4+ (March 2023). Global browser support is approximately 96%. Older browsers that don't support it can fall back to JPEG/WebP via the picture tag. We recommend using <picture><source srcset='img.avif' type='image/avif'><img src='img.jpg'></picture> for progressive enhancement.
Q4: Which is better, AVIF or WebP?
Overall, AVIF is superior to WebP. Compression ratio: AVIF is 10%–30% smaller than WebP; features: AVIF supports HDR and 12-bit color depth, WebP only supports 8-bit SDR; encoding speed: WebP is faster than AVIF (AVIF encoding is slower); compatibility: WebP support is about 98%, AVIF about 96%. If you pursue ultimate compression ratio and HDR support, choose AVIF; if you prioritize encoding speed and broad compatibility, choose WebP. We recommend providing both formats via the picture tag.
Summary
AVIF is the next-generation image compression standard, based on AV1 intra-frame coding, 50% smaller than JPEG and 20% smaller than WebP, with support for HDR, 12-bit color depth, and alpha channels. Its technical leadership comes from block partitioning prediction (56 directional predictions), multiple transform coding types (DCT/ADST/identity transform), and multi-level loop filtering (CDEF+LR). The trade-off is slower encoding speed (about 4x that of WebP), making it suitable for pre-generation scenarios rather than real-time encoding.
The recommended migration strategy is the picture tag multi-format approach: AVIF first, WebP second, JPEG fallback, balancing compression ratio and 100% compatibility. Remember three points: first, AVIF encodes slowly but decodes fast, suitable for server-side pre-generation; second, HDR content can only use AVIF (WebP/JPEG don't support it); third, use the picture tag to provide all three formats simultaneously, letting the browser automatically select the optimal one.
Related Articles
Need to Compress Files? Try SmartSlim
Built on a self-developed Rust compression engine, supporting 10 categories and 40+ formats including PDF, images, video, Office, and OFD, with local compression that keeps your data on-premises.