AVIF Depth Maps and Dynamic Blur in Web Browsers

AVIF files can store auxiliary depth maps, but web browsers cannot natively use this embedded data to produce dynamic blur effects out of the box. While standard HTML and CSS lack the native mechanisms to decode and map auxiliary depth tracks directly to filters, developers can still achieve real-time, depth-aware blur effects today by combining client-side JavaScript decoders with WebGL or WebGPU shaders.

Understanding Depth Maps in AVIF

The AV1 Image File Format (AVIF) utilizes the ISO Base Media File Format (ISOBMFF) container, which is derived from the HEIF standard. This container specification natively supports auxiliary image items alongside the primary visual item.

An auxiliary item can represent different types of supplementary data, such as an alpha transparency mask, gain maps for High Dynamic Range (HDR), or depth/disparity maps. When an AVIF file includes a depth map, it typically stores a monochrome representation of scene depth, where pixel brightness corresponds to the distance between the camera and the captured object.

Current Browser Support and Limitations

Modern web browsers implement support for basic AVIF rendering, decoding the primary visual track and standard alpha transparency. However, browser engines (such as Chromium, Gecko, and WebKit) do not expose auxiliary depth map items to the DOM, CSS, or standard HTML rendering pipelines.

Key limitations include:

• No Native CSS Integration: Standard CSS filters like filter: blur() apply a uniform Gaussian blur across an entire element. There is no standard CSS property or filter function designed to parse an embedded depth map to apply a variable, distance-based blur (such as a simulated bokeh or depth-of-field effect).
• Element Abstraction: When an AVIF is loaded via an <img> tag or drawn to a 2D canvas context via drawImage(), the browser’s internal image decoder discards or ignores auxiliary items that are not designated as standard alpha channels.

How to Achieve Dynamic Depth Blur Today

Even without native browser automation, developers can implement dynamic depth blur using modern web technologies:

1. Custom Client-Side Decoding: By utilizing WebAssembly (Wasm) ports of decoders like libavif, developers can parse the underlying ISOBMFF container of an AVIF file directly. This enables the programmatic extraction of both the primary RGB image item and the auxiliary depth map item as raw pixel arrays.
2. GPU Processing with WebGL or WebGPU: Once extracted, both the color image and the depth map can be uploaded as separate textures to the GPU.
3. Custom Fragment Shaders: A fragment shader can evaluate the depth texture to determine blur intensity per pixel. By defining a focal point and a focal range (aperture), the shader can sample neighboring pixels using an algorithm like a disc or hexagonal blur to simulate a realistic camera lens blur. Moving the focal point via JavaScript allows users to click or hover to shift focus dynamically across different depths in the image.

Future Outlook

For dynamic depth-of-field effects to become mainstream on the web without heavy JavaScript overhead, browser vendors and standards bodies (such as the W3C) would need to standardize APIs that expose auxiliary image tracks. Emerging technologies like the WebCodecs API offer lower-level access to media decoders, which may eventually provide a more performant bridge between container-level depth maps and browser-based rendering pipelines. Until direct CSS support exists, implementing dynamic blur using AVIF depth data remains entirely reliant on custom WebGL post-processing workflows.