Repository: next.js
Issue: srcset and sizes are not compatible
Labels: bug,Output (export/standalone)

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
➜ 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:**

```jsx
<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:**

```jsx
<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"
>
>>
```

<img width="474" alt="Screenshot 2023-08-22 at 21 14 27" src="https://github.com/vercel/next.js/assets/803674/f8411566-d6ae-46a2-a4b2-79a1d19f88c2">


<img width="754" alt="Screenshot 2023-08-22 at 21 16 07" src="https://github.com/vercel/next.js/assets/803674/3af949c1-7a8b-4762-a001-6176da9be077">


### Expected Behavior

```jsx
<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**

<img width="1255" alt="Screenshot 2023-08-23 at 15 46 58" src="https://github.com/vercel/next.js/assets/803674/b156c3b0-e7e6-403f-b300-e18a2ab3d268">

**800px**

<img width="794" alt="Screenshot 2023-08-23 at 15 46 27" src="https://github.com/vercel/next.js/assets/803674/6fef4d14-f22e-4a18-bf3d-e726beb93010">


**450px**

<img width="482" alt="Screenshot 2023-08-23 at 15 46 41" src="https://github.com/vercel/next.js/assets/803674/c3fefade-8ac7-4069-9915-cfb147fdd8ef">

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.