Why defer images
Loading every image at once competes for bandwidth with the content the user can actually see. Lazy loading defers images that start offscreen until the user scrolls near them.
The native way
Adding the loading attribute set to lazy on an image tells the browser to delay fetching it until it approaches the viewport. It is one attribute and needs no JavaScript.
- Use it for below the fold images and long galleries.
- Do not lazy load the hero image, since that hurts your largest paint.
Reserve space
Always set width and height or an aspect ratio so the layout reserves space. Otherwise content jumps when the image arrives, hurting visual stability.
The observer approach
For finer control or older needs, the Intersection Observer API can watch elements and load them as they enter view.
Key idea
Lazy load offscreen images with the native loading attribute, but keep the hero eager and reserve space so nothing shifts.