Original URL: https://www.uglypear.com/en/blog/avif-format-guide.html
What is AVIF? This article provides a complete guide to the AVIF image format — based on AV1 encoding, 50% smaller than JPEG and 20% smaller than WebP, with a 4-format comparison test of AVIF vs WebP vs JPEG vs PNG and a browser compatibility migration guide. AVIF represents the next generation of image compression, offering superior compression efficiency for modern web applications.
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 essentially packages AV1's intra-frame coding into a standalone image container format.
The core advancements of AVIF 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 ratios (10%–30% smaller at equivalent quality); and support for richer coding tools (directional prediction, more flexible block partitioning). The tradeoff is slower encoding speed — AVIF encoding takes about 3–5 times longer than WebP.
| Feature | AVIF | WebP | JPEG | PNG |
|---|---|---|---|---|
| Release Year | 2019 | 2010 | 1992 | 1996 |
| Underlying Codec | AV1 Intra | VP8 Intra | DCT | DEFLATE |
| Lossy Compression | Yes | Yes | Yes | No |
| Lossless Compression | Yes | Yes | No | Yes |
| Alpha Channel | Yes | Yes | No | Yes |
| HDR/Wide Color Gamut | Yes (12-bit) | No (8-bit) | No (8-bit) | No (8/16-bit) |
| Animation Support | Yes | Yes | No | APNG extension |
| Licensing | Free & Open Source | Free & Open Source | Free | Free |
2. AVIF Technical Principles Explained
AVIF's compression pipeline consists of three core stages: partition prediction, transform coding, and loop filtering. Each stage inherits the advanced tools from AV1 video coding, which is the fundamental reason AVIF's compression efficiency far exceeds that of JPEG.
AV1 divides the image into coding blocks (up to 128×128), and each block can be recursively subdivided into smaller sub-blocks (down to 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).
The residual after prediction is transformed from the spatial domain to the frequency domain using transform coding, and high-frequency coefficients are quantized to achieve compression. AV1 supports multiple transform types, offering more flexibility than JPEG's single DCT.
The reconstructed image after quantization produces blocking artifacts and ringing artifacts, which AV1 repairs using multi-level loop filtering. This is the key reason AVIF's image quality at low bitrates is significantly better than JPEG.
For a comprehensive overview of image compression, refer to the Image Compression Guide: JPG/PNG/WebP Format Comparison.
| Prediction Type | Principle | Applicable Regions | vs JPEG |
|---|---|---|---|
| Intra Prediction | Predicts using adjacent encoded pixels | Smooth areas/gradients | JPEG has no prediction, encodes everything |
| Directional Prediction | 56 directional angle predictions | Edges/texture directions | JPEG has no directional prediction |
| Palette Prediction | Uses color palette indexing | Text/icons/animation | JPEG lacks this tool |
| Block Copy | Copies other regions within the image | Repeated textures | JPEG lacks this tool |
3. Practical Case: Four-Format Comparison Test
We compare the file size, image quality, and encoding time of AVIF, WebP, JPEG, and PNG using the same test image. Test sample: 1920×1080 natural landscape photo, 24-bit true color, original BMP approximately 5.93MB.
Document characteristics: 1920×1080, 24-bit color, containing sky gradients, foliage textures, and building edges, original BMP 5.93MB.
File size and quality comparison (target SSIM 0.92):
Results: At equivalent quality (SSIM 0.92+), AVIF is only 210KB — 50% smaller than JPEG and 29.5% smaller than WebP. PNG has the highest lossless quality but the largest file size (4.82MB), making it unsuitable for photo content. AVIF performs particularly well in foliage texture and sky gradient areas — JPEG shows visible color blocking at low bitrates, while AVIF has almost no visible artifacts.
AVIF's encoding time is 15 times that of JPEG and 4 times that of WebP, because AV1's partition prediction and transform selection require extensive rate-distortion optimization calculations. However, AVIF's decoding speed is only 2 times slower than JPEG — minimal impact on the browsing experience. It is recommended to pre-generate AVIF images on the server side (encode at build time) rather than encoding in real time.
| Transform Type | Block Size | Applicable Scenarios | Advantage |
|---|---|---|---|
| DCT | 4×4 to 64×64 | General purpose | Classic transform, energy compaction |
| 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 | Skips transform, direct quantization |
| Recursive Transform | Combined | Complex textures | Two-level transform improves energy compaction |
4. Browser Compatibility and Migration Strategy
AVIF's browser compatibility has essentially matured after 2023, but fallback solutions are still needed for older browsers. The table below lists the support status of major browsers.
Global browser support for AVIF is approximately 96%, with only IE and very old browser versions lacking support. The recommended migration strategy uses the HTML5 picture tag for progressive enhancement.
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 normal display on older browsers. For a complete web image optimization solution, refer to Web Image Optimization: 50% Performance Improvement in Practice.
| Filter Stage | Function | Processing Order | Effect |
|---|---|---|---|
| CDEF (Constrained Directional Enhancement Filter) | Removes block boundary artifacts | Stage 1 | Smooths block boundaries |
| LR (Loop Restoration Filter) | Wiener filter/Self-guided filter | Stage 2 | Restores detail textures |
| Super-resolution Reconstruction | Reconstructs from low-resolution frames | Stage 3 | Enhances high-frequency details |
5. Format Selection Guide for Different Scenarios
While AVIF is excellent, it's not suitable for all scenarios. Format selection for different scenarios requires comprehensive consideration of compression ratio, compatibility, encoding speed, and feature requirements.
A general principle: for static content pre-generation, choose AVIF (optimal size); for real-time generation, choose JPEG/WebP (speed priority); for lossless requirements, choose PNG; for HDR content, choose AVIF (the only option). When using SmartSlim for batch conversion, you can automatically generate multiple formats (AVIF+WebP+JPEG), covering all compatibility scenarios in one pass.
| Format | Parameters | File Size | vs Original | SSIM Quality | vs JPEG |
|---|---|---|---|---|---|
| PNG (Lossless) | DEFLATE Maximum | 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% |
6. Frequently Asked Questions (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 files 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, natively supported by major browsers including Chrome and Firefox.
Q2: How much smaller is AVIF compared to JPEG?
At equivalent quality (SSIM 0.9 or above), AVIF is approximately 50% smaller than JPEG. For example, a 1920×1080 photo: JPEG at 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 even greater advantages at high quality (30%+ smaller). AVIF's compression advantage comes from AV1's more advanced predictive coding and transform tools, performing particularly well in areas with complex textures.
Q3: How is AVIF's browser compatibility?
As of 2026, AVIF is supported by major browsers: Chrome 85+ (September 2020), Firefox 93+ (October 2021), Edge 92+ (2021), and Safari 16.4+ (March 2023). Global browser support rate is approximately 96%. Older browsers that don't support AVIF can be provided with JPEG/WebP fallback via the picture tag. It's recommended to use
<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, while WebP only supports 8-bit SDR; Encoding speed: WebP is faster than AVIF (AVIF encoding is slower); Compatibility: WebP support rate 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. It's recommended to provide both formats simultaneously using the picture tag.
| Format | Encoding Time | Decoding Time | Speed Rating | Applicable Scenarios |
|---|---|---|---|---|
| JPEG | 18ms | 8ms | Extremely fast | Real-time encoding |
| WebP | 65ms | 15ms | Fast | Web real-time |
| AVIF | 280ms | 22ms | Slow (encoding)/Fast (decoding) | Pre-generation |
| PNG | 120ms | 12ms | Medium | Lossless scenarios |
7. Summary
AVIF is the next-generation image compression standard, based on AV1 intra-frame coding, 50% smaller than JPEG and 20% smaller than WebP, while also supporting HDR, 12-bit color depth, and alpha channels. Its technical leadership comes from partition prediction (56 directional predictions), multiple transform coding types (DCT/ADST/Identity Transform), and multi-level loop filtering (CDEF+LR). The tradeoff is slower encoding speed (about 4 times 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 encoding is slow but decoding is 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.
| 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% | Fallback required |
| Migration Approach | 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 | 100% | Medium | ★★★★☆ |
| JPEG only | No migration | 100% | Very low | ★☆☆☆☆ |
| Scenario | Recommended Format | Reason | Size Reference |
|---|---|---|---|
| E-commerce product images | AVIF (primary)+JPEG (fallback) | Pursues ultimate size, improves loading speed | JPEG 420KB→AVIF 210KB |
| News content | 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 | Size not a concern |
| Social media | AVIF or WebP | Small size, fast sharing | Both work |
| Email embedding | JPEG | Email client compatibility priority | 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 |
FAQ
Q: What is AVIF and why is it better than JPEG?
A: AVIF (AV1 Image File Format) is a next-generation image format based on the AV1 video codec. It achieves 50% smaller files than JPEG at equivalent visual quality, and 20% smaller than WebP. It supports HDR (High Dynamic Range), wide color gamut (BT.2020), 10/12-bit color depth, transparency, and lossless compression. AVIF is the successor to JPEG, offering dramatically better compression efficiency for modern web and mobile applications.
Q: How does AVIF compare to WebP?
A: AVIF is 20-30% more efficient than WebP at equivalent quality. For a typical photo: WebP at quality 80 produces a 40KB file. AVIF at equivalent quality produces a 30-32KB file. AVIF also supports HDR and 10-bit color, which WebP does not. However, WebP has broader browser support (95%+ vs 90%+ for AVIF). AVIF encoding is also slower than WebP. For new projects, AVIF is recommended for forward compatibility.
Q: What is the browser compatibility of AVIF?
A: AVIF is supported by: Chrome 85+ (2020), Firefox 93+ (2021), Opera 71+ (2020), Safari 16.1+ (2022). Edge 121+ (2024). Overall support: ~90% of global browser users. For older browsers, use the element with fallback to WebP or JPEG. SmartSlim automatically generates AVIF with fallbacks, ensuring compatibility across all browsers while delivering AVIF to modern browsers.
Q: How to migrate existing images to AVIF?
A: Migration steps: 1) Use SmartSlim or avifenc to convert JPEG/PNG to AVIF. 2) Update HTML with elements:
<picture><source srcset="image.avif" type="image/avif"><source srcset="image.webp" type="image/webp"><img src="image.jpg" alt=""></picture>
. 3) Test on all browsers. 4) For CDN delivery, enable automatic AVIF conversion. SmartSlim's batch conversion tool handles the entire migration process, generating AVIF + WebP + JPEG variants with responsive markup.
Summary
The key to avif format guide: the next-generation... lies in identifying the sources of bloat and handling them accordingly. Choose the right compression strategy based on your scenario, prioritizing the largest contributors. SmartSlim can handle all compression steps in one click.
Related:
Top comments (0)