Does the image component deliver different sizes on different screen sizes?

[modest pendant]

Hello I have alway thought image component automatically deliver different sizes on different screen sizes , but how automatically , when and what size
so I have make various test to prouve it, but got same size of image for any size of screen, I have dit in chrome console and have disabled cache
the image was converted to webp good, but there only one size for all devices

import kebab from "../../public/kebab.png";
export default function Home() {
  return (
    <div className="w-full h-full">
      <Image src={kebab} alt="kebab" className="object-contain"></Image>
    </div>
  );
}

[fallow wadi]

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)

[white coral]

you can for example do this:

<Image
    src={imageLink}
    alt={"picture"}
    placeholder={"empty"}
    width="0"
    height="0"
      sizes="100vw"
    className="w-full h-auto rounded"
/>

Like that you get different image optimizations on different screensizes, because it 100vw

[modest pendant]

Thank you, got different size with props sizes="100vw" now! I can't understand the logic here, if we want responsive images 'sizes' props is a must set?

[white coral]

yes, then you should set it, because it can be responsive then and make the image responsive as well 👍

[modest pendant]

I have thought that was responsive by default until now