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.
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.
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"
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.
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.
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.
Other Responsive Image Techniques & Workarounds
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.
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.
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.