What is image lazy loading?

When a web page contains many images, loading all of them as soon as the page opens unnecessarily increases the initial load time. Lazy loading — or deferred loading — is a technique that ensures each image is only loaded when the user is about to see it. Easy to implement, it significantly improves site performance and user experience.

Definition of lazy loading

Lazy loading means delaying the loading of resources that are not immediately visible on screen. Applied to images, this means only images located in the visible area at the time the page loads (the viewport) are downloaded immediately. Other images load progressively as the user scrolls down the page.

Without lazy loading, the browser downloads all images on the page as soon as it opens — including those at the very bottom that the user may never see.

How does lazy loading work?

There are two main approaches to implementing image lazy loading:

1. The native HTML loading="lazy" attribute

Since 2019, modern browsers natively support lazy loading via a simple HTML attribute:

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

The browser automatically decides when to load the image based on the user's scroll position. This is the recommended method today: no JavaScript library is required.

2. The Intersection Observer API (JavaScript)

Before the native attribute was standardised, developers used the Intersection Observer API to detect when an image enters the viewport and trigger its loading at that moment. This approach remains useful for more advanced behaviours or animations on image entry.

What are the benefits of lazy loading?

Performance and load time

By reducing the number of images loaded at startup, lazy loading decreases the initial page weight and speeds up rendering. Performance metrics such as Largest Contentful Paint (LCP) and Time to Interactive (TTI) are improved as a result.

Bandwidth savings

Images at the bottom of the page are only downloaded if the user actually reaches them. On a long page with many visuals, this can represent significant savings — especially for visitors on mobile or slow connections.

SEO and Core Web Vitals

Google takes Core Web Vitals into account in its rankings. A better LCP, directly influenced by image loading, can have a positive impact on search result positioning.

Lazy loading: what not to do

Lazy loading is not suitable for all images. Two common mistakes should be avoided:

• Never apply loading="lazy" to hero images or images above the fold — these images are visible on load, and delaying their display would degrade the LCP and user experience.
• Do not omit the width and height attributes — without defined dimensions, the browser cannot reserve space for the image before it loads, causing layout shifts that harm the Cumulative Layout Shift (CLS) score.

Good to know: for images that are immediately visible on load (banner, hero image, logo), use the loading="eager" attribute instead, or simply omit the attribute — this is the default browser behaviour.

Browser compatibility

Lazy loading and image hosting

When you use an image hosting service to store and distribute your visuals, always remember to include the loading="lazy" attribute on images that are not immediately visible. Combining a high-performance hosting service (CDN, automatic compression) with lazy loading maximises page display speed.

Good to know: a quality image hosting service provides stable direct URLs for each image, making lazy loading integration straightforward: simply add loading="lazy" to your <img> tag without modifying the source URL.