What Is Lazy Loading?

Lazy loading defers the loading of off-screen images until the user scrolls near them. Instead of downloading every image when the page first loads, the browser only fetches images that are visible or about to become visible in the viewport.

The benefits are significant. Initial page weight drops dramatically, first meaningful paint occurs sooner, and bandwidth is saved for users who don’t scroll through the entire page. On image-heavy pages, lazy loading can reduce initial load by 50% or more.

Native Lazy Loading

Modern browsers support lazy loading with a single HTML attribute:

<img src="image.jpg" loading="lazy" alt="Description">

The loading="lazy" attribute tells the browser to defer loading until the image approaches the viewport. Browsers typically begin loading when the image is within a few hundred pixels of becoming visible.

For above-the-fold images, use loading="eager" to load them immediately:

<img src="hero.jpg" loading="eager" alt="Description">

Native lazy loading is supported by all modern browsers, including Chrome, Firefox, Safari, and Edge. For browsers without support, the image loads normally without deferral — a graceful degradation.

JavaScript Fallback

For older browsers or more complex behaviors, the Intersection Observer API provides a lightweight way to detect when elements enter the viewport:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

Third-party libraries like lazysizes handle browser differences automatically and add features like low-quality placeholders.

Implementation Best Practices

Always reserve space for lazy-loaded images. Without dimensions, the browser cannot allocate space, causing layout shifts when images load:

<img src="placeholder.jpg" data-src="full.jpg" width="800" height="600" loading="lazy" alt="Description">

Consider using low-quality placeholders. A tiny, heavily compressed version loads immediately while the full image loads lazily. This improves perceived performance and prevents layout shifts.

Avoid lazy loading above-the-fold images. These should load immediately to ensure fast Largest Contentful Paint. Reserve lazy loading for images that appear below the initial viewport.

Measuring Impact

Test with Lighthouse Performance audits before and after implementing lazy loading. Look for improvements in:

  • Initial page weight — should drop significantly
  • Time to Interactive — faster without image competition
  • Largest Contentful Paint — ensure above-fold images aren’t lazy loaded

Monitor real-user metrics in Google Search Console to confirm improvements in actual visitor experiences. Lazy loading is one of the simplest optimizations with the highest measurable impact.