What does the "imageSizes" configuration option for Nextjs optimized Image component actually do?

I have been using Next.js new optimized Image component, and I think I understand how it works when using the different layout options (intrinsic, fixed, responsive and fill). However there is a configuration option called imageSizes that I don't understand.

From the docs, I can tell there are these two default configuration options:

module.exports = {
  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
}

If I understand correctly, devicesSizes is an array of breakpoints of sorts; when using the fill or responsive layout for an image, Nextjs creates multiple versions of the image whose widths correspond to the breakpoints, and references those versions in the srcset that it automatically generates for that image. We may also tell the browser how to use these versions via the sizes prop. For example:

<Image 
    image={ image }
    layout="responsive" 
    sizes="(max-width: 500px) 100vw, 25vw" 
    width={1200}
    height={960}
/>

For imageSizes, the docs say that:

You can specify a list of image widths using the imageSizes property. These widths should be different (usually smaller) than the widths defined in deviceSizes because the arrays will be concatenated. These widths are used when the next/image component uses layout="fixed" or layout="intrinsic".

Does this mean that, when using a fixed or intrinsic layout, Nextjs creates multiple versions of the image whose widths correspond to the values in imageSizes? If so, how can you tell the <Image /> component which one to use (since the docs also say that the size prop should be used with the fill and responsive layouts only)?

In other words, if I have an image that is 1200px wide and I want to use it at one of the sizes specified in imageSizes, how do I do that?