AVIF Backwards Compatibility on Unsupported Devices

AVIF (AV1 Image File Format) provides superior compression efficiency compared to legacy formats, but not all client browsers and operating systems support it natively. To ensure backwards compatibility on unsupported devices, web architectures rely on client-side markup fallbacks, server-side content negotiation, dynamic content delivery network (CDN) transformations, and client-side decoding scripts. These mechanisms allow modern devices to receive optimized AVIF files while seamlessly serving standard JPEG, PNG, or WebP images to older clients without broken assets.

The HTML <picture> Element

The standard client-side method for AVIF backwards compatibility is the HTML5 <picture> element. This approach lets the browser evaluate its own format support before requesting an image file:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description of the image">
</picture>

Browsers parse <source> tags sequentially from top to bottom. If a browser recognizes image/avif, it downloads image.avif and ignores the rest. If it does not support AVIF, it skips to the next source. Unsupported legacy browsers ignore the <picture> and <source> tags entirely and render the standard <img> fallback tag, ensuring universal compatibility.

Server-Side Content Negotiation

Web servers can deliver AVIF transparently under the same URL using HTTP content negotiation via the Accept request header.

  1. When a client requests a resource, it sends an Accept header listing its supported MIME types (e.g., Accept: image/avif,image/webp,image/apng,image/*,*/*).
  2. If image/avif is present in the header, the web server responds with the AVIF version of the file.
  3. If image/avif is absent, the server responds with a fallback format such as JPEG or WebP.
  4. The server must append Vary: Accept to the HTTP response headers to ensure intermediary caches and CDNs do not mistakenly serve cached AVIF images to unsupported clients.

CDN and Edge Image Optimization

Modern content delivery networks (such as Cloudflare, Fastly, or dedicated image services like Cloudinary and Imgix) automate backwards compatibility at the network edge.

These services inspect the incoming request's Accept header and user-agent string. When an image request arrives, the CDN dynamically converts the source file into AVIF if the client supports it. If the device does not support AVIF, the CDN generates or delivers a WebP or JPEG fallback automatically. This eliminates the need to manually export and manage multiple image formats within the website codebase.

JavaScript and WebAssembly Polyfills

In environments where markup cannot be altered and server-side logic is unavailable, JavaScript and WebAssembly (Wasm) decoders serve as a programmatic fallback.

Libraries such as avif.js intercept image elements or fetch requests for AVIF files. If native AVIF decoding is missing, the script decodes the AVIF binary data using a compiled AV1 decoder (like libdav1d or libgav1) in WebAssembly, then paints the resulting pixels onto an HTML <canvas> element or converts them into a raw blob URL for display.