How to show Images SMOOTHLY with Next.js Image Component

❤️Please Support me by subscribing to my channel 👉🏻www.youtube.co...
In this tutorial video, I will be showing you how to use the Next.js Image element to load images seamlessly on your website. With the help of this powerful tool, you can ensure that your images are optimized and load quickly, without compromising on quality.

[@Jdsg1234]

Thank you! Can you show blurDataURL as well if you get a chance?

[@ingoandelhofs]

What about if the image source is changing, how to smoothly transition even when the two different versions are requested directly after each other

[@Spinall01]

How could this be done in a server component?

[@andrewc8125]

Very nice. But It will ignore the cached image. Would be nice if there is solution for this.

[@SakuraDev]

Hi, I do some research about it and let you know 🌹

[@trusht]

great tip, thank you.

[@SakuraDev]

Thanks 😊👍

[@gota8922]

Works great! Thanks a lot 😊

[@SakuraDev]

Thanks for your nice feedback 🌷

[@hooyah]

Can you show code onloadingxomplte? I cant imagine that's code.or can you share fully image component code

[@SakuraDev]

The Image component is Next.js 13 Image component. you can find it in next.js documentation

[@hooyah]

@@SakuraDev image component nextjs have onLoadingComplete? i see i see thankyou 😍

[@Happyday-nn6rh]

i like trick of nextjs TNX

[@SakuraDev]

thanks

[@quamzgraphix9826]

Nice trick 👍

[@SakuraDev]

thanks

[@KlausThePuss]

ok, but how do I use it with placeholder='blur" in next component? when i use it, the blurDataURL also got with opacity-0 until the onLoadingComplete function trigger, please help me

[@treyrader]

you do know that you don't have to use a custom unit for a 2s transition speed right? I think that's 200 in tailwind. also, you can just set the oapcity to none. That's tailwind's version of removing it from the V dom. You must be just learning the tailwindcss library huh?

[@tamaspal1864]

2s is 2000ms not 200

[@treyrader]

@@tamaspal1864 damn im dyslexic. Had i plugged it in, i'd have known this lol

[@MayankMishra-oy5xe]

One slight problem with this approach. If you add 2 seconds of delay in showing images, it further increases your LCP time which is poor for SEO. The LCP time should be less then 2.5 seconds at all cost. So even if you reduce the above number from 2 to 1 seconds, your LCP will still be affected as there is already some delay added to LCP due to latency and rendering code. So I won't recommend this approach for production use cases and specially not if SEO plays vital role in your Business. Perhaps there could be another way...

[@SakuraDev]

Nice tip 👍. I didn't know that. Thanks for bringing that to my attention 🙂

[@MayankMishra-oy5xe]

Always brother. Actually I too just realised this after I used this approach and did some SEO test.@@SakuraDev

[@raphauy]

Thanks

[@SakuraDev]

Thanks. I'm glad you found the video helpful