How To Lazy Load Images In React? See Example

Lazy loading delays the loading of images or components until they are about to appear in the viewport.
This improves page load speed and performance.

---

Native Lazy Loading Example

function App() {
  return (
    <div>
      <h1>React Lazy Loading Images</h1>
      <img src="image1.jpg" alt="Image 1" loading="lazy" />
      <img src="image2.jpg" alt="Image 2" loading="lazy" />
    </div>
  );
}

✅ Images load only when they are near the viewport.

---

Using React Lazy for Components

import React, { Suspense } from "react";

const LazyImage = React.lazy(() => import("./LazyImage"));

function App() {
  return (
    <Suspense fallback={<p>Loading Image...</p>}>
      <LazyImage />
    </Suspense>
  );
}

✅ Component loads only when needed, with a fallback UI.

---

Key Points

• Improves performance and speed
• Reduces initial page load size
• Use loading="lazy" for native image support
• Use React.lazy + Suspense for component-based lazy loading

---

Conclusion

Lazy loading images in React enhances performance, reduces bandwidth, and improves user experience for large or image-heavy applications.

---

Citations

https://savanka.com/category/learn/react/
https://www.w3schools.com/REACT/DEFAULT.ASP