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:

  • hdlr (Handler Box): Identifies the metadata handler type as pict (picture).
  • pitm (Primary Item Box): Specifies the ID of the master, full-resolution image item.
  • iloc (Item Location Box): Provides the byte offsets and lengths of the image payload data stored elsewhere in the file (typically in the mdat or Media Data box).
  • iinf (Item Information Box): Contains infe (Item Info Entry) boxes that describe the characteristics and MIME types of each image item.

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:

  • The base resolution preview is registered as its own item in the iinf box.
  • The intermediate and full-resolution layers are stored as distinct child or enhancement items.
  • The iref box establishes a directed relationship between these items using reference types such as base (indicating that an enhancement item depends on a base item) or prog (explicitly denoting progressive progression).

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.