feat: optimized image loading with Next.js Image component #819
feat: optimized image loading with Next.js Image component #819harshhgithub wants to merge 13 commits intoasyncapi:masterfrom
Conversation
harshhgithub
requested review from
AceTheCreator,
Mayaleeeee,
ashmit-coder and
thulieblack
as code owners
harshhgithub
changed the title
✅ Deploy Preview for peaceful-ramanujan-288045 ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
❌ Deploy Preview for peaceful-ramanujan-288045 failed.Built without sensitive environment variables
|
AceTheCreator
left a comment
AceTheCreator
left a comment
There was a problem hiding this comment.
@harshhgithub your PR is not addressing the issue thread 🤔
Thanks for the feedback, @AceTheCreator! 🙏 I’ll update the PR accordingly and push the changes soon . |
|
@AceTheCreator please review |
AceTheCreator
left a comment
AceTheCreator
left a comment
There was a problem hiding this comment.
@harshhgithub I think you may want to reconsider your approach. Instead of using a fallback image, which will still need to load on the initial render, you could just blur it: Here’s a great tutorial showing how someone implemented it: https://www.meje.dev/blog/nextjs-image-blur-on-load
|
@AceTheCreator Thanks for the feedback! |
|
@AceTheCreator any review on this |
| const [isLogoLoading, setLogoLoading] = useState<boolean>(true); | ||
| const [isRocketLoading, setRocketLoading] = useState<boolean>(true); |
There was a problem hiding this comment.
no need to create states. you can just use placeholder="blur" on the Image tag.
also resolve the conflict
4 participants
Resolves: #796
This PR further improves the website’s image performance and perceived load speed by introducing blur placeholders and a custom image loader across pages.
Changes Made-![]()
tags are now replaced by optimized ![]()
components.
Added loader prop using a custom loader for fallback handling.
Implemented placeholder="blur" and blurDataURL for key images (e.g., hero, popup, and rocket GIF).
Ensured all
Verified above-the-fold images still use the priority prop.
Verification-
Lighthouse score improved for image metrics.
Verified blur placeholders appear before full image load.
No layout shifts or broken visuals.