Why Browsers Decode AVIF With Pixel Variations

When rendering AVIF (AV1 Image File Format) images, different web browsers frequently output minute pixel variations. This article explores the technical reasons behind these discrepancies, which stem primarily from the use of diverse AV1 decoding libraries, variations in color management systems, chroma upsampling algorithms, hardware acceleration differences, and floating-point rounding during YUV-to-RGB conversions.

Diverse Underlying Decoder Implementations

Browsers rely on different underlying software libraries and hardware decoders to process AV1 bitstreams:

• Software Decoders: Chromium-based browsers (Chrome, Edge) and Mozilla Firefox primarily use dav1d, an open-source decoder optimized for speed using assembly code. However, other platforms or older builds may rely on libgav1 or the reference libaom implementation. Each library can use slightly different internal fixed-point approximations or rounding strategies for speed optimizations, leading to slight numeric shifts in the decoded sample values.
• Hardware Acceleration: Modern GPUs feature dedicated silicon for hardware-accelerated AV1 decoding. Hardware decoders from different vendors (Intel, AMD, Nvidia, Apple) often implement rounding, clipping, and deblocking filtering within custom hardware pipelines that do not match software-based decoders to the exact bit.

Chroma Upsampling Differences

Most AVIF images are compressed using 4:2:0 chroma subsampling to minimize file size, meaning color information is stored at half the horizontal and vertical resolution of the brightness (luma) data.

To render the image, browsers must reconstruct the missing color data through chroma upsampling. The exact placement and interpolation of these chroma samples depend on the browser engine's graphics pipeline:

• Interpolation Filters: Engines choose between nearest-neighbor, bilinear, or bicubic filtering to upsample chroma planes.
• Subpixel Alignment: Misalignments by even a fraction of a pixel during chroma positioning alter the calculated RGB values along sharp edges or high-contrast borders.

YUV to RGB Matrix Conversions

AVIF files store data in the YCbCr (YUV) color model, but computer displays require RGB values. Converting YUV to RGB requires matrix multiplication:

\[\begin{bmatrix} R \\ G \\ B \end{bmatrix} = M \times \begin{bmatrix} Y \\ Cb \\ Cr \end{bmatrix}\]

Differences in pixel values arise from how each engine executes this formula:

• Math Precision: Some engines use full single-precision floating-point math in GPU shaders, while others rely on SIMD-optimized integer arithmetic with lower precision to maximize rendering performance.
• Color Range Handling: Discrepancies can occur in how strictly decoders map full-range versus limited-range quantization levels defined in the AVIF metadata.

Color Management Systems and Profiles

Color reproduction is heavily dictated by the operating system and the browser's integrated Color Management System (CMS):

• CMS Engines: Chromium relies on Skia and its internal color pipeline, Firefox uses qcms, and Apple’s WebKit leverages macOS/iOS native ColorSync.
• Transform Approximations: Converting embedded ICC profiles or NCLX (Narrow-range/Full-range, Color Primaries, Transfer Characteristics, Matrix Coefficients) color tags to the display's native profile involves complex 3D Look-Up Tables (LUTs) or parametric transfer functions. Subtle variations in how these curves are interpolated and clipped cause minor pixel value divergences across platforms.

Bit-Depth Truncation and Dithering

AVIF supports 8-bit, 10-bit, and 12-bit color depths. When a 10-bit AVIF is rendered on a standard 8-bit display:

• One engine may perform a straight bit-shift (truncation), dropping the least significant bits.
• Another engine may implement spatial dithering (e.g., Floyd-Steinberg or ordered dithering) to eliminate banding artifacts.

These divergent approaches directly alter individual pixel values in the final rendered output, resulting in the minute variations observed during cross-browser comparisons.