Responsive Images: Practices for Adapting Across Platforms

Ethan Marcotte took the world by storm with responsive web design in 2010, and since then designers have been using these techniques to create websites that adapt themselves for viewing on multiple devices, whether they’re smartphones, tablets or desktop computers. This is enabled in large part by CSS3’s Media Queries module, which lets you apply different CSS properties based on screen size or other display characteristics.

That said, designers are still awaiting an elegant way to manage images in responsive layouts. You can define CSS properties that scale an image to various screen sizes, but the browser still downloads the full-sized version. This can be a problem on smartphones and other mobile devices with limited bandwidth or processing power. (Read more on designing for mobile).

Responsive Images Adapt to Your Design Situation

The situation is complicated by the emergence of high-density displays such as Apple’s Retina display, where images ideally should be closer to print-quality resolution.

Designers thus have a need for responsive or adaptive images—bitmapped artwork that’s downloaded at a size or pixel density appropriate for the user’s display. Unfortunately, HTML’s <img> element isn’t up to the task, which has forced web developers to employ workarounds involving JavaScript and/or scripts on the server. However, a loose organization of software companies known as the Responsive Images Community Group (RISG) is seeking to remedy the situation by proposing HTML features that would enable responsive images within the page markup.

RICG; responsive images

The group includes representatives from browser makers as well as Adobe Systems, Akamai and other interested parties. These developers are looking at three primary “use cases” for responsive images:

Device-Pixel-Ratio-based selection serves images based on the display’s pixel density. For example, the iPad’s screen measures 9.4 by 6.6 inches, which is smaller than a desktop display. But at 2048 by 1536 pixels, or 264 pixels per inch, it has a much higher pixel density. Images that appear crisp on a desktop monitor often don’t look as good on the iPad. So this option would let you deliver a high-res image to a high-density display and a standard-resolution image to others.

Viewport-based selection serves images based on the size of the “viewport”—the window through which the user sees the webpage. This might mean sending a 1024-pixel wide image to a desktop browser and a 320-pixel version to a smartphone. Combined with Device-Pixel-Ratio selection, you could deliver three variations of the same image: a high-density version for the iPad, a standard-density version for desktops and a smaller version for smartphones.

Art direction accounts for situations where scaling an image is not enough—depending on the nature of the artwork, you may want to crop it to accommodate the screen size, or even provide a different image.

Proposals for Responsive Images

Web standards are officially maintained by the World Wide Web Consortium (W3C), but browser makers ultimately determine which HTML features to support. Developers are currently haggling over which proposals for responsive images are best, but the one that seems to have the greatest momentum is srcset.

 srcset

This is a proposed attribute for the <img> element that would let you specify alternate versions of a file to download. It might look something like this:

<img alt="This is an image"
         src="image.jpg"
         srcset="image-HD.jpg 2x, image-phone.jpg 100w, image-phone-HD.jpg 100w 2x">

In this example, the “2x” means “use this version if the device has a high-density display.” “100w” means “use this version if the maximum viewport width is 100 pixels.” “100w 2x” means “use this version if the maximum viewport width is 100 pixels and the device has a high-density display.”

Google’s Chrome already implements srcset, and WebKit, the browser engine that underlies Apple’s Safari, added a partial implementation last year. But it’s not yet clear when (or if) Safari and other browsers will follow.

<picture> 

Another proposal would add a new <picture> element for specifying alternate versions of an image. This would complement srcset by supporting more-complex use cases such as art direction. But it’s even further from widespread adoption.

HTTP Client-Hints

A third proposal, HTTP Client-Hints would use the HTTP header to communicate information about the device’s display characteristics. A fourth, srcN, is an attribute for the <img> element that would replace srcset and <picture>. Its proponents contend that it would offer better support for all three use cases.

You can find additional info about these proposals on the W3 website and in this discussion of a RISG meeting held last September in Paris.

Other Responsive Image Techniques & Workarounds

responsive images

In the meantime, web developers have devised various workarounds for enabling responsive images, none of which is perfect or uncomplicated. You can find some examples in this chart, though it’s a bit dated. Web developer Sherri Alexander discussed some newer approaches last July in an article for Smashing Magazine.

Some of these techniques rely on JavaScript to choose which version of an image to download. One popular example is Picturefill, a JavaScript library that mimics the <picture> element.

Others use server-side technologies in which a script on the server chooses an image or scales it to the appropriate size. One example here is Adaptive Images, a project that uses a PHP script to download optimized JPG, GIF or PNG files. Developer Matt Wilcox explains the process, and he offers the software under a Creative Commons license.

You can also combine these approaches. For example, web developer Lukas White recently outlined way to use PHP in conjunction with Picturefill to automatically scale images to an optimized size.

responsive images

It’s also possible to implement responsive images as CSS backgrounds, though this approach has its own limitations. For one thing, it violates one of the basic tenets of contemporary web design, which is to use HTML to specify content and CSS to determine how that content is presented. And it may not work on sites that use content management systems. (Here’s more on coding for designers.)

Of course, you can always resort back to developing separate versions of your sites for mobile users. Another option is to use extreme compression ratios on images, making the file size small enough to minimize bandwidth issues, while still looking good on a desktop display. Then you would use CSS properties to scale the image to the ideal size for each device. Otherwise, you can consider the techniques mentioned above while awaiting native solutions for HTML.

Improve your interactive design chops at THE web design conference for designers.

10606-300x250-V_HIDC June 13

3 thoughts on “Responsive Images: Practices for Adapting Across Platforms

  1. Designfacet

    I still think for small to med size sites it is best to do a separate version of the site, considering all the elements are ready to go from the main site. Come to think of it, you will be saving more time doing it that way, more so than to worry about what standards and which solution is the best for all the challenges that responsive creates for the developer and the end user. Personally I seen way too many responsive sites that look boring and cookie cutter like.

  2. Wilto

    Hi—I’m Mat Marquis, Chair of the Responsive Images Community Group. I don’t mean to swoop in and “well actually” here, but I noticed a few things in this post that seem out-of-date or inaccurate:

    > However, a loose organization of software companies known as the Responsive Images Community Group (RISG) is seeking to remedy the situation by proposing HTML features that would enable responsive images within the page markup.

    The RICG isn’t actually an organization of software companies—largely, the majority of us are independent web designers and developers, working alongside browser representatives.

    > “100w” means “use this version if the maximum viewport width is 100 pixels.” “100w 2x” means “use this version if the maximum viewport width is 100 pixels and the device has a high-density display.”

    This seems to reference the now-defunct WHATWG `srcset` proposal (http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/) which is not being pursued by any browser. Some parts of this `srcset` proposal have been adapted and folded into the current version of the `picture` specification (http://picture.responsiveimages.org/#relationship-to-srcset), such as the `1x`/`2x` syntax, but the `600w` syntax has been repurposed and no works as described in the original proposal.

    > Google’s Chrome already implements srcset, and WebKit, the browser engine that underlies Apple’s Safari, added a partial implementation last year. But it’s not yet clear when (or if) Safari and other browsers will follow.

    Chrome’s implementation of `srcset` is of the version repurposed by the `picture` specification, and currently (in stable browsers) only covers the dPR syntax (the same as WebKit).

    > But it’s even further from widespread adoption.

    Implementation of the `picture` element, including the reworked `srcset` attribute, is complete in Firefox (Nightlies) and Chrome (Canary). It will ship in Firefox 33, Chrome 38, and Opera 25.

    > A third proposal, HTTP Client-Hints would use the HTTP header to communicate information about the device’s display characteristics.

    Client Hints isn’t being framed as a responsive images solution; rather, that specification has been reworked to work with the `picture` element.

    > A fourth, srcN, is an attribute for the element that would replace srcset and . Its proponents contend that it would offer better support for all three use cases.

    The srcN proposal was abandoned late last year.

    > You can find additional info about these proposals on the W3 website

    “W3C”

    1. Stephen Beale Post author

      Thanks for your comment. The story was written in early April and posted in May. I’m not sure why the date stamp says July 23.

COMMENT