Lazy Loading Images — The Complete Implementation Guide

Lazy loading defers loading of off-screen images until the user scrolls near them. This dramatically reduces initial page weight and speeds up LCP by prioritizing above-the-fold content.

The simplest approach — add loading="lazy" to any below-the-fold image:

<!-- Above the fold: load immediately -->
<img src="/hero.webp" alt="Hero" width="1200" height="630" fetchpriority="high" />

<!-- Below the fold: lazy load -->
<img src="/feature.webp" alt="Feature" width="600" height="400" loading="lazy" />

Important: Never lazy-load your LCP image! The hero image should load eagerly with fetchpriority="high".

Next.js handles lazy loading automatically:

import Image from 'next/image'

// Hero image: eagerly loaded
<Image src="/hero.webp" alt="Hero" priority />

// Below fold: automatically lazy-loaded
<Image src="/feature.webp" alt="Feature" width={600} height={400} />

next/image also auto-converts to WebP, generates multiple sizes, and sets proper cache headers.