Lazy Loading Images

Also Known As

TL;DR

Explanation

Native lazy loading (loading="lazy" on img and iframe) defers fetching until the resource is near the viewport — supported in all modern browsers since 2020. Combined with Intersection Observer for custom thresholds, lazy loading can reduce initial page weight by 50-80% on image-heavy pages. Key attributes: loading="lazy" (native), decoding="async" (non-blocking decode), fetchpriority="high" for LCP images, and width/height to prevent layout shift. Never lazy-load above-the-fold images — they should load immediately.

Common Misconception

Why It Matters

Common Mistakes

• loading=lazy on hero images — the LCP image must load immediately; never lazy-load it.
• No width and height attributes — browser cannot reserve space, causing layout shift (CLS).
• Lazy loading images in CSS background — loading=lazy only works on img elements.
• Using a JavaScript lazy loader when loading=lazy has full browser support.

Code Examples

<!-- All images load immediately — wastes bandwidth:
<img src="hero.jpg" loading="lazy">  <!-- Never lazy-load LCP! -->

<!-- Page with 50 product images — all fetch on load:
<img src="product-1.jpg" alt="Product 1">
<img src="product-2.jpg" alt="Product 2">
<!-- ... 48 more -->

<!-- LCP image: eager + high priority:
<img src="hero.jpg" alt="Hero" loading="eager" fetchpriority="high"
     width="1200" height="600">

<!-- Below-fold images: lazy + dimensions for CLS prevention:
<img src="product-1.jpg" alt="Product 1" loading="lazy"
     decoding="async" width="300" height="300">
<img src="product-2.jpg" alt="Product 2" loading="lazy"
     decoding="async" width="300" height="300">
<!-- Browser fetches only images near viewport -->

References

• ↗ https://web.dev/articles/browser-level-image-lazy-loading

Tags

Related Terms