Next.js Image Optimization Cheat Sheet

A practical cheat sheet on optimizing images in Next.js, covering the Next.js Image component, lazy loading, formats, and best practices for performance.

💡 Key Takeaways

⚡ Image Component: Use next/image for automatic optimization and modern formats.
🌐 Responsiveness: fill, sizes, and objectFit for responsive layouts.
🚀 Loading Strategies: priority, lazy, eager for performance control.
🧩 Placeholders: Blur, color, or custom loaders for better UX.
🛠 Best Practices: Configure device sizes, cache TTL, and fallback/error handling.

⚡ Basic Image Usage

Import Image from next/image
Define src, alt, width, height
Use priority for above-the-fold images

import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero image"
      width={800}
      height={600}
      priority
    />
  );
}

🌐 External Images

Configure remotePatterns in next.config.js
Use placeholder="blur" for smoother loading
Supports WebP/AVIF automatically

// next.config.js
images: {
  remotePatterns: [{ protocol: 'https', hostname: 'example.com', pathname: '/images/*' }],
}

// Component
<Image
  src="https://example.com/images/photo.jpg"
  alt="External"
  width={500}
  height={300}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,..."
/>

🏗️ Responsive & Layouts

fill + objectFit for responsive containers
Define sizes for breakpoints
Multiple breakpoints for different devices

<div style={{ position: 'relative', width: '100%', height: '400px' }}>
  <Image
    src="/landscape.jpg"
    alt="Landscape"
    fill
    style={{ objectFit: 'cover' }}
    sizes="(max-width: 768px) 100vw, 50vw"
  />
</div>

🖼️ Image Formats & Quality

Use modern formats (webp, avif)
Optimize quality per image type
Automatic format selection for supported browsers

<Image
  src="/photo.jpg"
  alt="Photo"
  width={800}
  height={600}
  quality={85}
/>

⚡ Loading Strategies

priority → for hero/above-the-fold images
loading="lazy" → defer offscreen images
loading="eager" → immediate load

<Image src="/gallery.jpg" alt="Gallery" width={400} height={300} loading="lazy" />

🧩 Placeholders & Fallbacks

Blur placeholders for smooth loading
Color backgrounds or skeleton loaders
Handle broken images with fallback

<Image
  src="/product.jpg"
  alt="Product"
  width={300}
  height={200}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,..."
/>

🧭 Object Fit & Positioning

objectFit: cover → fill container
objectFit: contain → maintain aspect ratio
objectPosition → control crop focus

<Image src="/photo.jpg" fill style={{ objectFit: 'cover', objectPosition: 'center top' }} />

🖼️ Image Patterns

Gallery grid with lazy/eager loading
Hero section with priority + cover image
Product cards with responsive sizing

<Image src={product.image} alt={product.name} fill style={{ objectFit: 'cover' }} sizes="(max-width: 768px) 100vw, 25vw" />

🚀 Performance & Best Practices

Configure deviceSizes, imageSizes, formats, minimumCacheTTL
Deduplicate fetches and prioritize critical images
Use error handling and fallback sources

images: {
  deviceSizes: [640, 750, 1080, 1200, 1920],
  imageSizes: [16, 32, 64, 128, 256],
  formats: ['image/webp', 'image/avif'],
  minimumCacheTTL: 60,
}