The Problem with Eager Loading

By default, browsers download every <img> on a page as soon as they encounter it in the HTML. For a page with 30 images, that means 30 HTTP requests fire immediately, competing for bandwidth and delaying the content the user actually came to see — typically whatever's visible in the viewport.

Lazy loading defers the download of off-screen images until the user scrolls near them. It's one of the simplest performance wins available, and modern browsers make it trivial to implement.

Native Lazy Loading

The loading="lazy" attribute is supported in all modern browsers and requires zero JavaScript:

<img src="photo.jpg" alt="Description" loading="lazy" width="800" height="600" />

That's it. The browser will defer loading the image until it's within a certain distance of the viewport (the exact threshold varies by browser and connection speed).

Critical details:

• Always include width and height attributes. Without explicit dimensions, the browser can't reserve space for the image before it loads, causing layout shifts (poor CLS scores).
• Don't lazy-load above-the-fold images. Your hero image, logo, and any images visible without scrolling should load eagerly. Lazy loading them actually hurts LCP because it adds a delay before the browser starts fetching them.
• Use fetchpriority="high" on your LCP image to tell the browser to prioritize it.

Responsive Images with Lazy Loading

Combine lazy loading with responsive images for the best results:

<img
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="photo-800.jpg"
  alt="Description"
  loading="lazy"
  width="800"
  height="600"
/>

The browser selects the best image size for the user's viewport and only downloads it when needed. This combination of right-sizing and lazy loading can reduce image bandwidth by 60-80% on image-heavy pages.

Next.js and Framework Considerations

If you're using Next.js, the <Image> component handles lazy loading by default, along with automatic resizing, format conversion (WebP/AVIF), and blur-up placeholders. For most cases, you should use the framework's image component rather than raw <img> tags, as it handles the edge cases around priority, sizing, and CDN integration.