Responsive images situation update | Responsive Web Design

Responsive images situation update

The Responsive Image solution landscape is in a constant state of flux. For this reason I wanted to bring everyone up to speed with how things are today.

A bit of History

When Ethan Marcotte first wrote about responsive design he had a simple solution to images


img { width: 100%; max-width: 100%;}

This really should have been all we had to deal with… but then someone came up with some additional use cases that didn’t quite fit.

Use Cases

Use Cases are pretty straight forward.  It’s literally a specific implementation as required by those who build websites (you and I for example).  The use cases were initially split into two approaches: 1) Performance; and 2) Art Direction.

It wasn’t long until a third use case was included which was pixel density as well.

Performance

The first issue with Ethans most simple approach was that we were delivering the same sized image for every possible viewport (or device). This caused an issues because the viewports were of various sizes, but we could only provide a single image source, which of course meant that the image would either be far too big for a mobile requirement, or far too small for a large desktop (or somewhere in the middle)

Art Direction

The second issue with the approach was centered around Art Direction.  Lets say that we have an image which is a picture of a person, and that persons face occupied 30% of the entire image size. At a viewport of 1000px the person is 300px which is perfectly easy to recognise, yet if the viewport was only 300px then all of a sudden they’re only 100px wide.

The argument for Art Direction is that a cropped version of the same image should be shown allowing the person to now take up 90% of the image (or 270px).

Pixel Density

The final issue has come about after a surge of HDPI devices (retina screens where more pixels can be squished into the same physical space allowing for more crisp images.

Now the same 1000px image on a retina screen would have the benefit of being 1600px in size, yet some of these images need to be served on mobile devices which then bring in the Performance and Art Direction issues as well.

Attempts at a solution

Coming soon…… I’m still gathering all the examples.

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.