Jason Grigsby: Responsive images have landed

Published: June 19th 2015by Orde Saunders

Jason Grigsby was talking about responsive images at Responsive Conf, these are my notes from his talk.

RICG put together a spec and it was (eventually) blessed and it has shipped in FF, C & O - it's in IE edge and iOS 9.

Why responsive images

Prove interesting puzzles. Need to consider the use cases.

Resolution switching, it's the same image but at different sizes (including density) 90% of use cases
Art direction, changing the image based on size - you can change what is shown in the image based on what can be seen.

Image breakpoints

Art direction may dictate where and when we switch between image sources. Resolution switching makes it harder. With content we resize until it looks bad and then add a breakpoint. If it's resolution switching how do we work out what steps we put in between the smallest and biggest. When we scale down an image it still looks good. The precise size of an image on the page is the only intrinsic information we have about image size.

We can make jumps in file size but what are sensible jumps in file size? Image size will depend on the image. Can we use performance budgets? Making images flexible can cost size - how about 20k steps between file sizes? Image size is also dependent on area so we might need more breakpoints for bigger images. CDNs have a cost to be at the edge so need to consider the most commonly requested sizes.

Audits

We need to ask questions about images to determine the most appropriate approach in each situation - there's no one right way.

Hero images have one requirement: they are a box for marketing. Create an image with text in it, resize until the text becomes unreadable, repeat to get breakpoints.

Carry out an image survey of the site to identity the different types of images used.

Browsers

By providing the browser with options it allows it to make decisions with much more contextual information that we have when building sites.

<picture> allows us to use different image formats and the browser can determine which one it will use - we don't have to go with the most supported format any more. It's progressive enhancement for images.