Implementing WebP in Next.js with next/image

Next.js serves WebP automatically through the next/image component. It detects WebP support from the browser's Accept header, converts source images on demand, caches the result, and falls back to the original format when needed. This guide covers the configuration, the key <Image> props, and the LCP-critical settings.

For the underlying HTML pattern this generates, see How to Serve WebP Images in HTML Using the picture Element. For generic React patterns, see WebP in React: Next.js Image & Build Pipelines.

Does Next.js serve WebP automatically?

Next.js serves WebP automatically through the next/image component. The built-in image optimiser converts source JPEG and PNG files to WebP when the requesting browser advertises support via the Accept header. No manual conversion or <picture> markup is required.

The optimiser caches each converted image, so conversion happens once per size and format. Browsers without WebP support receive the original format automatically.

How do you configure image formats in Next.js?

Set the images.formats array in next.config.ts to control which modern formats Next.js generates. WebP is enabled by default. Add AVIF to serve it ahead of WebP, following the same most-preferred-first ordering as the <picture> element.

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    formats: ["image/avif", "image/webp"],
  },
};

export default nextConfig;

With AVIF listed first, the optimiser serves AVIF to browsers that support it and WebP to the rest. See WebP vs AVIF for the trade-off.

How do you use the Image component?

Import Image from next/image and provide src, alt, and either width and height or the fill prop. Next.js generates a responsive srcset and serves WebP automatically. Static imports also supply the dimensions, removing the need to set them manually.

import Image from "next/image";
import hero from "@/public/hero.jpg";

export function Hero() {
  return (
    <Image
      src={hero}
      alt="Product hero"
      sizes="(max-width: 768px) 100vw, 1200px"
      priority
    />
  );
}

A static import gives Next.js the intrinsic dimensions and a blur placeholder, preventing layout shift automatically.

How do you optimise the LCP image in Next.js?

Add the priority prop to the Largest Contentful Paint image. priority preloads the image and disables lazy loading, so the hero renders as early as possible. Use it on exactly one image per page — the one most likely to be the LCP element.

<Image src={hero} alt="..." width={1200} height={675} priority />

Every other image lazy-loads by default, which is correct for below-the-fold content. The reasoning is in Core Web Vitals & Images.

Why does the sizes prop matter?

The sizes prop tells Next.js how wide the image displays, so it generates and serves the smallest adequate WebP. Without sizes, a fill or responsive image defaults to full viewport width and over-fetches on small screens. Accurate sizes values cut bytes on mobile.

<Image src={photo} alt="..." fill sizes="(max-width: 768px) 100vw, 50vw" />

Match the sizes value to the image's actual rendered width at each breakpoint. The mechanics mirror plain HTML — see srcset and WebP: Responsive Images with Format Fallback.

How do you serve WebP for remote images?

Allow the remote host in images.remotePatterns, then pass the remote URL to <Image>. Next.js fetches the source, converts it to WebP, and serves the optimised version from its own domain. This applies WebP conversion to images from a CMS or external store.

// next.config.ts
images: {
  remotePatterns: [
    { protocol: "https", hostname: "cdn.example.com" },
  ],
},

For images already delivered by an image CDN, you may prefer the CDN's own conversion — see WebP and Content Delivery Networks.

Where to go from here

next/image makes WebP the default with almost no effort: configure the formats, set sizes and priority correctly, and Next.js handles conversion, caching, and fallback for you.