I'm starting to think that maybe I don't fully understand the srcset attribute.
Take a look at this HTML snippet:
<img
srcset="
/path/to/image1 343w,
/path/to/image2 768w,
/path/to/image3 304w"
sizes="
(min-width: 0px) and (max-width: 639px) 343px,
(min-width: 640px) and (max-width: 767px) 768px,
(min-width: 768px) 304px"
/>
I initially believed that when I resize my browser window from, say, 700px width to 500px width, the image displayed should switch from /path/to/image2 to /path/to/image1. But it seems like that's not how it actually functions. Once the larger image is loaded by my browser (I've tested with Chrome and Firefox), it doesn't switch back to the smaller one.
My website layout changes significantly with different breakpoints, so I want to load images with varying aspect ratios as the viewport size decreases. Is the only solution here using JavaScript? Or should I go for multiple image tags and simply use display: none for the inactive media queries?