When to use lazy loading for images and what the tradeoffs are
loading=lazy attribute, Intersection Observer, above-the-fold vs below-the-fold, LCP image pitfall, native lazy loading browser support, eager loading
Image Lazy Loading
Lazy loading defers downloading off-screen images until the user scrolls near them. On an image-heavy page this can cut initial page weight by 60–80%, directly improving LCP and FCP for above-the-fold content.
The native HTML attribute requires zero JavaScript:
<!-- CORRECT: lazy load below-the-fold images -->
<img src="thumbnail.webp" loading="lazy" alt="Product thumbnail" width="300" height="300">
<!-- CORRECT: never lazy-load the LCP image -->
<img src="hero.webp" loading="eager" fetchpriority="high" alt="Hero" width="1200" height="600">Browser support is 94%+ without any polyfill needed. The browser uses Intersection Observer internally and starts fetching images when they enter a threshold — typically 1200–1500px before the viewport — to avoid visible loading gaps during scroll.
The critical mistake: adding loading="lazy" to your LCP image. This delays the most important image on the page and will significantly harm your LCP score.
Rule of thumb: the first viewport of images (loading="eager", explicit for the LCP element), everything else loading="lazy". If you're unsure which images are above the fold, check DevTools Elements panel with the device toolbar set to your most common breakpoint.