Picture Perfect: Designing with Responsive Images

Without doubt, one of the real challenges when designing and delivering responsively is managing images. Done poorly, and we soak up the user’s bandwidth, and deliver slow loading pages that ultimately feature images that may not even be tailored to the user’s device. Done well, only the right image is delivered to the user’s device, improving performance, and overall user experience.

This session looks at how to do responsive images right, with the <picture> element, a semantic approach to dealing with responsive images on the Web. We’ll cover the benefits, and best practices for delivering responsive images across a wide range of device resolutions with an eye to solutions that support the widest range of web browsers today.

We’ll detail the current state of responsive images on the web, how the <picture> element can help improve the design workflow and support multiple sources via the srcset attribute and their display conditions. And we’ll look at the advantages of this approach and cover common use cases (such as supporting desktop and mobile contexts).

The way you serve images will never be the same.

slides [https://www.slideshare.net/secret/BQlJR2X2ehmqTL]

We now have a huge array of devices, screen sizes ad resolutions: phones, tablets, laptops, desktops, smartwatches … and we have to support them in some way.


We want to make the resolution of an image as crisp as possible, and we also want to improve how the content is delivered to the devices, such as sending smaller files over slow connections.


Done poorly, image delivery soaks up bandwidth and loads pages slowly with images not tailored to any device. Done well, the right image is delivered to each user’s device, improving performance and overall user experience.


There are currently two ways to manage responsive images in HTML: <srcset> and <picture>.

The <srcset> attribute allows images to be displayed that are alternative to the img defined in <img src>. If a browser does not support <srcset>, then it fails to the <img> defined in <src>.


It is possible to add descriptors to <srcset> that help to specificy which of a range of images to show, depending on device capabilities.


The <sizes> attribute can further help to define image choices based on viewport sizes.


Using the <picture> element in tandem with <srcset> provides a semantic approach to managing responsive images on the web and supporting the widest range of web browsers today.


When <media> attributes that relate specific images to specific conditions are added to <source> within a <picture> element, a high degree of control emerges as to which devices display which images under which conditions.


A further level of control can be obtained by using the <type> attribute of <source> within the <picture> element to select images based on their file format, eg using .webp formats for retina screens or .jpg for other devices.


The main benefit of all this is to load smaller device-appropriate images as fast as possible.

Of current browser versions, no IE browsers support either the <srcset> attribute or the <picture> element, and neither does Opera Mini 8.


With all these elements and attributes, the final code can be disarmingly verbose and complex.


Content management systems and frameworks may present challenges to implementing these techniques.


Much of this functionality is available in Scott Jehl’s Picturefill polyfill.


Retrofitting websites to use responsive images can be very hard work.