Image Optimization

Next.js's <Image> component automatically resizes, compresses, and lazy-loads images. It also prevents layout shift because you give it a width and height.

import Image from "next/image"

export default function Hero() {
  return (
    <Image
      src="/images/background.jpeg"
      alt="Mountain background"
      width={1200}
      height={600}
      priority  // load right away (above the fold)
    />
  )
}

// Fill the parent container instead
<div className="relative h-64">
  <Image src="/photo.jpg" alt="Photo" fill className="object-cover" />
</div>