Art directed responsive images
I’ll start this post by admitting that I haven’t followed the conversation in the web community around implementing responsive images too closely. I understand there are a few recommendations under consideration, and I bet there are polyfills to address the issue.
I’d like to also mention that what I’m about to describe doesn’t attempt to solve the issue of page weight, it is purely an interesting way to responsively crop a single image source using only CSS and allow the content author to decide the focal point of the image.
There is a particular image of Barack Obama standing at a podium in a factory commonly used to illustrate the issue of scaling an image down in proportion to screen size. On a small device President Obama and the impact of the image gets lost.
A solution that I’ve come up with is to allow the content author to define a horizontal and vertical value to re-position the image depending on where they feel the focal point should be at a smaller size. I’ll describe the thought process behind this and share the demo on codepen.
I start by wrapping the image in a containing DIV. This gives me a canvas area that I can use to re-position the image and set the overflow to hidden to crop out unwanted areas. To allow the content author to easily position the image I append a query string to the image source (ex. ?hpos=3&vpos=3). These variables will be used in my CSS to crop and position the image. If the string is left off an image or if a browser doesn’t support the selector used to apply the crop, it will simple scale to fit 100% of it’s container.
With these pieces in place the next step is to figure out how to re-size and position the image. I use the containing DIV to set the bounds of the image depending on screen width. At 40em screen width I decided to keep the image full width, but reduce the height in order to take up less vertical space and give the image a landscape orientation. What I do next is increase the size of the image element to 150% and set its position to absolute. Increasing the image size like this gives me room to move the image around within it’s container, and increases the size of President Obama in the shot.
Since the image is now 150% of its container, I can move the image position to the left up to 50% or to the top up to 50% and still fill the full width of it’s container. Based on this is made sense to set up horizontal and vertical position values from zero to six. Zero is the starting point (left:0;), one through five each offset the left position by -10% and the sixth value position the image to the right (right:0;). The same variables apply vertically, going from top to bottom.
The final step is to set up the CSS rules for the horizontal and vertical offsets by looking to see if the source of the image contains hpos and vpos.
Adding another breakpoint at 20em screen width to increase the image size to 200% allows me to tweak the focal point again on smaller screens. The same offsets principal applies, however the offset values have to be increased as well.