next/image Intrinsic image sizes are the same in srcSet

[hou-austin]

When using next/image, the "optimized image" all have the same sizes. Are the multitudes of generated URLs supposed to be of different sizes? I don't see the point of using this component otherwise. Here's the code:

<Image
  src={imageURL}
  alt="showcase image"
  width={800}
  height={450}
/>

I've also tried out the other layout options, none of which seem to generate differently sized images.

and the generated outerHTML using layout fill:

<img alt="showcase image" src="/_next/image?url=%2Fimages%2Fspacewaves.png&amp;w=3840&amp;q=75" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" srcset="/_next/image?url=%2Fimages%2Fspacewaves.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Fspacewaves.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Fspacewaves.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Fspacewaves.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Fspacewaves.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Fspacewaves.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Fspacewaves.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Fspacewaves.png&amp;w=3840&amp;q=75 3840w" sizes="100vw">

When I visit the links of the generated images, they are definitely the original size. Is there something I'm doing wrong? From what I see in the docs, it seems like the sizes attribute's default should work fine.

Examples:

[icyJoseph]

Hi,

You are correct to assume:

Are the multitudes of generated URLs supposed to be of different sizes?

Yes.

What's going on?

The thing is that the src-set is used to download images as the screen width changes.

You are starting from the largest viewport you've got, so the browser gets the image source for that one, and since it already has it, it'll use it for any, and all, narrower screens.

Try to narrow your screen, and reload the site, now you'll see the image loaded by the browser is the one that's matches the src-set media queries, and for any smaller screen, this image is used. If you stretch the viewport, the browser starts to download the bigger size images.

Experiment

Try with this demo, https://image-component.nextjs.gallery/layout-fill, start at narrow screen, and see the size of the first image, it should be about 7kB, all src-sets show the same data.

As you stretch the viewport, the other src-sets, start to get their own size data. You can see these new request being made in the network tab as well!

However, if you start from a very wide screen and narrow down the viewport... nothing happens, you still have the 35kB image loaded by the browser for the wide screen.

[hou-austin]

Thanks for the reply, Joseph. That sounds like what I think should be happening, but it appears that I'm not actually getting smaller image sizes no matter how big my browser window is. I'm always getting the 8K source image at a massive 9mb, whilst the rendered size is less than 1000px wide.

I want to add that going to next/future/image has at least optimized the image into a WEBP format instead of its native PNG, which next/image was doing. I'll take some time to figure out how to get more image sizes using future/image.

[icyJoseph]

Odd. Are you reloading the browser as you test? If you don't it just won't fetch more images, if you are already at the largest viewport. You have to start from zero, so to speak, with the smallest viewport.

Try installing sharp as well, just install it and let it be declared on your package.json, the default tool used by Next is not that good, is more of a fallback, they rather have you use sharp.

[icyJoseph]

It's also strange that the format is not WEBP out of the box with next/image, because IIRC, it always tries that format first, otherwise is uses the original image format.

https://nextjs.org/docs/api-reference/next/image#acceptable-formats

[OskarGroth]

Maybe relevant: #37265
I've found the NextJS Image component to be utterly broken in this regard. There is no sustainable way to fetch assets at optimum file sizes. Kind of mind-boggling that so much work has gone into this component without supporting this fundamental use case.

[Fritze1602]

Hi, I stumbled into the same problems with next 13.0.0 Simple image with height and width is not providing correct srcset for smaller screens. Google is complaining with "Properly size images". Do I overlook something ovious or is there any movement on this most basic use-case?

[kevcmk]

I'm so impressed that this just sits here unattended to / unaddressed

[karol1500]

We're facing the same issue. I'm surprised that a framework vastly marketed because of its optimisation benefits fails in such a basic task. The subject deserves at least better documentation and possibly a working solution.

[vdilly]

Still no update on this matter 1 year later ?

[nemico96]

Hh

[nemico96]

Not sure if it was an actual issue, since you‘re looking at the srcsets inside of the developer tools. You should check the network tab and look how much data is transferred. If everything works fine you can see the reduces file sizes inside of the network records.

[ShahriarKh]

I'm facing this, but only when using responsive mode in Chrome.
(320px screen without responsive mode: ✅, 320px screen with responsive mode: ❌)

I think the emulator starts with a large screen, then scales down to a smaller size to show the mobile version, and it causes larger images to load first (just like @icyJoseph mentioned above)

[akshat-solvios-technology]

@hou-austin I am using next js 15 and I added Sharp package and now it works for me.

https://www.npmjs.com/package/sharp

[akshat-solvios-technology]

@hou-austin I spent around 5 hours to search for the solution online, and all I found is that browser is not calling the proper image, although browser was calling perfect images as per the requirement, but next js was not compressing and resizing as per the parameters, then I thought to throw next js inbuilt image optimizer and install third party image optimizer, but that third party image optimizer told that in order to generate src set that third party package will need sharp to be installed, and during the research I also read sharp somewhere, so I thought let's keep next js in built image optimizer, but install sharp, and that's it, it worked for me.

[beobungbu]

✅ Workaround to Customize srcSet in Next.js (next/image)

I came up with a workaround solution for customizing the srcSet behavior in Next.js 14.1.3.

---

🛠 Step-by-Step Instructions

1. Install patch-package

If you're using Cloudflare Pages, Vercel, or any cloud CI/CD platform, you must install patch-package as a production dependency:

npm install patch-package

✅ This ensures it's available during the build step (e.g. npm run build).

Then update your package.json:

{
  "scripts": {
    "postinstall": "patch-package"
  }
}

---

2. Add Patch File

Create a patches/ folder at the root of your project and place the patch file inside it:

./patches/next+14.1.3.patch

👉📎 Download patch file here next+14.1.3.patch

This file should contain your modified generateImgAttrs logic or other changes to the next/image internals.

---

3. Apply the Patch

After modifying or adding the patch:

npm install
# or
npm run postinstall

Your patch will be automatically applied after every install or build.

---

🎯 Customizing srcSet (with logic example)

You can override how srcSet, sizes, and src are generated by defining a function like this:

const customGenerateImgAttrs = (params) => {
  let srcSets = [];

  const input = [
    { vw: 320, w: 40 },
    { vw: 414, w: 40 },
    { vw: 576, w: 40 },
    { vw: 767, w: 60 },
    { vw: 992, w: 40 }
  ];

  input.forEach(({ vw, w }) => {
    const calculatedWidth = Math.round((w * vw) / 100);
    const options = [
      'format=auto',
      'fit=scale-down',
      'quality=75',
      `width=${calculatedWidth}`
    ];
    const paramsString = options.join(',');
    srcSets.push(`/cdn-cgi/image/${paramsString}/${params.src} ${vw}w`);
  });

  return {
    sizes: params.sizes,
    srcSet: srcSets.join(', '),
    src: srcSets[srcSets.length - 1],
  };
};

Then pass it to the Image component (assuming your patch allows for customGenerateImgAttrs):

<Image
  src={src}
  alt={alt}
  width={width}
  height={height}
  sizes="(max-width: 576px) 40vw, (max-width: 767px) 60vw, (max-width: 1200px) 30vw, 498px"
  {...props}
  customGenerateImgAttrs={customGenerateImgAttrs}
/>

---

✅ Confirmed Working On:

• Next.js 14.1.3
• Cloudflare Pages (with patch-package as production dependency)