Rendered image size is bigger than expected when using `<Image />`

[latent obsidian]

Currently, one of my usage is:

<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?

[pearl locust]

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)

[pine linden]

try setting layout to fixed

@latent obsidian

[latent obsidian]

What layout? You mean position or something?

[pine linden]

<Image
  src={contentfulImage}
  loader={contentfulLoader}
  width={200}
  height={200}
  layout={"fixed"}
/>

[pine linden]

I mean the attribute

[pine linden]

@latent obsidian is your issue resolved?

[latent obsidian]

No it doesn't. In fact, it seems like a bug. The correct size is returned in DEV, but not in PROD

[latent obsidian]

OK I see what happened.
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.