Responsive Images in Drupal: Part 1

Solid imagery can make or break a design. In our current world of changing screen sizes, screen resolutions, and bandwidth the effective use of imagery has not only become more important, but a lot more challenging.
You may want to serve up a scaled-down image in an effort to optimize performance. You may want a scaled-up image to optimize for high resolution devices. Or you may want to serve the same image, cropped differently to work better with layout changes at different breakpoints. HTML5’s ‘picture’ element addresses these challenges, and so many more.
Using Drupal, we can automate the creation of the needed versions of a single image, making content creation that much easier. In part 2 we’ll look at opening up control over the art direction of the images, while still maintaining the design’s layout rules.

Setting up the image stack

First we need to create the image styles for our breakpoints. We have three contexts to plan for; small, medium, and large displays. There should be an image style for each, and for now it should have a Scale and Crop effect set to our dimensions.

Setting up Breakpoints

Drupal needs to be made aware of the breakpoints our site uses, and the Breakpoints module does just that. Install Breakpoints and its dependency, CTools. The Breakpoints module has two ways to define breakpoints, in the interface or in your site theme’s .info file. We’ll use the interface (admin/config/media/breakpoints) to create three breakpoints.

Next you need to create a Breakpoint Group (admin/config/media/breakpoints/groups/add). Imagine you have several more breakpoints defined, but you want to pick specific ones to apply to one component of the site. With Breakpoint Groups, you have that ability.

Setting up the Picture module

While the Breakpoints module handles the definition and organization of breakpoints, the Picture module uses Breakpoint Groups to create the markup. Enable the Picture module and add a new Picture Mapping (admin/config/media/picture).
After you’ve chosen your Breakpoint Group, you’ll have some options as to what should happen at each breakpoint. In our case we want to match each breakpoint up to the appropriate image style we created earlier.

Applying this to an image field

Once all this has been set up, we can now use our Picture Mapping as a field formatter for an image field on the site. Visit the Manage Display tab for a content type with an image field, and set the Format to the Picture Mapping we set up.

One important thing to notice is the Fallback Image Style. This is what image will be used in browsers that do not support media queries.

Wrapping up

If you create a piece of content, the rendered image should get switched out if you view the full node and resize the window. The only downside to this is Drupal is deciding what the focal point of the image is, which may not always be desirable. In the next part of this tutorial, we’ll look at using the Manual Crop module in order to give that control back to content editors.