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>.