How to Set Up AVIF Fallbacks in HTML Email

AVIF delivers superior compression and image fidelity compared to legacy formats, but inconsistent rendering support across major email clients prevents it from being used as a standalone solution. To leverage the bandwidth savings of AVIF without sacrificing deliverability or visual rendering, email marketers must implement multi-format fallback strategies. This article details practical methods for layering AVIF, WebP, and traditional formats (PNG or JPEG) using the HTML5 <picture> tag, conditional markup for desktop Outlook, and CSS-based background replacements.

The Multi-Format Strategy: AVIF, WebP, and JPEG/PNG

A reliable multi-format delivery pipeline operates on progressive enhancement: deliver the smallest, highest-quality format (AVIF) to modern clients, fall back to WebP for intermediate clients, and serve universal formats (JPEG or PNG) to legacy clients.

Because email rendering engines vary dramatically—from WebKit in Apple Mail to the Microsoft Word engine in desktop Outlook—relying solely on a standard <img> tag with an AVIF source will lead to broken image icons for a large portion of your subscriber base.

Implementing the <picture> Element

The primary method for serving AVIF with fallbacks is the HTML5 <picture> element. Modern webmail clients and mobile apps that support AVIF evaluate the <source> elements sequentially and render the first supported MIME type.

<picture>
  <!-- AVIF for fully compatible clients -->
  <source srcset="https://example.com/hero.avif" type="image/avif">
  <!-- WebP for clients supporting intermediate modern formats -->
  <source srcset="https://example.com/hero.webp" type="image/webp">
  <!-- Universal fallback for legacy engines -->
  <img src="https://example.com/hero.jpg" alt="Campaign visual" width="600" height="300" style="display: block; width: 100%; max-width: 600px; height: auto;">
</picture>

When structuring this block:

Handling Microsoft Outlook Desktop

Desktop versions of Microsoft Outlook (2007 through 2021) utilize the Word rendering engine, which does not recognize the <picture> element or modern image formats. Outlook often attempts to parse the tags incorrectly, potentially causing layout collapse or rendering blank spaces.

To prevent Outlook rendering issues, wrap the <picture> element in conditional comments so that Outlook only sees standard HTML:

<!--[if !mso]><!-->
<picture>
  <source srcset="https://example.com/hero.avif" type="image/avif">
  <source srcset="https://example.com/hero.webp" type="image/webp">
<!--<![endif]-->
  <img src="https://example.com/hero.jpg" alt="Campaign visual" width="600" height="300" style="display: block; width: 100%; max-width: 600px; height: auto;">
<!--[if !mso]><!-->
</picture>
<!--<![endif]-->

In this pattern, non-Outlook clients process the full <picture> element with AVIF and WebP sources, while Outlook bypasses the modern markup entirely and renders only the standard <img> tag with the JPEG fallback.

Configuring Fallbacks for CSS Background Images

When using images as backgrounds rather than inline content, the <picture> element cannot be used. Instead, use CSS cascading rules paired with @supports queries in an embedded <style> block.

.hero-cell {
  /* Baseline fallback for all clients */
  background-image: url('https://example.com/bg.jpg');
}

@supports (background-image: url('https://example.com/test.webp')) {
  .hero-cell {
    background-image: url('https://example.com/bg.webp');
  }
}

@supports (background-image: url('https://example.com/test.avif')) {
  .hero-cell {
    background-image: url('https://example.com/bg.avif');
  }
}

Email clients that strip <style> blocks or ignore @supports will retain the default JPEG declared in the primary rule.

Verification and Testing

Before deploying campaigns featuring AVIF: