Next Image Responsive Patterns

import Image from 'next/image';

// Responsive image with sizes
export function HeroImage() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero banner"
      width={1920}
      height={1080}
      priority // Load immediately (above fold)
      sizes="100vw"
      className="w-full h-auto object-cover"
    />
  );
}

// Fill container (like background-image)
export function CardImage({ src, alt }: { src: string; alt: string }) {
  return (
    <div className="relative aspect-video overflow-hidden rounded-lg">
      <Image
        src={src}
        alt={alt}
        fill
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        className="object-cover"
      />
    </div>
  );
}

// Blur placeholder
export function GalleryImage({ src, alt, blurDataURL }: {
  src: string;
  alt: string;
  blurDataURL: string;
}) {
  return (
    <Image
      src={src}
      alt={alt}
      width={400}
      height={300}
      placeholder="blur"
      blurDataURL={blurDataURL}
      className="rounded-lg transition-opacity"
    />
  );
}

// Remote image (requires next.config.ts)
// images: {
//   remotePatterns: [
//     { protocol: 'https', hostname: 'images.unsplash.com' },
//   ],
// }