CODEWITHSUNDEEP
htmlimage
NaughtySquid
NaughtySquid

Reputation: 2097

confused on getting srcset to work for showing small image

I'm trying to learn how to correctly use srcset to show a thumbnail of an uploaded image on my website instead of the normal size if a user is using a mobile device or small window.

Here's my code:

<img sizes="(max-width: 450px) 450px, 800px" 
src="http://localhost/uploads/articles/article_media/21251093091573567009gol1.jpg"
srcset="http://localhost/uploads/articles/article_media/thumbs/21251093091573567009gol1.jpg 450px, 
http://localhost/uploads/articles/article_media/21251093091573567009gol1.jpg 800px" />

It was my understanding, that it should show the thumbnail if the browser space is 450px or lower and the normal image if bigger than that, but it seems to always show the larger image.

What am I missing?

Upvotes: 0

Views: 97

Answers (1)

Ted Whitehead
Ted Whitehead

Reputation: 1826

You may not be taking the screen resolution into account. If you are on a high resolution device, the browser will choose the image that best matches the pixel density. Here’s a demo I made a while ago to test how this works, since I was also confused by this https://output.jsbin.com/qumuqug/quiet (start small then scale up).

If you need precise control over when an image switches, you may want to switch to <picture>.

Upvotes: 1

Related Questions