How to Implement Lazy Loading for Images

Short answer

Lazy loading defers off-screen images until the user scrolls near them. This reduces initial page weight and improves LCP.

Steps

1. Add loading="lazy" to <img> tags for native browser lazy loading.
2. For background images, use the Intersection Observer API to detect visibility.
3. Place a small placeholder or low-quality image placeholder (LQIP) while loading.
4. Set explicit width and height attributes to prevent layout shifts.
5. Test with Chrome DevTools by throttling the network.

Tips

• Do not lazy-load above-the-fold images; preload them instead.
• Use responsive images with srcset to serve appropriate sizes.
• Consider using a lazy-loading library for complex masonry layouts.

Common issues

• Images without dimensions cause CLS when they load.
• Older browsers may not support native lazy loading; use a polyfill.