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.
