Why are my website images taking a while to load?

If you've ever noticed a website loading quickly at the top while image further down the page appear only as you scroll, you're already seen lazy loading in action.

A common misconception is that there's a special HTML tag for lazy loading. There isn't. Instead, it's simply an attribute added to the standard <img> tag:

<img src="photo.jpg" alt="Park view" loading="lazy">

That's all it takes in most modern browsers.

The idea is straightforward. Normally, a browser tries to download every image on a page as soon as someone opens it. That works fine for small pages, but if a page contains dozens of images, visitors end up downloading pictures they may never even see.

By adding loading="lazy", the browser waits until an image is getting close to the visible part of the page before downloading it. This reduces the amount of data loaded initially, helping pages appear faster and making browsing smoother, especially on mobile devices or slower internet connections.

That said, lazy loading isn't something you should apply to every image without thinking. Images that appear immediately when the page loads - such as a hero banner or the main product image - are usually better left without lazy loading. Those images are part of the first impression, so delaying them can actually hurt the user experience.

For images that appear further down the page, though, lazy loading is an easy performance win. It requires almost no extra code, is supported by modern browsers, and can improve both loading speed and bandwidth usage.

Sometimes the smallest HTML attributes make the biggest difference. If your page contains images that users won't see right away, adding loading="lazy" is one of the simplest optimisations you can add.