Next.js Discord

Discord Forum

"next/image" responsive width/height

Answered
Sun bear posted this in #help-forum
Open in Discord
Sun bearOP
How do I specify different image resolution for mobile and desktop devices.

I am loading a large image in my hero section, my <Image /> is set to width={1920} height={1080} for my desktop (and currently for mobile).

How do I reduce the size of the image on mobile devices since they would have the maximum width of the image to be like 640px and I am currently loading 1920px, 3 times bigger than I can display.

Would this even improve the largest contentful paint time?

6 Replies

Answer
Manx
@James4u Can you help me on this? 😅 #How to solve this?
@Manx <@970430299014041630> Can you help me on this? 😅 <#1265334737656872960>
Don't ping others for help with your troubles - you also don't have enough explanation for your forum
no worries, just make sure you have enough explanation about your issue so that others can reach out to you with any help