React Lazy Loading Images: A Simple Guide to Better Performance

Images are important for modern websites, but loading too many images at once can slow down a React application.

If a page contains 30 images, users may only see 4–5 of them initially. There is no reason to load all 30 images immediately.

That's where lazy loading helps.

What Is Lazy Loading?

Lazy loading means delaying the loading of an image until it is needed.

Instead of:

Page loads
↓
Load every image
↓
Show page

Lazy loading works more like:

Page loads
↓
Load visible images
↓
User scrolls
↓
Load images near the viewport

This can reduce unnecessary network requests and improve the initial loading experience.

For more information, see the MDN Lazy Loading Guide.

Why Does Lazy Loading Improve Performance?

Images can be large and consume a significant amount of bandwidth.

Lazy loading helps by:

• Reducing initial network requests
• Reducing bandwidth usage
• Loading important content sooner
• Improving the experience on slower connections
• Avoiding downloads for images the user never views

However, lazy loading does not make the image file smaller. You should still optimize image dimensions, compression, and formats such as WebP or AVIF

Native Lazy Loading

Modern browsers support native lazy loading through the loading attribute.

<img
  src="/images/product.jpg"
  alt="Product"
  loading="lazy"
/>

The browser decides when to load the image based on its distance from the viewport.

This is usually the simplest solution and doesn't require an additional JavaScript library.

Lazy Loading in React

You can use the same approach directly in React:

function ProductImage() {
  return (
    <img
      src="/images/product.jpg"
      alt="Product"
      loading="lazy"
      width="800"
      height="600"
    />
  );
}

Adding width and height also helps the browser reserve space for the image and can reduce unexpected layout shifts.

For responsive image techniques, see MDN's Responsive Images Guide.

Above-the-Fold vs Below-the-Fold Images

Not every image should be lazy loaded.

Above-the-fold images are visible when the page initially loads.

Examples:

• Hero image
• Main product image
• Important banner

These images generally shouldn't be unnecessarily lazy loaded because they may be important to the initial page experience.

Below-the-fold images are not immediately visible.

Examples:

• Product grid images
• Blog images further down the page
• Gallery images
• Footer images

These are good candidates for lazy loading.

A simple rule:

Above the fold
→ Load normally / prioritize

Below the fold
→ Lazy load

When Should You NOT Lazy Load?

Avoid lazy loading an image when it is:

• The main hero image
• The primary LCP image
• Immediately visible to the user
• Critical to understanding the page

For example:

// Important hero image
<img
  src="/hero.jpg"
  alt="React performance"
/>

Don't automatically add loading="lazy" to every image.

The goal isn't "lazy load everything."

The goal is:

Load important images early and delay images that aren't immediately needed.

A Practical React Example

A product page might use:

function ProductPage() {
  return (
    <>
      {/* Important image */}
      <img
        src="/hero.jpg"
        alt="Product"
        width="1200"
        height="700"
      />

      {/* Below-the-fold images */}
      <img
        src="/product-1.jpg"
        alt="Product 1"
        loading="lazy"
        width="800"
        height="600"
      />

      <img
        src="/product-2.jpg"
        alt="Product 2"
        loading="lazy"
        width="800"
        height="600"
      />
    </>
  );
}

This gives the browser a clear strategy:

Important image → Load early
Non-critical image → Lazy load

Need More Image Features?

For applications that need more than native lazy loading, React Smart Image provides features such as lazy loading, priority loading, blur placeholders, skeleton loading, WebP/AVIF support, retry handling, image zoom, and aspect-ratio support.

import SmartImage from "@concatstring/react-smart-image";

<SmartImage
  src="/images/product.jpg"
  alt="Product"
  lazy
  width={800}
  height={600}
/>

React Smart Image

• Website: React Smart Image
• GitHub: View source code
• npm: Install from npm
• Live Demo: Try the demo

Final Takeaway

Lazy loading is a simple way to avoid loading images that users don't need immediately.

Remember:

Visible and important → Load early
Below the fold → Lazy load
Large images → Optimize
Modern formats → Consider WebP/AVIF

Lazy loading works best when it is part of a complete image optimization strategy—not when it is applied to every image blindly.