Drupal How-To: Responsive or adaptive images

In this 3 part Drupal How to series, I'm going to show you how various options for configuring images on your site. In Part 1, we looked at how to tweak the default image options. In Part 2, we saw ways to allow inline images.

In this post, I’ll discuss the various options for responsive/adaptive images on your site. Though I’m writing for beginners to Drupal, I assume you’re aware of responsive design and of course you’ve read my first two blog posts so you also understand how Drupal handles images. If you’re not sure, check out this info to start:

• Responsive Design - Drupal.org Docs
• Responsive Web Design with Drupal - Jan 2012. A screencast about 2.5 mins long.
• Build a Responsive Website with Drupal [May 9, 2012] Webinar with our training partner, Evolving Web.
• Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme [July 19, 2012]
• Responsive Web Design with Drupal and the Omega Theme [March 28, 2012]

The image problem

Creating any website is an obstacle course, but taking the responsive route means you’ll run into a few tricky turns: tables, grids, images are pose problems when you try to use the same content across different browser widths.

Images pose the biggest problem because not only does a image need to resize, in some cases you need a totally different proportion, and of course, you don’t want to serve up a large desktop-sharp image to a 320px mobile device over a 3g connection. Also, the size of the image isn’t neccessarily related to the width of the device, but the container around it.

Below, I’ve made an illustration of the image problem with an example 3 column website with a wide lead image. You can see how you could compromise somewhat on the images across your desktop, laptop and tablet. Perhaps you could use CSS to resize the images where there is only a small difference. Media queries check the dimensions of the browser window, and allow you to set CSS specific to that browser width. However, for mobile device, a different crop of an image would be more suitable.

It’s bleeding-edgy

Any solution for so-called fluid images, responsive images or adaptive images right now is going to be a bleeding-edge case. That means it’s likely to be fragile and need tweaking and updates. Here’s a good round up of related articles on the topic.

The Responsive Images Community Group has proposed the new <picture> element as a solutionhttp://responsiveimages.org/ This would allow the markup to specify multiple image sources, and display the appropriate one based on specific browser widths, and then rely on a “fallback” in any other case. The proposed markup would look something like this:

<picture width="500" height="500">
   <source media="(min-width: 45em)" src="/large.jpg">
   <source media="(min-width: 18em)" src="/med.jpg">
   <source src="/small.jpg">
   <img src="/small.jpg" alt="">
   <p>Accessible text</p>
</picture>

The proposal has been in development since last year, though it was only decided in October 2012 to postpone work to get it into the official HTML 5 specification. The proposal is a “living document” with frequent updates and changes. http://picture.responsiveimages.org/

Because no browsers can render the proposed new picture element, solutions are cropping up to solve the problem with JavaScript. See for example the jQuery Picture script.http://jquerypicture.com/ In that case you wrap a fallback image in a <noscript> element. This degrades nicely for older browsers.

So what are the options?

There are lots of quick hacks you can use. For our Movember page, we whipped up a scalable vector image (SVG) and used CSS to resize it depending on the browser width. But that isn’t going to work in many cases where you need a specifically different image.

Evan Scheingross has a good demo of Evan Marcotte’s recommendation to dynamically resize an image based on a proportion of the browser width. (Marcotte is credited with laying the foundation for ‘responsive’ design in 2010). However, as shown in the diagram above, a tablet in portrait mode with a single column may have more space available than a laptop with sidebars.

A good solution is to use server-side resizing and caching of images so you can serve up the appropriate image size as needed.

Fluid, Adaptive or Responsive image solutions in Drupal

Responsive themes, such as the Zen theme do take care of a certain amount of image sizing for your site applying CSS based on media queries, taking care of backward compatibility very elegantly. You’ll need to choose a module however to give you the options for controlling what images display and when- particularly in the case you detect a small browser width and want to display a lower resolution and smaller file size.

At the bleeding edge of design in Drupal - you’ll see a bunch of new modules pop up proposing slightly different solutions. Over time, the community has been really good about standardizing on 1 or 2 solutions, making it easier for maintainers, and also users.

Right now, the situation is so volatile with responsive images, there are a several equally good and popular solutions, each with their own caveats. There are two potential solutions: solve the image resizing on the server side or on the client side as markup. Even in the case that you use markup as the solution, you still need those alternative images available for display. However, the wider web design community doesn’t neccessarily agree that either is the right solution.

The Adaptive images script by Matt Wilcox takes care of image resizing on the server side. A screencast explains: http://vimeo.com/38947881 This is a PHP script which resizes and caches the images, and directs the server to hand out the right image to your viewer. It aims to work “right out of the box”. This is overwhelmingly the most popular solution up until now, with two modules leading the pack:

• Adaptive images - 3198 sites http://drupal.org/project/adaptive_image Works with screen size, not window size.
• Adaptive Image Styles (ais) 1484 sites http://drupal.org/project/ais This module integrates with inline images, Media and WYSIWYG.

If we judged by popularity alone, we’d assume either of these Adaptive images was the best solution. However, there are alternative modules which give you control when you manage display of an image field on a content type. I've chosen not to list all the options here because two seem to have taken the lead.

• Responsive images and styles 1550 sites using this now. http://drupal.org/project/resp_img
• Picture - 142 sites using this now. http://drupal.org/project/picture

Drupal 8 is forming a clear path with the Picture module. That is already part of Drupal 8 and has been backported to Drupal 7. Though there are few sites using this module now, you can expect to see many improvements coming soon, and more sites adopting it.

I drafted this blog post about 2 weeks ago, when I contributed documentation to the Picture module. I backtracked after realizing I had to cover some basics first (in Parts 1 and 2). In the meantime, Chris Ruppel at Four Kitchens has written up a blog post about this very situation. Responsive images: A Drupal solution.

How the Picture module works:

1. 1Check out a demo for the Drupal 7 Picture module http://atix.be/Zke. Inspect the source to see the markup provided.
2. 2First you specify breakpoints in your theme. This defines at which widths you want to offer alternative images. The Picture module reads the configuration from your theme's .info file.
3. 3Configure custom image styles if needed. Picture module provides a wizard to help you create the styles, but you'll need to set the widths.
4. 4Map the image styles and set the display options for the image field. Picture provides an alternative to the "Image" display formatter for image fields. For me, that was the only tricky step.
   

Read the complete tutorial on Drupal.org for the full step-by-step you need to set this up:http://drupal.org/node/1902264 I recommend combining the Picture module with a responsive theme such as Zen.

But is it future-proof??

I always have to be really careful about what we include in our training materials. We have to recommend reliable, stable modules and trusted solutions. Right now, the Picture module seems the most future-proof solution as its inclusion in Drupal 8 (hopefully) means a smooth upgrade. Can I guarantee that a better solution won't come up in a few months? Well... not really.

I’m always wary when I ask my colleagues for reports about what is happening “in the field”, and they come up with as many responses as people I ask. My colleagues on the Acquia Professional Services team work with some of the largest brands and organizations and advanced teams of designers and developers. They see a cross-section of solutions which actually work in practice. And right now, all of my colleagues admitted they aren’t seeing a lot of brands choose a responsive or adaptive image solution.

That doesn’t mean you shouldn’t try it however. It’s great to see established brands such as The Boston Globe leading the charge, and there’s no reason you can’t attempt it if you think it’s going to enhance your user’s experience.

Also: Don't forget to check out our Drupal training events across the globe.