Cloud Platform
Responsive or Adaptive Images in Drupal
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:
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.
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
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:
Accessible text
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
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.
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:
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.
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:
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.
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. Don't forget to sign up for my training newsletter and check out our Drupal training events across the globe.
Also in this series
Cloud Platform