DEV Community: Jaimin Patel

React Lazy Loading Images: A Simple Guide to Better Performance

Jaimin Patel — Mon, 31 Aug 2026 18:40:39 +0000

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.

React Smart Image: The Free React Image Optimization Library Every Developer Should Try

Jaimin Patel — Thu, 02 Jul 2026 19:47:51 +0000

If you've built more than one React app, you've probably written the same image-loading boilerplate more than once.

A skeleton here. A lazy-loading IntersectionObserver there. A fallback image when the CDN hiccups. A blur placeholder to avoid layout shift. Retry logic for flaky hosts.

Every new React project ends up with the same image-loading code—copied from the last project, tweaked a little, and rarely perfect.

Sound familiar?

@concatstring/react-smart-image brings all of those features together in a single component. Simply swap <img> with <SmartImage> and opt into features like lazy loading, WebP detection, blur placeholders, skeleton loaders, retries, responsive images, and performance metrics—all without changing your existing code.

Getting started only takes a minute:

npm install @concatstring/react-smart-image

Key Features

✅ Drop-in replacement for <img>
✅ Zero runtime dependencies
✅ Fully typed with TypeScript
✅ Responsive image support
✅ Lazy loading
✅ Skeleton loaders
✅ Blur placeholders
✅ Retry with exponential backoff
✅ Error fallbacks
✅ Automatic WebP detection
✅ Image performance metrics
✅ Works with React 18+

🔗 Live Demo

Why We Built React Smart Image

Across multiple React projects, we found ourselves implementing the same image-loading logic repeatedly. Some projects needed lazy loading, while others required blur placeholders, retry logic, responsive images, or skeleton loaders. Maintaining separate implementations for each project quickly became repetitive and difficult to scale.

We wanted a single component that behaves like a normal <img> while providing modern image optimization features only when needed.

That's why we built React Smart Image.

Instead of maintaining multiple utilities across projects, I now use one component everywhere and simply enable the features I need with a few props. The result is cleaner code, a more consistent developer experience, and better image performance out of the box.

Drop-in Replacement

Replacing your existing images is as simple as swapping the component:

import { SmartImage } from '@concatstring/react-smart-image';

<SmartImage src="/photo.jpg" alt="A photo" width={800} height={600} />

className, style, onClick, loading, ref — all forwarded to the real <img>. Nothing new to learn. Enable additional features only when you need them—one prop at a time.

1. Lazy loading that actually waits for the viewport

<SmartImage src="/hero.jpg" alt="Hero" width={1200} height={600} lazy />

Images load 100px before they scroll into view — powered by IntersectionObserver, no scroll listeners, no jank.

2. Skeleton loaders (with dark-mode support)

<SmartImage
  src="/avatar.jpg"
  alt="User avatar"
  width={80}
  height={80}
  skeleton
  skeletonColor="#1f2937"
  skeletonHighlightColor="rgba(255,255,255,0.12)"
/>

An animated shimmer while the image loads — themeable to your brand or dark UI.

3. Blur placeholders — manual or automatic

Pass a tiny base64 LQIP the Next.js way:

<SmartImage src="/landscape.jpg" alt="Landscape" width={1200} height={800}
  placeholder="blur" blurDataURL="data:image/jpeg;base64,/9j/4AAQ..." />

Or skip the base64 entirely. If your CDN resizes by URL (Cloudinary, imgix, CloudFront…), autoBlur derives the preview for you:

<SmartImage src="/landscape.jpg" alt="Landscape" width={1200} height={800}
  placeholder="blur" autoBlur blurWidth={24} />

4. Retry with exponential backoff + fallback

CDNs fail. Handle it declaratively instead of with a tangle of onError handlers:

<SmartImage
  src="/flaky-cdn.jpg"
  alt="Product"
  width={400}
  height={300}
  retry={3}
  retryDelay={500}          // 500ms → 1s → 2s
  fallback="/placeholder.png"
/>

5. WebP auto-detection

Try the modern format first, fall back automatically if it 404s:

<SmartImage src="/photo.jpg" alt="Product" width={600} height={400} webp />

6. Responsive images — two strategies

The default srcset strategy lets the browser pick (DPR-aware). The viewport strategy always serves the smallest bytes per screen, ignoring device pixel ratio:

<SmartImage
  src="/banner.jpg"
  alt="Banner"
  responsive
  strategy="viewport"
  sizes={{ mobile: 480, tablet: 768, desktop: 1200 }}
/>

Screen	`srcset` (default)	`viewport`
Mobile @1×	480w	480w
Mobile @2×	1200w (DPR-aware)	480w
Desktop	1200w	1200w

Host encodes size in the path instead of ?w=? Point it wherever you want with srcSetBuilder:

srcSetBuilder={(src, width) => src.replace(/(\.\w+)$/, `-${width}$1`)}
// /photo.jpg → /photo-480.jpg

Compose everything

The features are orthogonal — stack them:

<SmartImage
  src="/product.jpg"
  alt="Product photo"
  width={600}
  height={600}
  lazy
  skeleton
  webp
  fallback="/placeholder.png"
  retry={2}
  retryDelay={1000}
  onLoadInfo={({ loadTime, fromCache }) =>
    console.log(`Loaded in ${loadTime}ms (cache: ${fromCache})`)
  }
/>

That onLoadInfo callback hands you loadTime, naturalWidth/Height, and a fromCache flag — real performance telemetry per image, for free.

Why not just use `next/image`?

next/image is great — if you're on Next.js. react-smart-image works in any React app: Vite, CRA, Remix, Gatsby, a plain SPA. No image server required, no framework lock-in, no runtime dependencies. Think of it as a modern, framework-agnostic upgrade to the standard <img> element.

Try it

npm install @concatstring/react-smart-image

📦 npm
💻 GitHub
🔗 Live Demo

If React Smart Image saves you from writing the same image-loading code again, I'd really appreciate a ⭐ on GitHub.

Feedback, feature requests, and bug reports are always welcome. If there's a feature you'd like to see, let me know in the comments or open an issue.

Built by the team at Concatstring.