Modern Image Formats: AVIF vs WebP for Next.js

For decades, web developers relied on a simple rule: JPEG for photos, PNG for graphics with transparency. Then came WebP, which provided better compression and supported transparency.

But in 2026, the new king of image performance is AVIF (AV1 Image File Format).

What makes AVIF so much better?

AVIF is derived from the AV1 video codec. Its compression algorithms are vastly superior to WebP. In practical tests, an AVIF image is often 50% smaller than a WebP image, and up to 70% smaller than a JPEG, with virtually no perceptible loss in quality.

Furthermore, AVIF handles sharp edges, solid colors, and text within images much better than WebP, which often introduces noticeable artifacts at high compression levels.

Browser Support and Fallbacks

The reason AVIF wasn't adopted overnight was browser support. However, as of 2024, AVIF is supported in all modern browsers (Chrome, Safari, Firefox, Edge).

Regardless, you should never serve an AVIF file directly in a standard <img> tag without a fallback, because legacy browsers will fail to render it.

You must use the HTML <picture> element:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Beautiful landscape">
</picture>

The browser will read this top-down and load the first format it supports.

Automatic Implementation in Next.js

If you are using Next.js, you do not need to manually create AVIF files or write <picture> tags. The native next/image component handles image optimization on the fly.

To enable AVIF support, simply update your next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
}
module.exports = nextConfig

With this one line of config, Next.js will negotiate with the requesting browser. If the browser supports AVIF, Next.js will dynamically compress the source image to AVIF, cache it, and serve it. This single configuration change can shave hundreds of kilobytes off your page weight, massively improving your Largest Contentful Paint (LCP) score.