@Netherland Dwarf In native image tag, we have srcset to have different sized images(responsive images) and also totally different images for different dimensions.
However in next.js for responsive image, they have sizes property - but I don't think this allows us to have different images.
The only way to do that is just conditional rendering @Netherland Dwarf

Thank you @James4u I will give it a try.

it worked thank you very much

happy to help you! mark solution please 🙂

This is the solution. Need to optimize to be dry but it works.

yeah, it looks okay. I only meant marking an answer as a solution

🙂

oh haha. Got it

and also, you are using totally different images - not only the size, right?

yes the 3 images are different optimized each one for better quality.

can you show me those three images if you don't mind?

is it just the quality & size or totally different images? like 🐻 in the desktop and 🐰 in the tablet and 🐭 in the mobile lol

correct it's just the quality and size sending in a minute

omg, then you should use sizes property @Netherland Dwarf

will it automatically know the images I need?

yeah, they automatically generate small sized optimized images!

check out the docs and video I shared

okay ,I will check it out

I tried using the sizes attribute but for some reason it's not pulling the images for tablet and desktop size? What might I be doing wrong?

you are using mobileHomeBg - which is the smallest I believe

you should provide desktopHomeBg

These 3 images are in the home folder. Should the src just be the home and then it will pick the photo??