CODEWITHSUNDEEP
htmlcss
Fabrizio Ferrari
Fabrizio Ferrari

Reputation: 989

Image srcset definition not working as expected

I am trying to make show a different image size according to the device's viewport. In my specific case, I want to show an small image for viewports narrower than 600px and a bigger image for viewports larger than 600px.

Here is the code I came up with but doesn't seem to work:

<IMG srcset="small.png 400w, big.png 700w" sizes="(max-width: 600px) 400px, 700px" src="big.png" width="700" height="932" border="0" class="expimgbanners" alt="Let It Be">

I have tested it with different devices and with Chrome developer tools, but no matter the size of the viewport, I always get the big image shown (the one named big.png).

Here is a live example of it: https://www.virtualsheetmusic.com/test-img.html

Any ideas?

Upvotes: 0

Views: 463

Answers (1)

Fabian S.
Fabian S.

Reputation: 2529

Your code works perfectly fine.

I think youre maybe testing wrong. Check for the DPR Setting in your devtools:

enable DPR setting

Make sure its set to "1":

DPR Setting set

Once using that settings youll see everything works fine:

<=600px

600px

601px upwards:

601px

Upvotes: 1

Related Questions