Lazy Loading

import Image from 'next/image';

export default function Article() {
  return (
    <main>
      {/* 
        CRITICAL: The image at the top of the screen MUST have 'priority'. 
        This disables lazy loading and forces the browser to fetch it instantly.
      */}
      <Image 
        src="/hero-banner.jpg" 
        priority 
        alt="Hero"
        width={1000} height={500} 
      />

      <p>Lots of text...</p>
      <p>Lots of text...</p>
      <p>Lots of text...</p>

      {/* 
        Way down here, we let Next.js do its default lazy loading behavior.
        This image won't download until the user scrolls down to it.
      */}
      <Image 
        src="/footer-illustration.jpg" 
        alt="Illustration"
        width={400} height={400} 
      />
    </main>
  );
}