Lazy Loading Images Explained

Lazy loading images is a web performance technique that delays loading images until they are likely to be needed. Instead of downloading every image immediately when a page opens, the browser can load images near the user's viewport first and postpone images that are farther down the page.

For pages containing many images, lazy loading can reduce the amount of data transferred during the initial page load, lower network activity and allow the browser to spend more resources on content that the user can see immediately. Modern browsers provide native image lazy loading through the loading="lazy" attribute, making the basic technique simple to implement.

What Is Image Lazy Loading?

Image lazy loading means that an image is not necessarily downloaded as soon as the HTML document is parsed. The browser can delay fetching the image until it approaches the visible area of the page. This is especially useful for images located below the initial viewport.

<img
  src="/images/article.jpg"
  alt="Example article image"
  loading="lazy"
/>

The loading="lazy" attribute tells supporting browsers that the image is a candidate for deferred loading. The browser decides when to actually request the resource based on factors such as its position relative to the viewport, network conditions and implementation details.

Why Lazy Loading Matters

Images can represent a significant portion of the bytes downloaded by a web page. A page containing dozens of large images can generate substantial network requests even when the visitor initially sees only a small part of the page.

• Reduce unnecessary initial image downloads.
• Decrease initial network traffic.
• Improve loading performance on image-heavy pages.
• Reduce bandwidth consumption.
• Allow visible content to receive more browser resources.
• Improve the experience for users on slower connections.

How Lazy Loading Works

The basic process begins when the browser receives and parses the HTML document. It identifies image elements and determines which resources need to be fetched. Images marked with loading="lazy" can be deferred when they are sufficiently far from the viewport.

HTML document
      ↓
Browser parses image elements
      ↓
Identify lazy-loaded images
      ↓
Defer images outside the loading area
      ↓
User scrolls toward the image
      ↓
Browser starts loading the image
      ↓
Image becomes available

The browser does not normally wait until the exact moment an image enters the viewport. It can begin downloading an image before that point so that the resource has time to arrive before the user reaches it.

Native Lazy Loading

Modern browsers support native lazy loading for images through the HTML loading attribute. This approach is usually preferable to custom JavaScript implementations because the browser can make loading decisions using information that is not always available to application code.

Which Images Should Be Lazy Loaded?

Lazy loading is most useful for images that are not immediately visible. Examples include images inside long articles, product lists, galleries, documentation pages and content feeds.

• Images below the initial viewport.
• Images inside long blog articles.
• Product images farther down a catalog.
• Gallery images that are not initially visible.
• Avatars in long lists.
• Images loaded after expanding additional content.

The decision should be based on when the image is needed, not simply on the fact that it is an image. An image that appears immediately at the top of a page may be an important part of the initial visual experience and should generally not be treated the same way as a distant article image.

When Not to Lazy Load an Image

Images visible immediately when a page loads are usually poor candidates for lazy loading. Delaying an important above-the-fold image can make the page appear incomplete and can postpone the loading of a resource that contributes to the initial visual rendering.

Lazy Loading and Page Performance

Lazy loading can improve performance by reducing the amount of work performed during the initial page load. When fewer non-critical images are requested immediately, the browser has fewer image downloads competing for network and processing resources.

This can be particularly valuable on mobile devices and slower connections. A visitor who reads only the beginning of a long article does not necessarily need dozens of images from the bottom of the page to be downloaded immediately.

Lazy Loading and Bandwidth

Lazy loading can reduce bandwidth usage because resources that the visitor never reaches may never need to be downloaded during the session. This is useful for long pages, infinite scrolling interfaces and image-heavy catalogs where users often view only a portion of the available content.

However, lazy loading does not automatically make individual images smaller. If an image eventually loads at full resolution, the browser still downloads that full resource. Image compression, responsive images and appropriate dimensions are therefore important complementary techniques.

Lazy Loading Is Not Image Optimization

Lazy loading controls when an image is requested. Image optimization controls how efficiently the image itself is delivered. These are different performance techniques and should be used together.

Responsive Images and Lazy Loading

Responsive images allow the browser to choose an appropriate resource for the user's device and display size. The srcset and sizes attributes can provide multiple image candidates so that a small mobile screen does not necessarily receive the same large image intended for a desktop display.

<img
  src="/images/photo-1200.jpg"
  srcset="
    /images/photo-480.jpg 480w,
    /images/photo-800.jpg 800w,
    /images/photo-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Example photo"
  loading="lazy"
/>

Combining responsive image selection with lazy loading addresses two separate problems: responsive images help control the size of the resource downloaded, while lazy loading controls when the resource is requested.

Lazy Loading and SEO

Lazy loading does not inherently harm SEO. Search engines can process modern web pages and understand standard image markup, but important content should still be available in the HTML and implemented using accessible, crawlable elements.

Images should have meaningful alt text when they convey information. Decorative images can use an empty alt attribute. Lazy loading should also not be used as a way to hide important content from users or search engines.

Lazy Loading and the Largest Contentful Paint

Largest Contentful Paint, or LCP, measures how quickly the largest relevant element in the initial viewport becomes visible. If the LCP element is an image, unnecessarily lazy loading that image can delay its request and make the metric worse.

For this reason, the main image responsible for the LCP should generally be prioritized rather than deferred. Images below the fold are much better candidates for lazy loading.

Lazy Loading and Layout Shifts

Lazy loading itself does not necessarily cause layout shifts, but images without reserved dimensions can. If the browser does not know how much space an image will occupy before the resource loads, surrounding content may move when the image appears.

<img
  src="/images/article.jpg"
  width="1200"
  height="800"
  loading="lazy"
  alt="Article illustration"
/>

Providing width and height attributes allows the browser to calculate the image's aspect ratio and reserve appropriate space before the image finishes loading. CSS aspect-ratio can also be used when the layout requires a different approach.

Lazy Loading in Long Articles

Long-form content is one of the most practical use cases for lazy loading. A technical article may contain many screenshots, diagrams and examples, but the visitor initially sees only the title and first sections.

Applying lazy loading to images farther down the article allows the browser to prioritize the content currently being viewed. As the reader scrolls, upcoming images can be requested before they enter the viewport.

<article>
  <h1>Web Performance Guide</h1>

  <img
    src="/images/intro.jpg"
    width="1200"
    height="700"
    alt="Performance overview"
  />

  <p>Article content...</p>

  <img
    src="/images/example.jpg"
    width="1000"
    height="650"
    loading="lazy"
    alt="Performance example"
  />

  <p>More article content...</p>
</article>

Lazy Loading in Image Galleries

Galleries can contain dozens or hundreds of images, making them another strong candidate for deferred loading. Loading every image immediately can create unnecessary network requests, especially when the visitor views only the first few items.

For a gallery, the first visible images can be loaded normally while later images use lazy loading. The exact strategy depends on the gallery layout and how quickly users are expected to navigate through the images.

Lazy Loading with JavaScript

Before native browser support became widespread, websites commonly implemented lazy loading with JavaScript and techniques such as IntersectionObserver. A script would detect when an image approached the viewport and then assign its actual source.

const images = document.querySelectorAll("img[data-src]");

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;

    const image = entry.target;
    image.src = image.dataset.src;

    observer.unobserve(image);
  });
});

images.forEach((image) => observer.observe(image));

Custom JavaScript can still be useful when an application needs behavior that native lazy loading does not provide. However, unnecessary JavaScript increases implementation complexity and can introduce accessibility, fallback and performance problems.

Native vs JavaScript Lazy Loading

Common Lazy Loading Mistakes

Lazy loading is straightforward, but applying it without considering image priority can produce worse results. The most common mistakes involve deferring critical images, failing to reserve layout space or assuming lazy loading eliminates the need for image optimization.

• Lazy loading the main hero or LCP image.
• Adding loading="lazy" to every image without considering visibility.
• Using huge images and relying on lazy loading to solve the file-size problem.
• Failing to provide image dimensions.
• Using custom JavaScript when native lazy loading is sufficient.
• Providing poor or missing alt text.
• Ignoring responsive image techniques.
• Assuming lazy loading alone will fix a slow website.

Best Practices

• Lazy load images that are initially below the fold.
• Keep important above-the-fold images prioritized.
• Provide width and height attributes or reserve space with CSS.
• Use responsive images for different screen sizes.
• Compress images before delivery.
• Choose appropriate image formats for the content.
• Use meaningful alt text for informative images.
• Prefer native loading="lazy" for standard use cases.
• Measure performance instead of assuming an optimization helped.
• Use a CDN and caching strategy where appropriate.

A Practical Image Loading Strategy

A good image strategy starts by identifying which images are important to the initial viewport. Critical images should be prioritized, while images that appear farther down the page can be deferred. Every image should then be delivered at an appropriate size and quality.

Critical image
    ↓
Prioritize loading
    ↓
Responsive image selection
    ↓
Optimized image format

Non-critical image
    ↓
Reserve layout space
    ↓
loading="lazy"
    ↓
Responsive image selection
    ↓
Optimized image format

Testing Lazy Loaded Images

After implementing lazy loading, test the page on both desktop and mobile connections. Check the initial network requests, image loading behavior while scrolling, layout stability and the appearance of important images.

Browser developer tools can help identify which images are requested during the initial load and which requests occur after scrolling. Performance testing tools can also reveal whether image loading is contributing to metrics such as LCP or cumulative layout shifts.

Lazy Loading in Modern Frameworks

Modern frontend frameworks often provide their own image components or optimization systems. These systems may combine lazy loading with responsive image generation, automatic sizing, modern formats and other optimizations.

When using a framework image component, check its documentation before adding manual loading behavior. The framework may already determine whether an image should be lazy loaded based on its position and configuration.

Frequently Asked Questions

Helpful Image Tools

A Responsive Image Size Calculator helps determine suitable image dimensions for different displays, an Image Resize Calculator assists with calculating resized image dimensions, an Image Aspect Ratio Calculator helps maintain correct proportions when changing image sizes, an SVG Optimizer reduces unnecessary data in SVG files, and an Image Metadata Viewer helps inspect metadata stored inside image files.

Conclusion

Lazy loading is a simple and effective technique for reducing unnecessary image requests during the initial page load. By deferring non-critical images until they approach the viewport, websites can reduce initial network activity and improve the experience of users on slower devices and connections.

The best results come from combining lazy loading with responsive images, appropriate dimensions, compression, modern formats, caching and CDN delivery. Most importantly, lazy loading should be applied selectively. Critical above-the-fold images should remain prioritized, while images farther down the page are strong candidates for deferred loading.