Adaptive Images in Drupal

Cross-posted with permission from Outlier.com

Responsive, mobile-first web design is the latest trend to take hold of the web design community, and with good reason. With the advent of the mobile OS as a mainstream portal through which people are increasingly connecting to the internet, the needs of these users--and those of the relatively nascent tablet market--are becoming increasingly important. But rather than creating "mobile" versions of websites, which are often riddled with compromise, responsive design creates a single layout that works across all devices.

Mobile first, responsive design takes a different approach. Much as the name implies, it asks developers to consider the mobile viewport first when designing a site, rather than last, or worse yet, as an afterthought. By figuring out what elements are critical, you can then add in more information as your viewport increases.

This idea of only delivering what the user's viewport needs can be transferred to all of the image work on your site. Why load a 300 kb, 1300 x 800 px image file when your site is being visited by someone with a 320 x 480 px screen? By using adaptive imaging, your site can intelligently determine the smallest image needed for the current viewport, thus dramatically cutting back on load time. Better yet? Drupal has several modules to help you with this.

Decisions, decisions

One of the great things about the Drupal community is the wealth of developers out there working to contribute to core, or create modules to extend Drupal's functionality. The downside to this is that oftentimes there are a multitude of modules to accomplish the same task; adaptive imaging is no exception. As of this writing, there were six different modules all offering adaptive imagery. I will be going into detail on two of these modules. The one which I think is the best of the six, and the one I think you should be watching.

The Best: Adaptive Image

I have tried all six of the available modules and this was by far my favorite. It leverages Matt Wilcox's Adaptive Image work, which I feel is one of the better implementations out there. This module ultimately wins because it is extremely easy to use and its implementation is the best. Simply download the module and enable it. Once you've done that it will integrate with Drupal 7's built-in image styles and you can make any style adaptive simply by adding ‘adaptive' as an effect to that style. Set the breakpoint and voilà . For its simplicity and implementation, this is my preferred method of adaptive imaging in Drupal.

The Future: Borealis

Borealis is actually a helper module for the wonderful theme Aurora, and contains a semantic block module in addition to an adaptive image module. If you haven't checked out Aurora and its awesome mobile-first, responsive design, you should do that immediately! Aurora creates a fluid design that has breakpoints created around the content rather than device widths, and it even scales the content font dynamically so that your paragraphs always respect typography rules dictating how many characters should be on each line. It also uses Compass and SASS. Yay!

So why is Borealis Responsive Images so great, and why didn't it win? Well, it's so great because, like Aurora, it creates its break points around your content and not around device widths. One of the golden rules of design is that good design should always fall away and never get in the way of the content. While responsive design around device breakpoints is better than a static layout, it still causes the design to fall around devices rather than your content. Borealis changes that. On top of that, it is as easy to install and use as Adaptive Image. The only reason it didn't win is the simple fact that I could not get it to work. Only the smallest image would work. There is an issue for this in the queue, but as of this writing, Snugug, who is my hero due to Aurora, still is working on it. So until then, Adaptive Image wins.

The Others

So that's all well and good, but what about the other four options out there? Here's a quick break-down of my personal complaints (YMMV):

• Client-side Adaptive Image - Integrates with the display fields section of a content type rather than the image style. Personally I feel that the integration belongs in the image styles, as they are there to define, well, image styles. With this module, you'll need to set the breakpoints for similar image fields across all content types that use it.
• Adaptive Image Styles - Requires an .htaccess modification. Far from a big deal, and it's a pretty minor one, but as other modules have shown, an unnecessary one.
• Responsive Images (Yea the plural one) - This module is no longer actively maintained.
• Responsive Images and Styles - Very comprehensive, but a somewhat difficult and confusing setup. Definitely not a plug in and go type of module, but if Adaptive Image doesn't offer enough functionality, you might want to check this one out.