Lazy Loading Images Explained

Lazy loading means waiting to load an image until the visitor is about to see it. Instead of downloading every picture when the page opens, the browser loads the ones at the top first and fetches the rest as the person scrolls. This saves data and helps the first view appear sooner.

Why use it

Pages with many images, such as galleries, product listings, and long articles, can be heavy. Lazy loading reduces the initial download, which helps speed on slower connections and saves bandwidth for visitors who never scroll to the bottom.

How to add it

Modern browsers support native lazy loading with a single attribute:

<img src="photo.jpg" alt="Description" width="800" height="600" loading="lazy">

No JavaScript is required. Many website platforms and plugins now add it automatically. Iframes, such as embedded videos and maps, can use the same attribute.

Always include dimensions

Provide width and height, or use CSS aspect ratio, so the browser reserves space for the image before it loads. Without them, content jumps as images appear, which harms your Cumulative Layout Shift score.

Do not lazy load everything

Images at the top of the page, especially your main hero image, should load immediately. Lazy loading these delays the most important content and can worsen your Largest Contentful Paint. A reasonable rule: do not lazy load anything visible without scrolling on common screen sizes.

You can also hint that the main image is high priority using the fetchpriority="high" attribute, where supported.

Combine with other optimizations

Lazy loading does not replace compression. Resize and compress your images first, as described in how to compress images, and serve appropriately sized files.

SEO considerations

Search engines can generally discover lazy-loaded images when they are implemented with standard methods such as the native attribute. Avoid custom setups that only load images after unusual user actions, since crawlers may not trigger them. Make sure important images are still in the HTML. See image SEO.

Accessibility

Alt text should still be present. Lazy loading does not change how screen readers describe images, so follow alt text best practices.

Test the result

Scroll through your page slowly on a throttled connection to check that images appear smoothly. Use tools in how to test website speed to confirm improvements.

Lazy loading other content

The same idea applies to videos, maps, and comment widgets. Loading them only on demand can save a lot of data.

The bottom line

Lazy load images that are far down the page, keep top-of-page images immediate, and always specify dimensions. It is a simple win for speed.