srcset and sizes are not compatible

[monolithed]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

➜ npx --no-install next info

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:17:35 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T8112
    Binaries:
      Node: 18.17.1
      npm: 9.8.1
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.19
      eslint-config-next: 13.4.3
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A


warn  - Latest canary version not detected, detected: "13.4.19", newest: "13.4.20-canary.1".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) of Next.js are affected? (leave empty if unsure)

Standalone mode (output: "standalone")

Describe the Bug

I want to generate an srcset based on exactly what I passed to sizes. It's required because the sizes of my images are carefully tailored to match different screen dimensions, and their distortion or arbitrary sizing is unacceptable.

Having set the 'sizes' attribute, I encountered the following issues:

1. The values in the srcset do not match the sizes values
2. Only the largest file size is always delivered
3. The srcset generated is larger than the actual file size.
4. In the standalone directory, I couldn't find images different from the main one. Should they be generated?
5. I tried to set srcSet manually, but it's not allowed. Why?

In additional, I am aware of the existence of image.imageSizes, but I cannot set it because my project has over 50 pages, each with a unique set of image sizes. I really don't understand the purpose of this option, as each image has unique proportions. This option should be generated for each image individually, rather than universally for all, and certainly not have predefined values exceeding the actual image sizes.

Input:

<Image src={image.url}
       quality={100}
       placeholder="blur"
       fill={true}
       sizes="(max-width: 1500px) 460w,
                  (max-width: 992px) 100vw,
                  (max-width: 712px) 642w,
                  (max-width: 600px) 450w,
                  (max-width: 450px) 350w,
                  (max-width: 375px) 310w,
                  (max-width: 320px) 280w,
                  100vw"
       alt=""
/>

Output:

<img alt="" loading="lazy" decoding="async" data-nimg="fill" class="card_image__tpJxJ" 
style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;" 
sizes="
    (max-width: 1500px) 460w, 
    (max-width: 992px) 100vw, 
    (max-width: 712px) 642w, 
    (max-width: 600px) 450w, 
    (max-width: 450px) 350w, 
    (max-width: 375px) 310w, 
    (max-width: 320px) 280w, 100vw" 
srcset="
    /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcommunications.ce88988d.webp&amp;w=640&amp;q=100 640w, 
    /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcommunications.ce88988d.webp&amp;w=750&amp;q=100 750w,
    /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcommunications.ce88988d.webp&amp;w=828&amp;q=100 828w, 
    /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcommunications.ce88988d.webp&amp;w=1080&amp;q=100 1080w, 
    /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcommunications.ce88988d.webp&amp;w=1200&amp;q=100 1200w, 
    /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcommunications.ce88988d.webp&amp;w=1920&amp;q=100 1920w, 
    /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcommunications.ce88988d.webp&amp;w=2048&amp;q=100 2048w, 
    /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcommunications.ce88988d.webp&amp;w=3840&amp;q=100 3840w"
    src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcommunications.ce88988d.webp&amp;w=3840&amp;q=100"
>
>>

Expected Behavior

<img alt="" loading="lazy" decoding="async" data-nimg="fill" class="card_image__tpJxJ" 
style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;" 
sizes="
    (max-width: 1500px) 460w, 
    (max-width: 992px) 100vw, 
    (max-width: 712px) 642w, 
    (max-width: 600px) 450w, 
    (max-width: 450px) 350w, 
    (max-width: 375px) 310w, 
    (max-width: 320px) 280w, 100vw" 
srcset="
    /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcommunications.ce88988d.webp&amp;w=460w&amp;q=100 460w, 
    /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcommunications.ce88988d.webp&amp;w=100vw&amp;q=100 100vw,
    /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcommunications.ce88988d.webp&amp;w=642w&amp;q=100 642w, 
    /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcommunications.ce88988d.webp&amp;w=450w&amp;q=100 450w, 
    /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcommunications.ce88988d.webp&amp;w=350w&amp;q=100 350w, 
    /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcommunications.ce88988d.webp&amp;w=310w&amp;q=100 310w, 
    /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcommunications.ce88988d.webp&amp;w=280w&amp;q=100 280w, 
    src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcommunications.ce88988d.webp&amp;w=100vw&amp;q=100"
>
>>

Why does it matter?

1400px

800px

450px

If you pay attention, you'll notice that for a medium-sized screen (800px), a larger image is being used compared to a larger screen (1400px). And this is a common practice on many websites.

[monolithed]

Duplicate #27547?

[karlhorky]

Wonder if sizes="auto" will help with this problem in future (once more browsers support it):

• https://twitter.com/addyosmani/status/1730649847769035254