Progressive AVIF Resolution Layers Explained

Progressive AVIF images allow web browsers and decoders to render low-resolution previews that progressively sharpen to full fidelity as the file downloads. This functionality is made possible by coupling the scalable coding tools of the AV1 video codec with the structural hierarchy of the ISO Base Media File Format (ISOBMFF). The container organizes and signals these distinct resolution tiers through standardized boxes, bitstream configurations, and item references, enabling decoders to reconstruct each resolution step systematically.

The Foundation: ISOBMFF Container Architecture

AVIF files inherit their organizational structure from the High Efficiency Image File Format (HEIF), which is based on ISOBMFF. At the top level, non-timed still image assets reside within the meta (Metadata) box.

Inside the meta box, visual data is organized into discrete structural components:

Structuring Layers via AV1 Spatial Scalability

The primary method for embedding multiple resolution layers inside an AVIF container leverages AV1's native spatial scalability. Rather than storing entirely separate, redundant image files, the container encapsulates an AV1 bitstream divided into discrete Open Bitstream Units (OBUs).

Within this bitstream:

  1. Sequence Header OBU: Defines the overall stream profile and sets up Operating Points (OP). The header contains scalability metadata that explicitly signals how many spatial layers exist and how they are configured.
  2. Base Layer (Spatial ID 0): Encoded at a fraction of the final dimensions (such as 1/4 or 1/2 resolution). This layer is self-contained and decodable on its own as a keyframe.
  3. Enhancement Layers (Spatial ID > 0): Encoded as dependent frames carrying residual pixel information, high-frequency details, or higher spatial dimensions. These layers rely on inter-layer prediction referencing the decoded base layer.

When packed as a single progressive item, the entire layered AV1 payload sits inside the mdat box, but the ISOBMFF container defines property boxes within iprp (Item Properties) that declare the progressive structure to parsers before the rest of the payload is read.

Layer Representation via Item References

Alternatively, progressive AVIF files can split resolution steps into distinct items tracked directly at the container level using the iref (Item Reference) box.

In this structure:

By decoupling layers into separate items, the file's iloc box can specify non-contiguous byte ranges within mdat. This allows the base layer bytes to be placed immediately after the container headers at the beginning of the file, ensuring the client receives the lowest-resolution frame within the initial network packets.

Parsing and Incremental Decoding

When a progressive AVIF file streams over a network:

  1. The parser reads the container header (ftyp, meta, iloc, and iprp).
  2. It detects the scalability configuration through the primary item properties and the AV1 sequence header.
  3. As the first segment of mdat arrives, the decoder extracts the base layer OBU (Spatial ID 0) or the item defined by the initial iloc extent.
  4. The decoder reconstructs and scales the base image to the target display dimensions, presenting an immediate preview.
  5. As subsequent bytes arrive, the decoder consumes the higher-tier spatial OBUs, applying the differential residual data until the full target resolution defined by the primary item is completely rendered.