Two Images, Different Sizes!
https://i.sstatic.net/vpoNG.jpg
There seems to be a discrepancy in size between the image rendered by the next/img component and the one displayed using the img element. Interestingly, they both use the same image source and are styled similarly! However, it appears that the next/image component automatically scales down the image while the img element does not.
Image by
next/imghttps://i.sstatic.net/y5ppW.jpgImage by
imgelement https://i.sstatic.net/1Jzw6.jpg
Sample code:
export default function Home() {
return (
<div className="flex">
<Image src={appleImage} alt="apple" priority />
<Image src="/apple.png" width={600} height={840} alt="apple" />
<img src="/apple.png" alt="apple" />
<img src="/apple.png" width={600} height={840} alt="apple" />
</div>
);
}
*The flex classname is from tailwind.css
.flex {
display: flex;
}
I am curious as to why these two images have different sizes.