Image Optimization

Master next/image — automatic WebP conversion, lazy loading, CLS prevention, responsive images, and the configuration options for production image delivery.

import Image from 'next/image';

// 1. Above-the-fold hero image (LCP element)
// priority: preloads the image, skips lazy loading
export function HeroImage() {
  return (
    <Image
      src="/images/hero.jpg"
      alt="Hero banner showing our product"
      width={1200}
      height={600}
      priority // Preload — use for LCP element only
      className="w-full h-auto"
    />
  );
}

// 2. Product image with blur placeholder
export function ProductImage({ src, alt }: { src: string; alt: string }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={400}
      height={400}
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,/9j/4AAQ..." // tiny base64 preview
      className="rounded-lg object-cover"
    />
  );
}

// 3. Fill layout for responsive containers
export function CoverImage({ src, alt }: { src: string; alt: string }) {
  return (
    <div className="relative aspect-video"> {/* Container must be relative */}
      <Image
        src={src}
        alt={alt}
        fill // Fills the parent container
        sizes="(max-width: 768px) 100vw, 50vw" // Responsive size hints
        className="object-cover"
      />
    </div>
  );
}

// 4. Avatar — small, circular
export function Avatar({ src, name }: { src: string; name: string }) {
  return (
    <Image
      src={src}
      alt={`${name}'s avatar`}
      width={40}
      height={40}
      className="rounded-full"
    />
  );
}

Image optimisation is one of the highest-ROI performance improvements in any web app. A 30–50% reduction in image file size directly translates to faster LCP scores and lower bandwidth costs. Make next/image usage a team standard — add an ESLint rule (@next/next/no-img-element) to prevent plain <img> tags.