Next.js Image Optimization: The Complete Guide to next/image

Why Image Optimization Is Non-Negotiable

Images are the single biggest contributor to page weight. The average webpage is about 2MB, and images account for over half of that. The Next.js next/image component handles the hard parts automatically: WebP/AVIF conversion, responsive sizes, lazy loading, and preventing layout shift.

Basic Usage and Common Mistakes

import Image from 'next/image';

// CORRECT: always provide width and height for static images
function ProductCard({ product }) {
  return (
    <Image
      src={product.imageUrl}
      alt={product.name}
      width={400}
      height={300}
      className="rounded-lg"
    />
  );
}

// For above-the-fold images, disable lazy loading
function HeroImage() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority  // disables lazy load, adds preload link
    />
  );
}

The most common mistake: using priority on every image. Only use it for LCP (Largest Contentful Paint) candidates — the main image visible on initial load.

Fill Mode for Responsive Containers

When you don't know exact dimensions, use fill with a positioned container:

function ArticleHero({ src, alt }) {
  return (
    <div className="relative aspect-video w-full">
      <Image
        src={src}
        alt={alt}
        fill
        sizes="100vw"
        className="object-cover"
      />
    </div>
  );
}

The Critical sizes Prop

The sizes prop tells the browser which image size to download before layout is computed. Getting this right can reduce image payload by 50%:

// For a full-width image on mobile, half on desktop
<Image
  src="/article-hero.jpg"
  alt="Article hero"
  fill
  sizes="(max-width: 768px) 100vw, 50vw"
/>

// For a grid of 3 on desktop, 1 on mobile
<Image
  src={item.image}
  alt={item.title}
  width={400}
  height={300}
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
/>

Configuring Remote Images

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
      },
      {
        protocol: 'https',
        hostname: 'cdn.yourapp.com',
        pathname: '/uploads/**',
      },
    ],
    // Optional: enable AVIF for even better compression
    formats: ['image/avif', 'image/webp'],
    // Cache optimized images longer
    minimumCacheTTL: 60 * 60 * 24 * 30, // 30 days
  },
};

Using a Custom CDN Loader

If you use Cloudinary or another image CDN, write a custom loader to get even better optimization:

// lib/cloudinary-loader.js
export function cloudinaryLoader({ src, width, quality }) {
  const params = [
    'f_auto', // automatic format (AVIF if supported)
    'c_limit', // don't upscale
    ,
    ,
  ];
  return ;
}

// Usage
<Image src="products/shoe.jpg" loader={cloudinaryLoader} ... />

Performance Impact

Properly configured, next/image typically delivers:

• 30-50% smaller images via WebP/AVIF vs JPEG/PNG
• Eliminates layout shift (CLS) by reserving space
• Lazy loading reduces initial page weight by 60-80%
• priority on LCP image improves LCP by 200-500ms

Image optimization is one of the highest-ROI performance improvements you can make — and Next.js automates most of it.