I've been trying to use srcset for images to provide different-sized images at different viewports/screen densities, and this is the code I currently have:
<img
class="..."
srcset="/img/some-img-476w.png 476w,
/img/some-img.png 950w"
sizes="(max-width: 500px) 476px,
950px"
src="/img/some-img.png"
alt="Some alt text" />
In specifically Chromium-based browsers (i.e. Microsoft Edge and Chrome, both at latest versions), this code ends up seeming to be downloading both versions of the image only in screen sizes <= 500px (it passes the first sizes query). In larger screen sizes, as expected, it only downloads the largest image.
Does anybody know why this is the case? Firefox seemed to be fine for me, and downloaded the appropriate images.
Initially, my src was before all the other attributes, so I thought that was the reason, as src is meant to be a fallback for browsers that don't support srcset, so it would download the largest image anyways, but I made it the lowest attribute and it still didn't fix things. Would love some insight, thank you!