Skip to main content

Experience Design

Responsive Images – The New Hotness

Making images responsive on the Web is actually pretty easy. Don’t specify the width and height of the image, and include one simple CSS declaration, and bingo! Responsive images that scale beautifully as the page resizes and reflows. But what if you want a different crop of your image on a mobile device? Well, that’s where a new HTML5 element and a new HTML5 attribute come in.

But first…

Why do we need something new, again?
I’d argue one of the biggest use-cases for a new way of incorporating images is that of art-direction. Scaling is a solution that works, but it hardly achieves the goal of focusing the image on its most important aspect, especially at smaller resolutions.
Consider this image of the legendary Tom Baker:

Tom Baker. Legend.

Tom Baker. Legend.


When the original image is scaled down, we lose some of the definition, and certainly a lot of the crazy. But when the image is cropped differently to accommodate that smaller resolution, the user’s focus remains where it should be – on Tom’s amazing expression.
It’d be great if we had a way to change images based on screen size, right?

The <picture> element

First proposed by Mat Marquis in his A List Apart article, this brand new HTML element is now under active development by the Responsive Images Group. The syntax goes a little something like this:

<picture width="500" height="500">
  <source media="(min-width: 720px)" src="tom-large.jpg">
  <source media="(min-width: 480px)" src="tom-med.jpg">
  <source src="tom-small.jpg">
  <img src="tom-med.jpg" alt="Tom Baker">
  <p>Much longer accessible text that could be used to describe this image of Tom Baker to users of assistive devices (for example).</p>
</picture>

It’s verbose, but pretty straightforward. This syntax allows us to declare multiple sources for our images, and when to display them. In the example above, “tom-large.jpg” will only appear when the screen size is a minimum of 720px wide. The new element is backwards compatible (through the use of the fallback <img> element) and potentially much more accessible than traditional image usage by allowing for significant text content that isn’t limited to the alt attribute.
I like the <picture> element. It’s logical and it makes sense. But then the W3C had to go and muddy the waters…

The srcset attribute

Taking our example from above, here’s how that same set of three images would be described using srcset:

<img src="tom-med.jpg"
  srcset="tom-small.jpg 480w, tom-med.jpg 720w, tom-large.jpg 1x"
  alt="Tom Baker">

Much less verbose, and (to my mind) much less understandable. In a nutshell, the srcset attribute lets us specify as many image sources as we like (comma separated), and makes us add a dimension (480w) to it. This dimension value specifies the maximum viewport dimension that the image is intended for. So, tom-small.jpg is intended for viewports of 480px wide and less. (We’re using the src attribute as the fallback for browsers that don’t understand srcset – in much the same way that we specified an <img> fallback in the <picture> element above).
But what does that last dimension value mean? The 1x value? Took me a moment to figure it out too, but it’s a way of saying “use this image on all viewports larger than the previously specified width”. 1x refers to the pixel density: 1 CSS pixel per device pixel. Not exactly intuitive…

Which one should I use?

Neither. They’re not ready for prime-time yet. Sorry.
The whole area of responsive images is undergoing serious development, and the srcset attribute is currently making its way into the <picture> element. Which means we may end up with either the best of both worlds, or a horrible frankenstein. Let’s hope for the former!
But in the meantime what you can do is polyfill support for the <picture> element into your work, via some crafty jQuery. jQuery Picture is an example of a plugin that adds support for the <picture> element, and is actively being developed. As with all solutions that require JavaScript, I advise caution in its (over) use, but this may be a very good solution for a hero image that really ought to be art-directed properly.
I have no doubt that by the end of 2013 we’ll have some standardization in responsive imagery; a number of major browsers will natively support the new code (and those that don’t will have suitable fallbacks in place anyway); we designers and developers will have better means of art-directing images across multiple screen sizes; and therefore our clients will have a new and fantastic way of showing off their products to their customers. Wins all round!

Thoughts on “Responsive Images – The New Hotness”

  1. Nice tip! It made me think about using correct media for each form factor. It will be great when all browsers support this tag.
    Could the same effect be achieved today with some CSS class and media query that sets the background source based on the form-factor?

  2. Yes, and in fact that’s a hacky little workaround that sometimes gets used. But here’s the kicker…images in the content are exactly that: content. We shouldn’t be placing content images in CSS, in exactly the same way that we shouldn’t be placing presentational elements into the HTML. There are practical reasons beyond the simple “don’t do that because it’s wrong”, as well. For one, an image placed as a CSS background image isn’t printed by default (a user has to specify in their own print settings that they want to print backgrounds). Not a major problem, maybe, but irritating.
    However the bigger problem with that approach is this: It’s difficult to get a background image to scale. We still need a way to scale images up or down between the points at which you would switch out your image to the next size (because “standard screen sizes” are a myth). Content images are the way to go here.

  3. Good point! I have always felt uneasy about the background image in CSS approach. Not to mention its a pain to right click and inspect the source of the image.
    The jQuery Picture approach is certainly seems superior for now.
    I have to say that the picture attribute seems to mix content and style together and srcset seems better – no?

  4. Ah also wanted to mention this technique would be good to use when delivering images to Retina devices with different screen densities. Thats what the 1px thingy is for right?

  5. Both approaches mix content and presentation. picture does it in a comprehensible and consistent way, however. srcset is a completely new way of writing HTML and incorporating stylistic attributes.
    I’d use picture for retina thus:
    source media=”(min-device-pixel-ratio: 1.1)” src=”tom-2x.jpg”
    ie, serve tom-2x.jpg when the device pixel ratio is 1.1 or above. More verbose, but much easier to follow.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Martin Ridgway

More from this Author

Categories
Follow Us