1. Home
2. web
3. Next.js Image Optimization: From Setup to Advanced Patterns

Introduction

Images account for over 50% of total webpage bytes on average, making optimization essential for performance. Next.js provides a comprehensive image optimization pipeline through the next/image component and its built-in Image Optimization API. This article covers setup, configuration, and advanced patterns with a focus on Core Web Vitals impact.

The next/image Component

The next/image component extends the HTML <img> element with automatic optimization features: lazy loading, responsive srcset generation, width and height enforcement to prevent Cumulative Layout Shift, blur-up placeholders, and automatic format negotiation.

import Image from "next/image";

function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero banner"
      width={1200}
      height={600}
      priority
    />
  );
}

The priority attribute marks above-the-fold images for preloading, which directly improves Largest Contentful Paint.

Remote Patterns Configuration

External images require explicit domain allowlisting in next.config.js for security.

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "cdn.example.com",
        pathname: "/images/**",
      },
    ],
  },
};

The remotePatterns configuration supports wildcards and path matching for fine-grained control. This prevents arbitrary image optimization requests to unknown domains.

Static Imports vs Dynamic URLs

Local images imported statically receive full optimization automatically. Dynamic URLs from CMS or APIs require manual configuration.

// Static import — full auto-optimization
import hero from "@/public/hero.jpg";
<Image src={hero} placeholder="blur" alt="Hero" />

// Dynamic URL — manual config required
<Image
  src="https://cdn.example.com/image.jpg"
  width={800}
  height={600}
  alt="Remote image"
/>

Responsive Images with sizes Attribute

The sizes attribute tells the browser which image size to load at different viewport widths. Correct configuration can reduce image payload by forty to sixty percent on mobile.

<Image
  src="/image.jpg"
  fill
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  alt="Responsive example"
/>

Derive sizes values from your CSS layout breakpoints for accurate responsive image delivery.

Format Support: AVIF and WebP

Next.js automatically negotiates image formats based on the browser’s Accept header. The priority order is AVIF, WebP, and original format as fallback.

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

AVIF typically provides thirty to fifty percent better compression than WebP at equivalent quality, making it the preferred format for modern browsers.

Core Web Vitals Impact

Proper image optimization directly affects all Core Web Vitals. Use priority on hero images and serve next-gen formats to improve LCP. Always specify width and height or use fill with proper container sizing to prevent CLS. Reduce main thread work by lazy loading below-the-fold images to improve INP.

Conclusion

Next.js’s image optimization pipeline provides a robust foundation for performance-critical image delivery. Configure remote patterns properly, use static imports for bundled assets, implement responsive image strategies with the sizes attribute, and leverage automatic format negotiation for AVIF and WebP. These practices yield excellent Lighthouse scores and real-world performance improvements.