Simple resolution switching with srcset

Let’s suppose you have three versions of the same image. One is suitable for standard pixel density displays, commonly referred to as 1x. Another image is higher resolution, to cater for higher density, or 1.5x displays, and, finally, the third is a high 2x resolution version for very high-density displays. Here is how we can let the browser know that we have these three versions available:

<img
    src="scones_small.jpg"
    srcset="scones_medium.jpg 1.5x, scones_large.jpg 2x"
    alt="a delicious looking baked scone"
/>

This is about as simple as things get with responsive images, so let’s ensure that the syntax makes perfect sense.

First of all, the src attribute, which you will already be familiar with, has a dual role here; it specifies the small 1x version of the image, and it also acts as a fallback image if the browser doesn’t support the srcset attribute. That’...