I want to show proper image sizes on different screens and this is the code I wrote for it:
<img class="mx-auto mt-4 rounded-lg" src="imgage.jpg" srcset="image.jpg 450w, image-300.jpg 300w, image-150.jpg 150w, image-75.jpg 75w" sizes="(max-width: 300px) 280px, 450px">
What expected from this code is to show 300px image size in 0px to 300px screen sizes but it doesn't.
Rendered size: 222 × 222 px
Rendered aspect ratio: 1∶1
Intrinsic size: 450 × 450 px
Intrinsic aspect ratio: 1∶1
This is what I get when I hover the image element, even when lower sizes are avaible for rendered size (222*222px), It downloads the 450px one.