typescriptbeginner

Next.js Image Optimization Patterns

Use next/image with responsive sizes, blur placeholders, and priority loading for optimal Core Web Vitals.

typescriptPress ⌘/Ctrl + Shift + C to copy

import Image from 'next/image';

// Hero image with priority loading
export function HeroImage({ src, alt }: { src: string; alt: string }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={1200}
      height={630}
      priority
      sizes="100vw"
      className="rounded-xl object-cover"
    />
  );
}

// Responsive thumbnail grid
export function ThumbnailGrid({ images }: { images: { src: string; alt: string }[] }) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      {images.map((img, i) => (
        <Image
          key={i}
          src={img.src}
          alt={img.alt}
          width={300}
          height={300}
          sizes="(max-width: 768px) 50vw, 25vw"
          className="rounded-lg object-cover aspect-square"
          loading="lazy"
        />
      ))}
    </div>
  );
}