AVIF vs WebP in 2026: Which Format Should Your Website Use?

What AVIF Actually Is

AVIF stands for AV1 Image File Format. It uses intra-frame compression from theAV1 video codec— developed by the Alliance for Open Media — applied to still images. AV1 was designed from scratch in 2018 to outperform VP9 and H.265, and AVIF inherits those compression algorithms for photos.

WebP was released by Google in 2010. It uses VP8 video compression for lossy encoding and a custom lossless variant. It improved on JPEG and PNG in most benchmarks at the time, but it predates the AV1 codec by eight years.

The Compression Numbers

According toNetflix AVIF researchand independent testing by theCtrl.blog image codec study, AVIF saves approximately 50% versus JPEG and 20% versus WebP at equivalent visual quality (measured by SSIM and DSSIM metrics).

Browser Support in 2026

AVIF now has over 93% global browser support according toCan I Use. Safari added AVIF support in Safari 16 (released September 2022). Firefox added it in version 93. Chrome has supported it since version 85.

The remaining 7% is primarily old Safari on iOS 15 and below and legacy Edge. A WebP fallback covers all browsers that support WebP but not AVIF. The correct implementation uses the HTML <picture> element:

<!-- Serve AVIF to supported browsers, WebP as fallback, JPEG as last resort -->
<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img
    src="/hero.jpg"
    alt="Hero image showing FileMint converter interface"
    width="1200"
    height="630"
    loading="lazy"
  />
</picture>

Where WebP Still Wins: Encoding Speed

AVIF's compression advantage has a cost: encoder speed. AVIF encoding is significantly slower than WebP at the same quality level.

# Encoding a 2000x1500px photo at quality 80 on an M2 MacBook Pro
# (using sharp npm package, based on libvips)

WebP encode time:  ~35ms   → output: 110 KB
AVIF encode time:  ~450ms  → output: 72 KB

# AVIF is 12x slower to encode, but 35% smaller output
# For real-time browser-side conversion: WebP is more responsive
# For pre-processed build pipeline: AVIF is worth the wait

For a static site build pipeline (Next.js, Astro, Hugo), AVIF encoding runs once at build time — the 450ms per image is invisible to users. But for real-time browser-side image conversion tools like FileMint's compressor, WebP produces faster results with nearly as good compression.

Implementing AVIF in Next.js

Next.js automatically serves AVIF through itsImage componentwhen you configure the formats in next.config.js:

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    // AVIF is tried first; WebP used if browser doesn't support AVIF
    // Falls back to the src format (JPEG/PNG) if neither is supported
  },
};

// In your component — Next.js handles format negotiation automatically
import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Chrome DevTools Network tab showing AVIF image payload"
      width={1200}
      height={630}
      priority // LCP image — load eagerly
    />
  );
}

With this configuration, Next.js sends AVIF to Chrome, Safari 16+, and Firefox 93+. It sends WebP to older browsers. Your source image can remain as JPEG or PNG — conversion happens on-demand and is cached automatically.

Edge Cases and Common AVIF Problems

Small Thumbnails: AVIF Can Be Larger Than WebP

AVIF's compression advantage disappears for very small images. At dimensions below ~100×100 pixels, the AVIF container overhead can make the file larger than an equivalent WebP or even JPEG.

# 32x32px icon compression test
JPEG: 1.2 KB
WebP: 0.8 KB  ← winner for small icons
AVIF: 1.4 KB  ← larger than JPEG at this size!

# Rule of thumb: use WebP (or PNG) for icons and thumbnails below 100px

High-Contrast Images and Color Banding

AVIF at low quality settings (below quality 60) can produce visible color banding on gradients and flat-color graphics. WebP handles these cases more gracefully. For UI screenshots, illustrations, and graphics with large flat areas, test AVIF at quality 75+ before committing to it.

Out-of-Memory Errors with Large AVIF Files

The Sharp image processing library (used in Node.js) has a known memory constraint with AVIF encoding of very large images. Encoding a 6000×4000 AVIF on a server with less than 2GB available memory can cause the process to crash.

// Handle sharp AVIF memory errors gracefully
import sharp from 'sharp';

async function convertToAvif(inputPath: string, outputPath: string) {
  try {
    await sharp(inputPath)
      .resize({ width: 2000, withoutEnlargement: true }) // cap max dimension
      .avif({ quality: 75, effort: 4 }) // effort 4 = balanced speed/quality
      .toFile(outputPath);
  } catch (err) {
    // Fall back to WebP if AVIF encoding fails
    console.warn('AVIF encoding failed, falling back to WebP:', err.message);
    await sharp(inputPath)
      .resize({ width: 2000, withoutEnlargement: true })
      .webp({ quality: 80 })
      .toFile(outputPath.replace('.avif', '.webp'));
  }
}

iOS 15 AVIF Rendering Bug

Safari on iOS 15 has a known bug where AVIF images with transparency (alpha channel) render with incorrect colors. The fix is to always include a WebP fallback in your<picture> tag — which you should be doing anyway. iOS 16 resolved this.

My Recommendation: AVIF for Production, WebP as Fallback

I encode all new production images as AVIF in the build pipeline. The 50% size reduction over JPEG reduces LCP time directly — which is a Google ranking signal under Core Web Vitals.

Use this decision matrix:

If you are using image optimization as part of a broader site speed effort, read our complete image optimization guide for the full checklist — resizing, lazy loading, and responsive srcset setup. And if you are compressing images locally without uploading them, our web performance case study shows the real PageSpeed score improvements from a production site migration.