Implementing Lazy Loading for Images

Downloading every image on a page at once slows down the initial render. By deferring images outside the viewport — known as "lazy loading" — you can improve first-view performance considerably.

Using the loading Attribute

Simply adding <img loading="lazy"> lets the browser decide when to fetch the image based on its distance from the viewport. No extra JavaScript is required, making it the easiest approach. Be careful not to apply it to images within the first view.

Combining with Intersection Observer

For finer control, use the Intersection Observer API. Store the real URL in a data-src attribute and swap it into src when the element enters the viewport. Adjusting the threshold and root margin lets you fine-tune the loading timing without compromising the scrolling experience.