AVIF Images: The Format 95% of Browsers Support That Nobody Uses

WebP was the image format revolution. AVIF is the image format revolution that nobody noticed.

AVIF (AV1 Image File Format) delivers 30-50% smaller file sizes than WebP at the same visual quality. It supports HDR, wide color gamut, transparency, and animation. As of April 2026, browser support exceeds 95% globally — Chrome, Firefox, Safari, Edge, Opera, and Samsung Internet all support it. And yet, usage data from the HTTP Archive shows that fewer than 8% of websites serve AVIF images.

After converting every image across our 52-site network to AVIF with WebP fallback, we reduced total image payload by 41% compared to WebP-only serving. The Lighthouse performance scores improved. The bandwidth costs (already near zero on free hosting) dropped further. And the visual quality was indistinguishable from the original.

Why AVIF Is Better Than WebP

WebP was developed by Google in 2010. It was a significant improvement over JPEG and PNG — roughly 25-30% smaller files at equivalent quality. But WebP is based on VP8 video codec technology that is now over 15 years old.

AVIF is based on the AV1 video codec — a modern, royalty-free codec developed by the Alliance for Open Media (Google, Apple, Microsoft, Netflix, Mozilla, and others). The compression improvements are substantial:

The file size difference is the headline. A blog hero image that is 180KB in WebP is typically 90-110KB in AVIF. Across a site with 50 images, that is megabytes of bandwidth saved per visitor. Across a 52-site network, it is substantial.

The Encoding Pipeline

AVIF encoding is computationally more expensive than WebP encoding. A single image takes 2-5x longer to encode in AVIF compared to WebP. For build-time processing on a static site, this matters — it adds to your build time.

The solution is to encode AVIF during the image processing step (which typically runs in parallel) and cache the results. For most static sites, images are processed once when added and served from that point forward.

Using Sharp (Node.js):

const sharp = require('sharp');

async function processImage(inputPath) {
  const image = sharp(inputPath);

  // Generate AVIF
  await image
    .avif({ quality: 65, effort: 4 })
    .toFile(inputPath.replace(/\.\w+$/, '.avif'));

  // Generate WebP fallback
  await image
    .webp({ quality: 75 })
    .toFile(inputPath.replace(/\.\w+$/, '.webp'));
}

The quality parameter for AVIF can be lower than WebP (65 vs 75) while producing equivalent visual quality — that is where the file size savings come from. The effort parameter (0-9) controls encoding speed vs compression ratio. A value of 4 balances build time with file size.

Using the avif CLI tool:

# Convert a single image
avifenc input.png output.avif --min 20 --max 35 --speed 6

# Batch convert a directory
for f in images/*.png; do
  avifenc "$f" "${f%.png}.avif" --min 20 --max 35 --speed 6
done

Using Eleventy Image plugin:

const Image = require("@11ty/eleventy-img");

async function imageShortcode(src, alt) {
  let metadata = await Image(src, {
    widths: [600, 900, 1200],
    formats: ["avif", "webp"],
    outputDir: "./_site/images/",
    urlPath: "/images/"
  });

  return Image.generateHTML(metadata, {
    alt,
    sizes: "(min-width: 900px) 900px, 100vw",
    loading: "lazy",
    decoding: "async"
  });
}

The Eleventy Image plugin automatically generates <picture> elements with AVIF as the primary source and WebP as the fallback. The browser selects the best format it supports.

The <picture> Element

Serving AVIF with graceful fallback requires the <picture> element:

<picture>
  <source srcset="/images/hero.avif" type="image/avif" />
  <source srcset="/images/hero.webp" type="image/webp" />
  <img src="/images/hero.jpg" alt="Description" loading="lazy" decoding="async" />
</picture>

The browser evaluates sources top-to-bottom and uses the first format it supports. In 2026, 95% of browsers take the AVIF source. The remaining 5% (older mobile browsers, specialized environments) fall back to WebP. The JPEG fallback is a safety net that is almost never used.

The Network-Wide Results

Converting 4,200+ images across 52 sites from WebP-only to AVIF-primary:

File size reduction:

• Average image file size decreased from 142KB (WebP) to 84KB (AVIF): 41% reduction
• Total image payload per page decreased from 680KB to 401KB average
• Sites with hero images saw the largest improvement — hero images dropped from 220KB to 120KB average

Performance metrics:

• Largest Contentful Paint (LCP) improved by 0.4 seconds on average across all sites
• Total page weight decreased by 35% on image-heavy pages
• Lighthouse Performance score increased 2-5 points on mobile assessments

Build time impact:

• AVIF encoding added approximately 45 seconds to the build process for a site with 50 images
• Using the Eleventy Image plugin's caching, images are only re-encoded when they change — so the build time increase is only on initial encoding or when images are updated

AVIF for Data Visualizations

Data visualizations — charts, graphs, infographics — benefit disproportionately from AVIF. These images typically contain large areas of flat color, sharp text, and clean geometric shapes. AVIF's compression algorithm handles these characteristics significantly better than WebP.

In our testing with real data visualization images:

• Bar charts: AVIF was 52% smaller than WebP at the same quality
• Line charts: AVIF was 48% smaller than WebP
• Heat maps: AVIF was 39% smaller than WebP
• Infographics with text: AVIF was 55% smaller than WebP

For a data-heavy site that publishes weekly visualizations, the cumulative bandwidth savings are substantial. And because data visualizations are often the largest images on analysis pages, the LCP improvement is immediate.

Common Concerns

"AVIF encoding is too slow for CI/CD." It was, in 2022. Modern encoding libraries (Sharp, libavif) have improved encoding speed by 3-4x since initial release. With effort/speed parameters tuned appropriately, encoding a typical blog image takes 1-3 seconds. The caching system ensures this cost is paid once per image.

"Safari support was spotty." Safari added full AVIF support in Safari 16.4 (March 2023) on macOS and iOS. By April 2026, the remaining Safari users without AVIF support are on devices that also lack WebP support — they fall through to JPEG regardless.

"The quality difference is visible." At very aggressive compression settings (quality below 40), AVIF can produce artifacts that differ from WebP artifacts. At the quality settings we use (60-70), visual quality is indistinguishable in blind testing. We verified this with A/B tests on 200+ images — no user reported quality issues after the conversion.

"My hosting does not support AVIF content types." If you are serving static files from Netlify, Cloudflare Pages, Vercel, or GitHub Pages, AVIF is already supported with correct Content-Type: image/avif headers. No configuration needed.

The Implementation Checklist

For a single site:

1. Install Sharp or the Eleventy Image plugin in your build pipeline
2. Configure AVIF as the primary output format with WebP fallback
3. Update your image templates to use <picture> elements
4. Set quality parameters: AVIF quality 60-70, WebP quality 75
5. Build and compare file sizes before and after
6. Verify visual quality on mobile and desktop
7. Deploy and monitor LCP improvements in Search Console

For a site network with shared templates, steps 1-3 are done once in the shared codebase. The conversion propagates to all sites automatically.

The complete image optimization pipeline — including AVIF encoding, responsive image generation, IPTC metadata embedding, and the stock photo distribution strategy — is covered in The $100 Network by J.A. Watte. Chapter 18 covers image performance across a multi-site network.

For the image SEO fundamentals (alt text, file naming, sitemap inclusion), start with The $20 Agency, Chapter 9. This article builds on those basics with network-scale image optimization from The $100 Network.