AVIF

Definition

AVIF is a modern image format based on the AV1 video codec's intra-frame compression, developed by the Alliance for Open Media. It typically produces smaller file sizes than JPEG or WebP at comparable visual quality, supports both lossy and lossless compression, transparency, animation, and high dynamic range color, and has gained browser support as a royalty-free alternative for delivering compressed images on the web.

Overview

Web image formats have historically lagged behind advances in video compression, since JPEG's core compression technique dates to the late 1980s and had not meaningfully changed even as video codecs grew far more efficient at removing visual redundancy. AVIF addresses this gap by reusing AV1, a modern, royalty-free video codec built by an industry alliance including Google, Mozilla, and other major browser and hardware vendors, applying its single-frame (intra-frame) compression techniques to still images rather than designing a brand-new image-specific codec. Mechanically, an AVIF file wraps a single AV1-encoded frame, or occasionally an animated sequence of frames, inside the HEIF container format. AV1's intra-frame compression uses techniques like larger and more flexible block partitioning, more sophisticated prediction modes, and improved entropy coding compared to JPEG's fixed 8x8 block DCT approach, allowing it to represent the same visual detail with fewer bits, particularly at lower bitrates. AVIF also supports 10 and 12-bit color depth for high dynamic range images, alpha channel transparency, and lossless mode, none of which JPEG can do at all. Among modern image formats, AVIF is most directly compared to WebP, an earlier royalty-free format from Google based on the VP8/VP9 video codecs; AVIF generally compresses better than WebP at the same visual quality, particularly at aggressive compression levels, but AVIF encoding is typically slower and its decoding can be more computationally expensive, which matters for battery-constrained devices decoding many images. Compared to JPEG, AVIF's advantage is substantial in file size but comes at the cost of decades-less-universal support and, historically, less mature tooling in image editing software. In practice, AVIF is used to serve web images at reduced bandwidth without visibly sacrificing quality, particularly for photography-heavy sites where load time affects Core Web Vitals metrics like Largest Contentful Paint. Modern frameworks and image optimization pipelines, including Next.js's built-in image component, can automatically serve AVIF to browsers that support it while falling back to WebP or JPEG for those that don't, letting a site adopt the format without breaking compatibility for older clients. The main trade-offs are encoding time, since producing a well-optimized AVIF file is generally slower than JPEG or WebP encoding, which matters for build pipelines processing large image libraries, and decoding cost on lower-powered devices, where AVIF's more complex decompression can use more CPU and battery than simpler formats. Browser and tooling support, while now broad among major browsers, is still not universal across every legacy client, which is why most production image pipelines serve AVIF with a fallback rather than as the sole format.

Key Concepts

• Based on the royalty-free AV1 video codec's intra-frame compression
• Typically smaller file sizes than JPEG or WebP at similar quality
• Supports lossy and lossless compression in the same format
• Alpha channel transparency and animation support
• 10 and 12-bit color depth for high dynamic range images
• Wrapped in the HEIF container format
• Developed by the Alliance for Open Media industry consortium
• Increasingly automated via image pipelines like Next.js's image component

Use Cases

Frequently Asked Questions

Related in Programming