Why is my img element always loading the biggest image from srcset

Question

So, I'm trying to make a responsive image component that will load an appropriate size of image depending on the screen resolution/pixel density. As I understand it, the srcset attribute was designed for exactly this, but I can't get it to do what I want. What Am I doing wrong? Here's the element as rendered to the DOM:

<img src="/static/media/image2_1x.20b2e636.png" srcset="/static/media/image2_05x.198c1f0f.png 590w, /static/media/image2_1x.20b2e636.png 1180w, /static/media/image2_2x.632d77c5.png 2360w" sizes="(max-width: 1180px) 90vw, 1180px">

What I expect this element to do is that when the screen size is wider than 1180px it loads an appropriate image for a 1180px width. If it's displaying on a high-density device, it might load the 2x image (2360w) here, but normally it would load the 1x image (1180w), when the size of the screen is lower, it should calculate what 90vw is in px and pick whichever of the three images is most apropriate factoring in pixel density and how many pixels 90vw is on screen.

What actually happens is that the element always loads the biggest picture (the 2360w one). Even when I turn on responsive mode in my chrome dev tools and shrink the width of the screen to 300px clear the cache and reload it STILL loads the 2x one.

I tried multiple sizes properties. If i set sizes to just 500px, it will display the image as 500px wide but it will still load the 2x image.

Why is this happening? Did I make a mistake? How can I make it load the 0.5px one when the image is going to be 300px wide and doesn't need the high res version?

Answer 1

Ok, so I figured it out. Turns out it's a bug with chrome dev tools. When I change the sizes property, it won't update the behavior of the element until i exit responsive mode and enter it again, reloading and clearing cache doesn't work, only exiting and entering responsive. Hopefully this helps someone else who has this problem. The element actually works just fine.