srcset, sizes, and picture element

The term “Responsive Images” has been in common use for a while now. It refers to the ability to deliver the most appropriate image for the available viewport size, pixel density, even network connectivity.

For example, a Mac with a huge retina display is capable of displaying an extremely high resolution, large, image; whereas a phone in portrait mode on 3G may be better off with a smaller image – both in terms of dimensions and file size – which has been cropped to focus on the most important part of the image.

To achieve this required a significant amount of effort from the Responsive Images Working Group (RIWG) to help get functionality like the <picture> element and support for srcset and sizes attributes on both <picture> and <img /> into major browsers.

srcset

The srcset attribute allows us to define different sources for the same image, depending on the size and pixel density of the device’s display.

srcset’s “x” – pixel density (dpr)

So to display a different image for different pixel densities (e.g. standard definition or high def/retina) we might use something like:

<img src="img-base.png" 
    srcset="img-1x.png 1x, 
            img-2x.png 2x,
            img-3x.png 3x" />

The browser then decides which image to request based on the device capabilities (and potentially connectivity too).

Continue reading →