srcset and viewport width

Question

I have 2 images: one desktop version, one mobile version. I would like the desktop image to be replaced by the mobile image when the viewport width resizes below 480px, just as

Answer 1

It sounds like you want to do "art direction", i.e. the images are different more than just the smaller being scaled down version of the bigger image. If so, you need to use the picture element.

However, if your small image is actually a scaled-down version of the bigger image, then you can use srcset, but then you have no control over which image gets chosen. It's up to the browser to pick the best one based on screen density, network conditions, user preference, browser cache, etc.

Note: If srcset is used and the larger image candidate is in cache, Chrome will always display this cached image candidate - no matter of the actual viewport size.