srcSet ignores sizes provided

### 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. …