HDR AVIF Tone Mapping in Modern Web Browsers

Tone mapping in modern web browsers allows High Dynamic Range (HDR) AVIF images to display accurately across diverse screens by dynamically compressing their wide color gamuts and extreme luminance levels to fit a target display’s physical capabilities. When a browser loads an HDR AVIF, it parses embedded metadata, evaluates the user's display capabilities via the operating system, maps color primaries and luminance curves, and composites the final pixels alongside standard page elements. This article explains how browsers extract AVIF color profiles, perform luminance conversion, and handle hardware rendering to avoid clipping or washed-out images.

1. Metadata Extraction and Color Space Parsing

An HDR AVIF file wraps AV1 compressed bitstreams within an ISO Base Media File Format (ISOBMFF) container. Inside this structure, the browser's image decoder inspects color signaling—specifically Color Independent Code Points (CICP) or an embedded ICC profile.

CICP metadata defines four critical properties:

• Color Primaries: Typically BT.2020 for HDR, defining the outer boundaries of reproducible color.
• Transfer Characteristics: Usually Perceptual Quantizer (PQ / SMPTE ST 2084) for absolute luminance targeting up to 10,000 nits, or Hybrid Log-Gamma (HLG / BT.2100) for relative luminance.
• Matrix Coefficients: Dictates how luma and chroma channels are derived from RGB components.
• Full vs. Narrow Range: Indicates whether pixel values span the entire 8-, 10-, or 12-bit integer range.

If present, the browser also checks for Content Light Level Information (clli), which specifies Maximum Content Light Level (MaxCLL) and Maximum Frame-Average Light Level (MaxFALL), providing boundaries for the tone mapper to calculate scaling.

2. Querying Display Capabilities

Before tone mapping can occur, the browser queries the host operating system’s graphics stack (such as DirectX on Windows, Metal/Quartz on macOS, or Wayland/X11 on Linux) to determine the hardware environment.

The browser checks:

• Whether the current screen is SDR or HDR-enabled.
• The display's peak brightness (e.g., 400, 600, or 1000+ nits).
• The display’s native color gamut coverage (e.g., sRGB, DCI-P3, or BT.2020).
• The operating system's configured SDR white point level (often calibrated between 80 and 240 nits).

3. Luminance Adaptation and Tone Curves

Once both the source metadata and destination capabilities are known, the browser executes tone mapping through its graphics pipeline (such as Chromium’s Skia engine or Gecko's WebRender).

Rendering on an SDR Display

When displayed on an SDR screen, the browser must compress a wide range of luminance (often 0–1,000+ nits) into standard dynamic range (typically 0–100 or 0–200 nits).

• Linear conversion without tone mapping would clip highlights, turning nuanced clouds or light sources into flat white patches.
• The browser transforms the non-linear PQ or HLG values into linear light space.
• A tone-mapping curve (such as an S-curve, Reinhard variant, or ACES-based algorithm) compresses high-luminance values gradually (known as a "soft knee" roll-off). This protects mid-tone contrast while maintaining structural detail inside specular highlights.
• The color space is transformed from BT.2020 down to sRGB or Display P3 using gamut-mapping techniques to prevent out-of-gamut hue shifts.

Rendering on an HDR Display

When rendered on an HDR monitor, full compression down to SDR levels is unnecessary. However, adaptation is often still required:

• If an AVIF image is mastered to 1,000 nits and the monitor can only reach 600 nits, the browser applies highlight roll-off between 600 and 1,000 nits to avoid hard clipping at the display’s ceiling.
• Mid-tones and shadows map 1:1 to absolute physical brightness levels dictated by the PQ curve.
• For HLG sources, the browser applies the HLG Optical-Electro Transfer Function (OETF) and scales scene luminance proportionally to the screen's peak capability.

4. Compositing with SDR Web Content

Web browsers must render HDR images within an interface that consists primarily of standard dynamic range elements, such as standard CSS colors, text, and SDR graphics.

To achieve this:

• macOS (WebKit / Chromium): Utilizes Extended Dynamic Range (EDR). The OS treats SDR white as a baseline value of 1.0. HDR AVIF pixels are assigned floating-point multipliers greater than 1.0, allowing them to render brighter than standard UI elements without washing out surrounding text.
• Windows (Chromium / Firefox): The browser typically surfaces HDR content into an scRGB or HDR10 swap chain managed by the Desktop Window Manager (DWM). The browser shifts SDR web elements to match the user's OS-level "SDR content brightness" slider, giving headroom for the HDR AVIF pixels to reach maximum display luminance.

5. Hardware Acceleration and Shader Execution

Tone mapping operations do not run on the CPU during continuous rendering. Decoded AV1 pixel buffers are uploaded as textures to the GPU. Tone curves, color matrix multiplications, and gamut clipping/compression are performed via fragment shaders in the browser's GPU rasterization pipeline. This ensures that scaling, panning, and rendering HDR AVIF assets maintain 60 to 120 frames per second without incurring latency or battery drain.