Does the image component deliver different sizes on different screen sizes?
Unanswered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
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
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 Image from "next/image";
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>
);
}5 Replies
@Asiatic Lion 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 Image from "next/image";
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>
);
}
you can for example do this:
Like that you get different image optimizations on different screensizes, because it 100vw
<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
@B33fb0n3 you can for example do this:
tsx
<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
Asiatic LionOP
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?
@Asiatic Lion 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?
yes, then you should set it, because it can be responsive then and make the image responsive as well 👍
@B33fb0n3 yes, then you should set it, because it can be responsive then and make the image responsive as well 👍
Asiatic LionOP
I have thought that was responsive by default until now