MegaOptim
Back to Blog Guides

AVIF: Everything You Need to Know About the Next-Gen Format

· 10 min read

AVIF: Everything You Need to Know About the Next-Gen Format

The web has relied on JPEG for three decades. WebP improved on it significantly, but a newer format has emerged that pushes compression efficiency even further. AVIF, short for AV1 Image File Format, consistently delivers smaller files at higher visual quality than both JPEG and WebP, making it one of the most compelling image formats available today.

This guide covers how AVIF works under the hood, how it compares to existing formats, where its limitations lie, and how to start using it in production.

If you are still deciding between formats, our guide to choosing the right image format provides a broader comparison across JPEG, PNG, WebP, and AVIF.

What Is AVIF?

AVIF is an image format based on the AV1 video codec. It was developed by the Alliance for Open Media (AOMedia), a consortium that includes Google, Apple, Mozilla, Microsoft, Netflix, Amazon, and others. The format was finalized in 2019 and uses the HEIF container (the same container used by Apple’s HEIC format) to store still images encoded with AV1.

Because AV1 was designed as a royalty-free successor to H.265/HEVC, AVIF inherits that royalty-free status. This matters enormously for web adoption. Unlike HEIC, which carries patent licensing concerns, AVIF can be implemented by any browser vendor, tool developer, or service provider without licensing fees.

The format supports both lossy and lossless compression, alpha transparency, HDR content, wide color gamuts, and animated sequences. It is, on paper, the most capable image format available for the web today.

How AVIF Compression Works

AVIF leverages the same compression techniques that make AV1 an exceptionally efficient video codec, applied to individual still frames. Understanding the basics helps explain why AVIF achieves such strong results.

Intra-frame prediction. AV1 analyzes each image block and predicts its content based on surrounding blocks. The encoder only needs to store the difference between the prediction and the actual pixel data, which is far more compact than storing every pixel directly. AV1 supports a wider range of prediction modes than older codecs, allowing it to model complex textures, gradients, and edges more accurately.

Flexible block partitioning. Rather than using fixed-size blocks like JPEG’s 8×8 grid, AV1 can partition the image into blocks of varying sizes and shapes, including rectangular splits. This allows the encoder to use large blocks for uniform areas (sky, backgrounds) and small blocks for detailed regions (edges, text), allocating bits where they matter most.

Advanced transform coding. After prediction, the residual data is transformed using a variety of transform types (DCT, ADST, and identity transforms) chosen per block. This flexibility means the encoder can pick the most efficient mathematical representation for each region of the image.

In-loop filtering. AV1 applies deblocking filters, constrained directional enhancement, and loop restoration filters as part of the encoding process itself, not as post-processing. This reduces blocking artifacts and ringing at low bitrates more effectively than older formats.

The result of these techniques is that AVIF can represent the same visual content in significantly fewer bytes than JPEG or WebP, particularly at medium to low quality settings where the differences become most apparent.

AVIF vs WebP vs JPEG: How They Compare

The practical question most developers face is whether AVIF actually delivers meaningful improvements over WebP and JPEG. The answer depends on the content type and quality target, but in most scenarios, AVIF wins on file size.

File Size Comparisons

At equivalent perceptual quality (measured by SSIM or DSSIM metrics), typical results look like this:

Metric JPEG WebP AVIF
Relative file size (photos) Baseline 25-35% smaller 40-50% smaller
Relative file size (graphics) N/A (use PNG) 20-30% smaller than PNG 30-40% smaller than PNG
Low-quality performance Visible blocking Better than JPEG Significantly better
High-quality performance Good Good Slightly better

The biggest gains appear at medium to low quality settings. At very high quality (near-lossless), the differences between WebP and AVIF narrow considerably. But for the quality levels typically used on the web — where file size savings matter most — AVIF consistently outperforms both alternatives.

Visual Quality

AVIF handles certain image characteristics particularly well. Smooth gradients, which often show banding in JPEG and sometimes in WebP, render cleanly in AVIF even at aggressive compression levels. Fine textures and subtle color transitions are also preserved more faithfully.

Where AVIF occasionally struggles is with very sharp, high-contrast edges. At low bitrates, some AVIF encoders can introduce slight softening around hard edges. In practice, this is rarely noticeable at the quality levels used for web delivery, but it is worth testing with your specific content.

For a deeper understanding of how lossy compression handles these tradeoffs, see our guide to lossy vs. lossless compression.

Browser Support

AVIF support has reached a level where it is practical for production use with appropriate fallbacks:

  • Chrome — Full support since version 85 (August 2020).
  • Firefox — Full support since version 93 (October 2021).
  • Safari — Full support since version 16.4 (March 2023).
  • Edge — Full support (Chromium-based).
  • Opera — Full support (Chromium-based).

As of late 2024, AVIF is supported by browsers representing over 92% of global web traffic. The main gaps are older browser versions and some niche platforms. For these cases, the <picture> element provides a clean fallback mechanism, which we cover below.

Strengths of AVIF

Superior compression efficiency. This is the headline feature. AVIF produces smaller files than WebP and JPEG at equivalent quality, often by a substantial margin. For bandwidth-constrained users and performance-sensitive applications, this translates directly into faster page loads and lower data costs.

HDR and wide color gamut support. AVIF natively supports 10-bit and 12-bit color depths, along with wide color gamuts like BT.2020 and Display P3. As HDR displays become more common, AVIF is positioned to deliver richer color reproduction than 8-bit formats like JPEG and WebP can offer.

Alpha channel transparency. Unlike JPEG, AVIF supports full alpha-channel transparency with lossy compression. This means you can have transparent images at file sizes far smaller than PNG, combining the best of both worlds.

Film grain synthesis. AV1 includes a dedicated film grain synthesis tool. Rather than encoding noisy film grain pixel by pixel (which is expensive), the encoder can strip the grain, encode the clean image efficiently, and store parameters that allow the decoder to re-synthesize matching grain. This is particularly useful for photographic content that intentionally includes grain.

Royalty-free. No licensing fees or patent concerns for implementors. This removes a significant barrier to adoption that has hampered other next-generation formats.

Limitations of AVIF

Despite its strengths, AVIF has real limitations that affect practical usage.

Slow encoding. AVIF encoding is computationally expensive. Encoding a single image can take several seconds, compared to milliseconds for JPEG. This makes real-time encoding impractical for some workflows and means that server-side conversion needs to be handled asynchronously or pre-processed. The encoding speed has improved substantially with newer versions of libavif and libaom, but it remains the format’s biggest practical drawback.

Maximum dimension limits. The AV1 specification limits a single coded frame to 8193 x 4320 pixels by default. Larger images require tiling, where the image is split into independently coded tiles and stitched back together. While the format supports this, not all encoders and decoders handle tiled images consistently, and very large images (panoramas, high-resolution print assets) can hit edge cases.

Animation quirks. AVIF supports animated sequences using the same mechanism as animated HEIF, but the ecosystem is less mature than for WebP animation or GIF. File sizes for animated AVIF can be excellent, but encoding is slow, and some browsers have historically had inconsistent playback behavior. For short, simple animations, animated WebP remains a safer choice today.

Progressive decoding. JPEG supports progressive loading, where a low-quality version of the full image appears immediately and refines as more data arrives. AVIF does not currently support progressive decoding in any major browser implementation, meaning users see nothing until the full image has loaded. For large hero images on slow connections, this can affect perceived performance.

How to Create AVIF Images

Command-Line Tools

The most common open-source tool for AVIF encoding is libavif, which provides the avifenc command-line utility:

# Convert a PNG to AVIF with quality 30 (lower = better quality, range 0-63)
avifenc --min 20 --max 30 input.png output.avif

# Convert with speed preset (0 = slowest/best, 10 = fastest)
avifenc --speed 6 --min 20 --max 30 input.png output.avif

Other tools with AVIF support include ImageMagick (version 7+), ffmpeg, and Sharp (Node.js).

Using the MegaOptim API

MegaOptim handles AVIF conversion server-side, including the slow encoding step, so you do not need to manage libavif or encoding infrastructure yourself. The API accepts any common image format and can return an optimized AVIF version:

curl -X POST https://api.megaoptim.com/v1/optimize 
  -H "Authorization: Bearer YOUR_API_KEY" 
  -F "[email protected]" 
  -F "convert_to=avif" 
  -F "compression=intelligent"

MegaOptim uses SSIM-based quality optimization to find the best compression level for each image automatically, avoiding the guesswork of manually tuning quality parameters. The API handles encoding asynchronously, so the computational cost of AVIF encoding does not block your application.

For more details on getting started with the API, see our API integration guide.

Serving AVIF with Fallbacks

The recommended approach for serving AVIF on the web is the HTML <picture> element, which lets the browser choose the best supported format:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description of the image">
</picture>

The browser evaluates each <source> in order and uses the first format it supports. Browsers that understand AVIF load the smallest file; older browsers fall back to WebP or JPEG. This approach requires no JavaScript, works with lazy loading, and degrades gracefully.

For sites using a CDN, many modern CDNs support content negotiation via the Accept header, automatically serving the best format without requiring <picture> elements in your HTML.

When to Use AVIF vs WebP

Both AVIF and WebP are strong next-generation formats, and in many cases the best strategy is to serve both via the <picture> element and let the browser decide. But if you need to choose one:

Prefer AVIF when:

  • File size is the top priority and you need maximum compression.
  • Your images include smooth gradients, subtle color transitions, or HDR content.
  • You can afford the encoding time (batch processing, pre-generated assets, or API-based optimization).
  • Your audience primarily uses modern browsers.

Prefer WebP when:

  • Encoding speed matters (real-time or on-the-fly conversion).
  • You are working with animated images and need broad, reliable playback.
  • You need to support a wider range of browsers and devices.
  • Your images are already highly optimized and the marginal gains of AVIF are not significant.

For a comprehensive comparison of all major formats, including PNG and GIF, see our complete WebP guide.

Conclusion

AVIF represents a genuine leap forward in image compression for the web. Its ability to produce smaller files at higher quality than both JPEG and WebP makes it an important tool for any performance-conscious development workflow. The format’s limitations — slow encoding, dimension constraints, and animation quirks — are real but manageable, especially when using server-side optimization services that handle the heavy lifting.

With browser support now covering the vast majority of web traffic, the practical case for adopting AVIF is strong. Pair it with WebP and JPEG fallbacks using the <picture> element, and you can deliver the best possible experience to every user regardless of their browser.