Why responsive images with img srcset and sizes will always load the largest source?

Question

I'm learning the usage of HTML img srcset on MDN and there are few questions confusing me.

Questions:

1. Regarding to example, why the browser load elva-fairy-480w.jpg when the viewport width is under 600px?
2. Can img srcset work like media query for switching the image source if vp width has changed?

Example:

https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html

MDN reference:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

I inspected the network tab and it was loading the elva-fairy-800w.jpg every time even if my vp width was less than 600px.

** I tried to use incognito window or hard refresh and the results are the same.

From my understanding, I expect the browser will load the 480w image when viewport width is less than 600px as defined in sizes attribute. And load the 800w image when its greater than 600px.

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />