Lazy Loading Images: Tutorial and Best Practices

Lazy loading defers loading of offscreen images until users scroll near them. This dramatically reduces initial page weight and improves load time, especially on image-heavy pages.

Native Lazy Loading

Modern browsers support native lazy loading with a simple attribute:

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

That's it. The browser handles everything automatically. Images load as users scroll them into view.

Browser Support

Native lazy loading is supported in Chrome 76+, Edge 79+, Firefox 75+, and Safari 15.4+. For older browsers, the image loads normally (no lazy loading), which is an acceptable fallback.

When to Use Lazy Loading

Lazy load images below the fold — anything users need to scroll to see. Never lazy load above-the-fold images, as this delays initial rendering and hurts Core Web Vitals.

Ideal candidates: blog post images, product galleries, image-heavy landing pages, infinite scroll feeds.

The loading Attribute Values

loading="lazy" — Defer loading until near viewport
loading="eager" — Load immediately (default)
loading="auto" — Let browser decide

Combining with Responsive Images

<img srcset="small.jpg 400w, large.jpg 1200w"
     sizes="(max-width: 600px) 400px, 1200px"
     src="large.jpg"
     loading="lazy"
     alt="Description">

JavaScript-Based Lazy Loading

For broader browser support, use the Intersection Observer API:

const images = document.querySelectorAll('img[data-src]');

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

images.forEach(img => observer.observe(img));

Placeholder Strategies

Show placeholders while images load:

1. Solid color background:

<img src="image.jpg" loading="lazy" 
     style="background: #f0f0f0">

2. Low-quality placeholder: Load a tiny blurred version first (1-2KB)

3. SVG placeholder: Use an SVG traced outline

Performance Impact

Lazy loading can reduce initial page weight by 50-70% on image-heavy pages. This improves:

Time to Interactive
First Contentful Paint
Bandwidth usage
Mobile data consumption

SEO Considerations

Google's crawler executes JavaScript and supports lazy loading. However, ensure critical images load without user interaction.

Never lazy load:

Above-the-fold images
Logo and branding
First few product images
Content critical for understanding the page

Common Pitfalls

Layout shift: Always specify width and height to prevent layout shift as images load.

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

Lazy loading everything: Only lazy load below-the-fold images. Above-the-fold images should load immediately.

Testing

Use Chrome DevTools Network tab with throttling to verify lazy loading works. Images should only appear in the Network tab when scrolled into view.