Next.js Image Optimization: LCP, WebP, and Responsive Images

#nextjs #frontend #performance #webdev

Next.js Image Optimization: LCP, WebP, and Responsive Images

Images are the #1 cause of poor Core Web Vitals. Next.js's Image component solves most of this automatically — if you use it correctly.

The next/image Component

import Image from 'next/image';

// Automatic: WebP conversion, lazy loading, responsive srcset
function ProductCard({ product }: { product: Product }) {
  return (
    <div>
      <Image
        src={product.imageUrl}
        alt={product.name}
        width={400}
        height={300}
        // Priority: load eagerly (no lazy loading)
        // Use on above-the-fold images to improve LCP
        // priority
      />
    </div>
  );
}

Priority Images: Fix Your LCP

Largest Contentful Paint (LCP) measures how fast the main image loads. Add priority to hero images:

// Hero image — above the fold, must load fast
<Image
  src='/hero.jpg'
  alt='Dashboard screenshot'
  width={1200}
  height={600}
  priority  // Preload — no lazy loading
/>

// Product images — below fold, lazy load by default
<Image
  src={product.image}
  alt={product.name}
  width={400}
  height={300}
  // No priority = lazy loaded automatically
/>

Fill Mode for Dynamic Containers

// When you don't know the dimensions
<div style={{ position: 'relative', width: '100%', height: '300px' }}>
  <Image
    src={userAvatar}
    alt='User avatar'
    fill
    style={{ objectFit: 'cover' }}
  />
</div>

Remote Images: Allow Domains

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'your-s3-bucket.s3.amazonaws.com',
        pathname: '/uploads/**',
      },
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
      },
    ],
    formats: ['image/avif', 'image/webp'], // Prefer AVIF (better compression)
  },
};

Responsive Sizes

// Tell browser what size the image renders at different viewports
<Image
  src='/screenshot.png'
  alt='App screenshot'
  width={1200}
  height={800}
  sizes='
    (max-width: 640px) 100vw,
    (max-width: 1024px) 50vw,
    33vw
  '
/>
// Next.js generates the right srcset for each size
// Mobile gets a small image, desktop gets the large one

Blur Placeholder

// Show blurred version while loading
import { getPlaiceholder } from 'plaiceholder';

// Generate at build time
const { base64 } = await getPlaiceholder(imageBuffer);

<Image
  src='/hero.jpg'
  alt='Hero'
  width={1200}
  height={600}
  placeholder='blur'
  blurDataURL={base64}
/>