Lazy Loading Responsive Images — loading='lazy' Best Practices

Lazy Loading Responsive Images

The loading="lazy" attribute defers image loading until the user scrolls near the image, saving bandwidth and improving initial page load.

Basic Usage

<img
  src="product-1024w.jpg"
  srcset="product-320w.jpg 320w,
          product-640w.jpg 640w,
          product-1024w.jpg 1024w"
  sizes="(max-width: 640px) 100vw, 50vw"
  alt="Product photo"
  loading="lazy"
  decoding="async"
  width="800"
  height="600"
/>

When to Use lazy vs eager

Image Position	loading Value	Reason
Hero / above fold	eager	Needs to load immediately for LCP
Below the fold	lazy	Defer to save initial bandwidth
Carousel (first slide)	eager	Visible immediately
Carousel (other slides)	lazy	Hidden until user interacts
Image gallery thumbnails	lazy	Most are below fold

How the Browser Determines "Near"

Browsers use implementation-specific thresholds to decide when to start loading a lazy image. Chrome, for example, uses different thresholds based on connection speed:

• 4G / fast connections: ~1250px before the viewport
• 3G: ~2500px before the viewport
• 2G / slow: ~6250px before the viewport

Always Include width and height

When using loading="lazy", the width and height attributes (or CSS aspect-ratio) are critical:

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

Without dimensions, the browser reserves 0 height for the lazy image. When it loads and expands, it causes Cumulative Layout Shift (CLS) — a negative Core Web Vitals signal.

Native vs JavaScript Lazy Loading

Native loading="lazy" has 93%+ browser support and requires zero JavaScript. Intersection Observer-based libraries are no longer necessary for most use cases. The native attribute also works correctly with srcset and sizes.