How to Automatically Serve AVIF in Next.js and Nuxt

Modern web performance relies heavily on next-generation image formats, with AVIF offering significantly higher compression rates than WebP and JPEG without sacrificing visual quality. This guide outlines how to configure Next.js and Nuxt to automatically detect browser support and serve AVIF images to compatible clients, leveraging built-in features and official modules.

Serving AVIF in Next.js

Next.js does not require an external third-party plugin to serve AVIF files. Its built-in image optimization API and <Image /> component handle AVIF conversion and format negotiation out of the box when configured.

To enable automatic AVIF delivery, update your next.config.js file:

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
}

When you list 'image/avif' before 'image/webp', Next.js inspects the client's Accept header. If the browser supports AVIF, the Next.js image optimization server converts the image to AVIF on demand and caches it. If the browser does not support AVIF, Next.js falls back to WebP or the source format.

Serving AVIF in Nuxt

Nuxt achieves automatic AVIF delivery through its official image module, @nuxt/image.

First, install the module:

npm install @nuxt/image

Next, register the module in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    format: ['avif', 'webp'],
  }
})

To automatically serve AVIF to compatible browsers in your templates, use the <NuxtPicture> component rather than <NuxtImg>:

<NuxtPicture src="/images/example.jpg" format="avif,webp" alt="Optimized example" />

The <NuxtPicture> component renders a native HTML <picture> element containing distinct <source> tags for AVIF and WebP, alongside a fallback <img> tag. The browser then evaluates its own capabilities via content negotiation and automatically downloads the AVIF version if supported.