Originally published at: http://www.sitepoint.com/improving-responsive-images-picture-element/
A while ago I wrote an article about the srcset attribute. This is an attribute of the
img element designed to serve the right image to a specific device. The
srcset attribute allows developers to specify a list of sources for an image from which one will be chosen based on the pixel density or size of the user’s screen and displayed to the user.
The browser is provided with a set of “suggestions” about the correct behavior with certain types of images, thus improving the loading time of a page. This technique reduces the weight of a website for devices with small screens (that we tend to think of as devices with a slow connection), and so improves user experience. At the time of writing that article this attribute was a standalone proposal but has since been incorporated into a wider proposal, the
In this tutorial I’ll give an overview of the
picture element, describing its main features and advantages.