Rendered image size is bigger than expected when using `<Image />`
Answered
Asian paper wasp posted this in #help-forum
Asian paper waspOP
Currently, one of my usage is:
with all the rest of the image-related config left in default.
Yet, on my site, I can see the image size is 640px, i.e. the smallest
Which part goes wrong?
<Image
src={contentfulImage}
loader={contentfulLoader}
width={200}
height={200}
/>with all the rest of the image-related config left in default.
Yet, on my site, I can see the image size is 640px, i.e. the smallest
deviceSize. I thought it should be 200px instead, and deviceSizes will only take effect when sizes is specify?Which part goes wrong?
Answered by Asian paper wasp
OK I see what happened.
It is due to
When both are specified, Next.js will preload the 1x and 2x of the image, instead of just the necessary version. Since a higher resolution image is available, the browser will always uses the 2x one.
It is due to
loader + priority (which I forgot to mention in the OP).When both are specified, Next.js will preload the 1x and 2x of the image, instead of just the necessary version. Since a higher resolution image is available, the browser will always uses the 2x one.
8 Replies
@Asian paper wasp
@Anay-208 try setting layout to fixed
Asian paper waspOP
What layout? You mean
position or something?<Image
src={contentfulImage}
loader={contentfulLoader}
width={200}
height={200}
layout={"fixed"}
/>@Asian paper wasp What layout? You mean `position` or something?
I mean the attribute
@Asian paper wasp is your issue resolved?
Asian paper waspOP
No it doesn't. In fact, it seems like a bug. The correct size is returned in DEV, but not in PROD
Asian paper waspOP
OK I see what happened.
It is due to
When both are specified, Next.js will preload the 1x and 2x of the image, instead of just the necessary version. Since a higher resolution image is available, the browser will always uses the 2x one.
It is due to
loader + priority (which I forgot to mention in the OP).When both are specified, Next.js will preload the 1x and 2x of the image, instead of just the necessary version. Since a higher resolution image is available, the browser will always uses the 2x one.
Answer