Responsive Images Demo

As part of making your websites more 'responsive friendly', there are a couple of proposals for responsive images that were developed by the Responsive Images Community Group. There is the <picture> element which allows for 'art direction' of an image by using multiple sources, as well as the "srcset" and "sizes" attributes which allow us to offer browsers a variety of image resolutions to choose from.

It is a good idea to take a look at how supported "srcset" and the <picture> element are before use.

"srcset" Example

A black lab sitting next to a couch looking over its shoulder at the camera

<picture> Example