Repository: next.js
Issue: srcSet ignores sizes provided
Labels: bug,Image (next/image)

### What version of Next.js are you using?

11.0.1

### What version of Node.js are you using?

14.15.4

### What browser are you using?

Chrome Version 92.0.4515.107 (Official Build) (x86_64)

### What operating system are you using?

macOS 11.5

### How are you deploying your application?

Vercel

### Describe the Bug

When I supply valid `sizes`, Nextjs ignores the intersection between these sizes and the `deviceSizes` & `imageSizes` contained in the `next.config.js` file. As a result, a file that will only ever appear on-screen at 280px (or 560px @ 2.0 pixel density, or 840px @ 3.0 pixel density) still generates **every** size, all the way up to 3840w.

Fortunately, the browser still requests the correct image for each screen resolution, but there are many sizes which are unreachable by any browser or device, and these are typically the largest, most resource-intensive ones to produce and maintain.

### Expected Behavior

If provided, Nextjs should parse the `sizes` value to determine which `deviceSizes` & `imageSizes` are applicable to each image. Since both monitors & devices have a pixel density from 1.0 to 3.0 (or higher, though I recommend this as a sane limit), the smallest value in the sizes can be used as-is as a lower bound, whereas the largest `sizes` value should be multiplied by 3 to define an upper bound. Once these values are defined, they can be used as a floor/ceiling against the union of values in `deviceSizes` & `imageSizes` when generating scaled/optimized images. Values just outside of the target range may be worth generating, as well, so the browser has the flexibility to decide which image is most appropriate to request.

For example, given `sizes="(max-width: 399px) 184px,(max-width: 519px) 244px,(max-width: 639px) 200px,(max-width: 767px) 156px,(max-width: 1023px) 220px,(max-width: 1279px) 280px,280px"`:
- The smallest image size (at 1.0 pixel density) is 156px
- The largest image size (at 1.0 pixel density) is 280px, but at 3.0 pixel density is 840px.

Given my current `next.config.js` include the following:
```
{
  images: {
    deviceSizes: [
      144,
      164,
      184,
      208,
      234,
      303,
      358,
      440,
      488,
      503,
      524,
      606,
      640,
      716,
      750,
      766,
      828,
      880,
      1080,
      1200,
      1920,
      2048,
      3840
    ],
    imageSizes: [
      16,
      32,
      48,
      64,
      96,
      128,
      256,
      384
    ],
  },
}
```
...the smallest file size that needs to be generated is 144px and the largest is 880px. Everything outside of that range can be ignored for the generation of this `srcSet`. In addition to the smallest, note this includes:
- 1080
- 1200
- 1920
- 2048
- 3840

Each of these files takes time, processing & storage resources to generate and deploy. Eliminating them will deploy faster, require less processing, and require a smaller storage footprint. Additionally, the smaller `srcSet` will produce smaller HTML files, so they will download faster.

### To Reproduce

Start with a source image provided at 3840px width and use `import` as recommended by the docs:

`import missedTarget from '/public/images/missed-target.jpg';`

Use `next/image` component with valid sizes smaller than the union of `deviceSizes` & `imageSizes`:
```
<Image
  src={missedTarget}
  layout='fill'
  objectFit='cover'
  placeholder='blur'
  sizes={[
    '(max-width: 399px) 184px',
    '(max-width: 519px) 244px',
    '(max-width: 639px) 200px',
    '(max-width: 767px) 156px',
    '(max-width: 1023px) 220px',
    '(max-width: 1279px) 280px',
    '280px']}
  alt='missed target' />
```


Optionally, provide a `next.config.js` including the following:
```
{
  images: {
    deviceSizes: [
      144,
      164,
      184,
      208,
      234,
      303,
      358,
      440,
      488,
      503,
      524,
      606,
      640,
      716,
      750,
      766,
      828,
      880,
      1080,
      1200,
      1920,
      2048,
      3840
    ],
    imageSizes: [
      16,
      32,
      48,
      64,
      96,
      128,
      256,
      384
    ],
  },
}
```

The rendered result will look like this:
```
<img alt="missed target" sizes="(max-width: 399px) 184px,(max-width: 519px) 244px,(max-width: 639px) 200px,(max-width: 767px) 156px,(max-width: 1023px) 220px,(max-width: 1279px) 280px,280px" srcset="/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=16&amp;q=75 16w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=32&amp;q=75 32w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=48&amp;q=75 48w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=64&amp;q=75 64w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=96&amp;q=75 96w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=128&amp;q=75 128w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=144&amp;q=75 144w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=164&amp;q=75 164w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=184&amp;q=75 184w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=208&amp;q=75 208w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=234&amp;q=75 234w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=256&amp;q=75 256w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=303&amp;q=75 303w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=358&amp;q=75 358w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=440&amp;q=75 440w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=488&amp;q=75 488w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=503&amp;q=75 503w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=524&amp;q=75 524w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=606&amp;q=75 606w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=716&amp;q=75 716w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=766&amp;q=75 766w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=880&amp;q=75 880w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimages%2Fmissed-target.4cee4f8c3b9383517209b12b7cc81b00.jpg&amp;w=3840&amp;q=75" decoding="async" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: cover; filter: none; background-size: cover; background-image: none;">
```

Note the `srcSet` includes **all** image sizes – all the way up to 3840 – regardless of whether they could possibly be displayed by any browser or device.