<Image
    width="640"
    height="960"
    sizes="100vw"
    src={frontMatter.image}
    alt={frontMatter.title}
    priority
  />

next.config.mjs

  images: {
    domains: ['localhost', 'images.unsplash.com'],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    deviceSizes: [420, 768, 1024, 1200],
  },

I'd like to load image sizes responsively.

When i set device size to e.g. 400px the network tab shows that the 420x630 version of the image is loaded (screenshot1). Which is correct.

Now when i resize my window and make it bigger (from 400px to 1200px) three more network requests appear (screenshot2). Which is also correct according to my deviceSizes.

However all of these 3 request the same max image of 640x960.

So i was wondering if i can tell nextjs a max size or somth? The result should basically be 1 more network request when resizing the window instead of 3.