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 aspict(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 themdator Media Data box).iinf(Item Information Box): Containsinfe(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:
- 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.
- 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.
- 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
iinfbox. - The intermediate and full-resolution layers are stored as distinct child or enhancement items.
- The
irefbox establishes a directed relationship between these items using reference types such asbase(indicating that an enhancement item depends on a base item) orprog(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:
- The parser reads the container header (
ftyp,meta,iloc, andiprp). - It detects the scalability configuration through the primary item properties and the AV1 sequence header.
- As the first segment of
mdatarrives, the decoder extracts the base layer OBU (Spatial ID 0) or the item defined by the initialilocextent. - The decoder reconstructs and scales the base image to the target display dimensions, presenting an immediate preview.
- 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.