--- title: How to Lazy Load Images in React | daily.dev description: Lazy loading is a strategy that delays the loading of some assets (e.g., images) until they are needed by the user based on the user's activity and navigation... canonical: https://daily.dev/posts/how-to-lazy-load-images-in-react--5d2gcr0k twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How to Lazy Load Images in React | daily.dev og:description: Lazy loading is a strategy that delays the loading of some assets (e.g., images) until they are needed by the user based on the user's activity and navigation... og:url: https://daily.dev/posts/how-to-lazy-load-images-in-react--5d2gcr0k og:image: https://api.daily.dev/og/posts/-5d2GCR0k.png og:image:alt: How to Lazy Load Images in React og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How to Lazy Load Images in React **[freeCodeCamp](https://daily.dev/sources/freecodecamp)** · [@eke](https://daily.dev/eke) · 5 min read · 197 upvotes · 15 comments ## Summary Lazy loading is a strategy that delays the loading of some assets (e.g., images) until they are needed by the user based on the user's activity and navigation pattern. For browsers like Firefox, the loading= "lazy" property doesn't work in an iframe element. To use the placeholder image, add a PlaceholderSrc attribute to the image with the value of the image. You can see how it is. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@tugrulyildirim** · 5 upvotes > thx for sharing, nice article ! **@hermesc** · 1 upvotes > Thx, good article **@kliton** · 1 upvotes > Good ;) **@eke** · 1 upvotes > Thanks for reading, @tugrulyildirim ✨ **@rooneywayne** · 1 upvotes > 👍This library is very good, I will give it a try in the next new project, thank the author for sharing, it is very good. ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react) [View this post on daily.dev](https://daily.dev/posts/how-to-lazy-load-images-in-react--5d2gcr0k) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How to Lazy Load Images in React","url":"https://daily.dev/posts/how-to-lazy-load-images-in-react--5d2gcr0k","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-to-lazy-load-images-in-react--5d2gcr0k"},"datePublished":"2022-09-01T00:48:30.081Z","dateModified":"2022-09-01T00:48:30.016Z","description":"Lazy loading is a strategy that delays the loading of some assets (e.g., images) until they are needed by the user based on the user's activity and navigation...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/d53575806e5b67f35e6243a188cfdd6d","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/d53575806e5b67f35e6243a188cfdd6d","isAccessibleForFree":true,"articleSection":"freeCodeCamp","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Victor Eke","url":"https://daily.dev/eke","image":"https://media.daily.dev/image/upload/s--5vAq8VH2--/f_auto,q_auto/v1/avatars/avatar_TLIGhGnDdkXmasKFEixGn","description":"Software Developer and Technical writer passionate about open source and learning","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":760}},"commentCount":15,"discussionUrl":"https://daily.dev/posts/how-to-lazy-load-images-in-react--5d2gcr0k","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":197},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":15}],"keywords":"react","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"freeCodeCamp","item":"https://daily.dev/sources/freecodecamp"},{"@type":"ListItem","position":3,"name":"How to Lazy Load Images in React"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/how-to-lazy-load-images-in-react--5d2gcr0k","comment":[{"@type":"Comment","text":"thx for sharing, nice article !","datePublished":"2022-09-01T06:20:01.266Z","url":"https://daily.dev/posts/-5d2GCR0k#c-yBC5q8BJQ","author":{"@type":"Person","name":"tugrulyildirim.com","url":"https://daily.dev/tugrulyildirim","image":"https://avatars1.githubusercontent.com/u/58388980?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"Thx, good article","datePublished":"2022-09-25T19:06:28.236Z","url":"https://daily.dev/posts/-5d2GCR0k#c-xKhjiXfdJ","author":{"@type":"Person","name":"Hermes","url":"https://daily.dev/hermesc","image":"https://avatars.githubusercontent.com/u/69329203?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Good ;)","datePublished":"2022-09-25T18:05:34.703Z","url":"https://daily.dev/posts/-5d2GCR0k#c-1DfxWohXG","author":{"@type":"Person","name":"Kliton Bare","url":"https://daily.dev/kliton","image":"https://media.daily.dev/image/upload/f_auto/v1664104847/avatars/8SaTDkd276CpjZnIGnFat"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Thanks for reading, @tugrulyildirim ✨","datePublished":"2022-09-01T12:55:20.819Z","url":"https://daily.dev/posts/-5d2GCR0k#c-WEz80Ytle","author":{"@type":"Person","name":"Victor Eke","url":"https://daily.dev/eke","image":"https://media.daily.dev/image/upload/s--5vAq8VH2--/f_auto,q_auto/v1/avatars/avatar_TLIGhGnDdkXmasKFEixGn"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"👍This library is very good, I will give it a try in the next new project, thank the author for sharing, it is very good.","datePublished":"2022-09-02T15:25:49.509Z","url":"https://daily.dev/posts/-5d2GCR0k#c-LEPfY3TOx","author":{"@type":"Person","name":"Rooney Wayne","url":"https://daily.dev/rooneywayne","image":"https://lh3.googleusercontent.com/a-/AFdZucr2qUbvhcg0NKc4UVciuw97ucnjK9SkWuuzygOY=s100"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```