Custom width and height based on the breakpoint on <Image /> component

[thorny sinew]

Hi devs, how can i set different dimensions to a <Image /> component based on the breakpoint?

<div className="md:ml-auto flex justify-center items-center">
  <Image
    src="/cocktail.png"
    alt="Cocktail"
    width={400}
    height={400}
    className="rounded-lg"
  />
</div>

[grand hare]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[young coyote]

<Image
src="/cocktail.png"
alt="Cocktail"
width={400}
height={400}
className="rounded-lg h-10 w-10 md:h-40 md:w-40"
/>

[low meteor]

From https://nextjs.org/docs/pages/building-your-application/optimizing/images#remote-images

The width and height attributes are used to infer the correct aspect ratio of image and avoid layout shift from the image loading in. The width and height do not determine the rendered size of the image file. Learn more about Image Sizing.
https://nextjs.org/docs/pages/building-your-application/optimizing/images#image-sizing