Given the following snippet:
<html>
<body>
<img
srcset="
https://cdn.shopify.com/s/files/1/0277/6992/9843/files/anti-aging-face-cream---normal-_-comb.-skin-both_400x.png?v=1709808291 400w,
https://steemitimages.com/1280x0/http://cnnphilippines.com/incoming/zgzt53-aliens.jpg/ALTERNATES/FREE_720/aliens.jpg 800w,
https://cdn.shopify.com/s/files/1/0277/6992/9843/files/anti-aging-face-cream---normal-_-comb.-skin-both_1200x.png?v=1709808291 1200w
"
sizes="282px"
/>
</body>
</html>The browser loads the _400x.png image, which is the expected result.
However, when I turn sizes="282px" into sizes="283px", the browser inexplicably switches to the 800w image (which I’ve turned into a different image to more clearly illustrate):
<html>
<body>
<img
srcset="
https://cdn.shopify.com/s/files/1/0277/6992/9843/files/anti-aging-face-cream---normal-_-comb.-skin-both_400x.png?v=1709808291 400w,
https://steemitimages.com/1280x0/http://cnnphilippines.com/incoming/zgzt53-aliens.jpg/ALTERNATES/FREE_720/aliens.jpg 800w,
https://cdn.shopify.com/s/files/1/0277/6992/9843/files/anti-aging-face-cream---normal-_-comb.-skin-both_1200x.png?v=1709808291 1200w
"
sizes="283px"
/>
</body>
</html>What is happening here?