Perch and the picture element for responsive images

Support for responsive images using picture and the srcset attribute is currently being added to browsers. This can easily be combined with the template functionality in Perch to make it easy for your sites to take advantage of true responsive images without requiring your content editors to create by hand and upload multiple versions of every image.

What are responsive images?

The picture element and srcset attribute will mean an end to browsers needing to download a huge image which will then be constrained using max-width for a mobile phone screen. They enable us to specify multiple version of images, leaving the browser to pick the best one for the context it is displaying the image in.

Not only can we choose to provide multiple versions of the same image, but we can also provide different images to be used in different contexts. Take as an example a product listing. If a visitor is browsing the site on a desktop computer you could show a large and detailed image of the entire product, for mobile phone browsers that detailed image might just be too small to see properly so you could opt to display a crop of the image by default, and highlights some detail of the product.

To understand the range of use cases for responsive images there is an excellent article over at Dev Opera, explaining the different ways you can make use of this technique – Responsive Images: Use Cases and Documented Code Snippets to Get You Started.

How do I create and manage all of these images?

This is where Perch comes in. I’ve built some example Perch templates based on the Opera examples. Even the most complex of those only needs two images to be uploaded – a full size image and a crop. Perch will then create the different images required.

Supporting responsive images can therefore be transparent to your editors and with the ability to add custom help text in Perch you can guide them as to the best format or crop of image to select if needed.

What about old browsers?

The picture element requires a regular img element as the last-child. Old browsers will just display this as they always have and ignore the new element and attribute. So you can start implementing this now in order that as browsers start to add support, your site is all ready for it.

If you want to polyfill the picture element then have a look at Picturefill, which does just that.

Check out all of the examples over in our Solutions section. If you use responsive images in a site remember to let us know – perhaps by posting to the forum.