Why does the browser loads a larger srcset image for a fixed-width image using the sizes attribute?

Question

I have an image containing both sizes and srcset (dynamically generated by Next.js). The image will have a fixed width on certain resolutions, which I specified in the sizes attribute for those resolutions. However, whenever I test this, the browser loads the largest possible image for that case, even though the displayed image is much, much smaller.

Full image source (URLs simplified):

<img
  fetchpriority="high"
  width="615"
  height="615"
  decoding="async"
  sizes="(max-width: 768px) 768w, (max-width: 1280px) 295w, (max-width: 1600px) 486w, 615w"
  srcset="1.png 16w, 2.png 32w, 3.png 48w, 4.png 64w, 5.png 96w, 6.png 128w, 7.png 256w, 8.png 384w, 9.png 768w, 10.png 1280w, 11.png 1600w"
  src="11.png"
>

When I'm on a window size wider than 1600px, I expected it to load image 9.png as it is resized to be 768px wide, and is closer to the last size of 615w, last in the sizes attribute. That doesn't happen, as the browser loads the largest 11.png image that is 1600px wide. I'm testing on Chrome, and PageSpeed has the same behavior.