Nice catch and detailed reporting. 🙏

I am facing the same issue. Are there any updates ?

Are you considering the pixel density of your device? In your screenshot the srcset contains x modifiers. It's picking the 1920px 2x image because of pixel density.

If you use a sizes prop like 100vw it should give you a srcset with w modifiers for a responsive image. Even in that case you'd have to consider device pixel ratio. If the srcset is for example small.jpg 400w, large.jpg 700w on a 375px viewport with a pixel density of 2 it'll actually load the large image.

Same problem, with page router as well as app router (13.3.1).

Facing the same problem:

<Image src={/...} width={40} height={40} />

Source image is 200x200 pixels but generated srcset calls an image version sized 48x48 for 1x and 96x96 for 2x 🧐

@romainbriand +1
<Image src={iconSrc} alt='' width={16} height={16} />
source image is 32x32 px but rendered size is 16x20, where is 20 come from?

Currently having the same problem, source image is 720px in width, but rendered size is 750px in width -- messing with aspect ratio thus displaying rather blurry image.

Facing the same problem. I'm getting lower score in PageSpeed Insights for the mobile version due to "Properly size images" opportunity.

I currently have the same problem, too

I can repro as well. In my <Image> component I specify a width of 1500px and a height of 1000px but the 2x image is 3840px wide.

I'm still having this issue on 13.5.1.
When the window is 2048px wide, it generates me a nice 2048px image, but if the window is 2049px, it will try to generate a 3840px wide image and timeout.
Here is my component

<Image
  src={HeroBackground} // https://651f9af212fba00008bba0ed--extraordinary-cucurucho-baaf57.netlify.app/hero_background.png source image is 4096x1868
  fill
  alt='Aerial view of New York'
  className='absolute top-0 left-0 h-full object-cover'
  placeholder='blur'
  priority
  style={{ objectFit: 'cover', maxWidth: '2048px' }}
  sizes='(max-width: 2048px)'
/>

Here's a permalink with the issue: https://651f9af212fba00008bba0ed--extraordinary-cucurucho-baaf57.netlify.app/

@Pedromigacz You're using sizes incorrectly. Look at examples, and MDN docs. It should be a media query, and then a size for the image, and the last value of sizes must not have a media query.
Assuming you want a full-width image at 2048px, I think this is what you mean

  sizes='(max-width: 2048px) 100vw, 100vw'

next/image will fetch a 3840px image because that's the next image breakpoint. See https://nextjs.org/docs/app/api-reference/components/image#devicesizes to custom define it in next.config.js

also, nit: src should be a string, and your naming of HeroBackground suggests that it's a component.
also, style={{ maxWidth: '2048px' }} constrains how the image is shown, not the resolution that it's fetched at.
also, if you use placeholder='blur' you need to include a blurDataURL for that to work (docs).

As to why it's timing out, that sounds like some other issue...

(sorry to spam everyone on this thread)

Are you considering the pixel density of your device? In your screenshot the srcset contains x modifiers. It's picking the 1920px 2x image because of pixel density.

If you use a sizes prop like 100vw it should give you a srcset with w modifiers for a responsive image. Even in that case you'd have to consider device pixel ratio. If the srcset is for example small.jpg 400w, large.jpg 700w on a 375px viewport with a pixel density of 2 it'll actually load the large image.

What actually happens when I pass a 100vw prop to sizes?

@pjaws , I have same issue, do you have any updates?

setting style={{objectFit: "contain"}} works properly for me.

<Image src={src} width={500} height={500} style={{objectFit: "contain"}}></Image>

Same issue still present in 14.2.4

e.g. an Image component with the following:
sizes='(max-width: 1100px) 100vw, 1100px'

seems to correctly construct srcset when inspecting (albeit pointlessley up to the max breakpoint of 3840), but always loads the 1200 breakpoint version even on mobile.

I had the same issue and after two days of pulling my hair out, I concluded that this is a feature and not a bug… (Although I’m not sure all reported issues here are due to the same cause...)

As someone above already mentioned:
The Image component takes DPR into account. So if your viewport is 200px width and DPR is 2x, it will try to serve the image closest to 400px. The browser will default to your machines' resolution, which in my case is 2x (MacBook).

You can easily test this in the dev tools when enabling the DPR dropdown and switching between 1/2/3 DPR settings.
You may need to enable the DPR setting first to see it. In Chrome/Arc it is not visible by default.
(After I tested the different settings and checked the network tab for the loaded image size, the world made sense again…).


If you enable an emulated device in the browser, it will use the appropriate DPR for that device. -->

I haven’t found a way to avoid this behavior besides just using a regular ol’ img-tag with x descriptors.

Another (overcomplicated) way might be to use the new-ish getImageProps() to create an image-set and tell it to use the same image size for all resolutions – but that's just an outlandish theory I haven't tested (yet).

Also: unless you set/override them manually in the .config, Next uses default deviceSizes and imageSizes to generate the srcSet which are:
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840]
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384]

-> which might explain why @romainbriand is getting 48x48 and 96x96 instead of 40/80 if sizes prop is set

-> which might explain why @zakinadhif is getting 750 instead of 720
-> which also explains the max breakpoint of 3840 @Ma-Kas

hope it helps :)