Native AVIF Decoding in Modern Desktop Browsers

Modern desktop web browsers achieve native AVIF (AV1 Image File Format) decoding by coupling container parsers with highly optimized AV1 video decoders and asynchronous rendering pipelines. Rather than relying on plugins or external extensions, engines like Chromium, Gecko, and WebKit embed dedicated open-source libraries or call system-level media APIs to decompress AV1 payloads. This integration extracts image data from the underlying container, executes multi-threaded and SIMD-optimized decompression, and feeds decoded pixel buffers directly into the browser's compositing engine.

Container Parsing: Unpacking ISOBMFF

AVIF files are structured using the ISO Base Media File Format (ISOBMFF), similar to HEIF. The first stage of decoding involves separating the image metadata from the compressed payload:

1. Header and Box Extraction: The browser parses standard ISOBMFF boxes such as ftyp (file type), meta (metadata), and iloc (item location).
2. Metadata Processing: The browser extracts color profile information, including ICC profiles or CICP (Coding-Independent Code Points) values, alpha channel associations, and image dimensions.
3. Payload Isolation: The primary item data, which consists of an AV1 Open Bitstream Unit (OBU), is isolated and dispatched to the designated AV1 decoder.

Browsers like Chrome and Edge rely on the open-source libavif C library to manage this unpack stage, while Firefox processes container formats through its modular Rust-based mp4parse library before dispatching payloads.

AV1 Decoding Libraries by Browser Engine

Because AVIF uses the intra-frame coding tools of the AV1 video standard, the core decoding process is handled by the browser's underlying AV1 implementation:

• Chromium (Google Chrome, Microsoft Edge, Brave): Chromium utilizes libavif combined with dav1d, an AV1 decoder developed by the VideoLAN and FFmpeg communities. Chromium originally utilized Google's libgav1, but transitioned primarily to dav1d due to its superior multi-threading efficiency and extensive assembly optimizations.
• Gecko (Mozilla Firefox): Firefox also integrates dav1d. The browser routes the parsed AV1 bitstream through its internal media framework, using Rust wrappers to ensure memory safety when interfacing with the C-based decoder.
• WebKit (Apple Safari): Unlike Chromium and Firefox, which bundle their own decoders cross-platform, Safari on macOS offloads AVIF decoding directly to native operating system frameworks, specifically ImageIO and CoreMedia. Native AVIF decoding became active across Apple platforms starting with macOS 13 (Ventura) and iOS 16.

Optimization Strategies: SIMD and Asynchronous Decoding

Still image decoding can introduce page jank if executed synchronously on the main thread. Browsers implement several performance optimizations:

• SIMD Instructions: Decoders like dav1d feature extensive hand-written assembly utilizing AVX-512, AVX2, and SSSE3 on x86_64 architectures, as well as NEON on ARM platforms (such as Apple Silicon). This enables fast software decoding, minimizing CPU cycle usage even in the absence of dedicated AV1 hardware decoding blocks.
• Off-Thread Execution: Decoding occurs on worker threads managed by the browser’s graphics or image-decoding pipeline. The main thread remains responsive to user interactions while large images decompress in the background.
• Hardware Acceleration: If the host system features an AV1-capable GPU or CPU (such as Intel 11th Gen+, AMD RDNA 3+, NVIDIA RTX 30-series+, or Apple M3+), the OS or browser media pipeline can offload AV1 frame decoding directly to silicon, significantly reducing power draw.

Pixel Conversion and Compositor Hand-Off

Once dav1d or the platform framework decompresses the AV1 bitstream, the output typically resides in a planar YUV format (such as YUV 4:2:0, 4:2:2, or 4:4:4), often at 8-bit, 10-bit, or 12-bit color depths:

1. Color Conversion: The browser converts the YUV data to an RGB surface suitable for the display. If the image includes high-dynamic-range (HDR) data or a wide color gamut (such as Display P3 or BT.2020), the browser applies tone mapping and color transformations according to the embedded CICP metadata.
2. Alpha Compositing: If the AVIF image includes transparency, a secondary auxiliary AV1 stream containing the monochrome alpha channel is decoded in parallel and merged with the primary RGB frame.
3. GPU Upload: The resulting bitmap buffer is transferred to the browser’s rendering engine (Skia in Chromium, WebRender in Firefox, or Metal/Quartz in Safari) as a GPU texture, allowing the compositor to draw the final element onto the screen.