Introduction

Images 계정 for over 50% of total webpage bytes on average, making 최적화 essential for 성능. Next.js provides a comprehensive image 최적화 pipeline through the next/image component and its built-in Image 최적화 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 최적화 기능: lazy loading, 반응형 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 최적화 requests to unknown domains.

Static Imports vs Dynamic URLs

Local images imported statically receive full 최적화 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"
/>

반응형 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 반응형 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 최적화 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 최적화 pipeline provides a robust foundation for 성능-critical image delivery. Configure remote patterns properly, use static imports for bundled assets, implement 반응형 image strategies with the sizes attribute, and leverage automatic format negotiation for AVIF and WebP. These practices yield excellent Lighthouse scores and real-world 성능 improvements.