Responsive Image Loading with the Picture Module

Session Speaker(s): 
Saturday, November 8 2014
Room: Warp Zone
Time: 5:30pm - 6:00pm

Responsive Web Design (RWD) is increasingly vital in the contemporary web landscape, where your content can be displayed on a phone, a laptop, an 84-inch 4k monitor, a refrigerator, or even a watch. In this session you will learn how to leverage the Picture module (and its dependency, the Breakpoints module) to achieve responsive image loading in Drupal 7.

The Picture Module

There is no RWD solution for images in Drupal 7 core. Luckily, a responsive image handling module called Picture will be included in Drupal 8 core, and has already been backported to Drupal 7. Picture uses the new HTML5 picture element.

This session will cover:

  • Installation and configuration of the Picture, Media, Chaos Tools Suite, and Breakpoint modules
  • Creating breakpoints and breakpoint groups
  • Configuring picture mappings
  • Setting up file type display settings
  • Applying these options to an example content type
  • Basic introduction to the picture element and media queries

Image loading is particularly important for RWD; loading an image size inappropriate to screen resolution is problematic whether you're stretching a 100x100 thumbnail over a massive screen, or sending a ten megapixel background to a QVGA phone. In the former case you're making a pixelated mess, and in the latter case you're eating up both your own bandwidth and your user's data plan on a resolution they can't use - nobody wins.

Benefits for Your Site

There are many reasons to responsively load images on your site. A few highlights are:

  • Consistent user experience across platforms
  • Single URL per page
    • No need to code up a separate mobile version
    • SEO optimization -- Don't split your pageview count between multiple URLs
    • Improved shareability
  • Massive pageload benefits on mobile

Target Audience

This session is aimed at beginning level Drupalers who haven't used the Picture module before.

About the Speaker

Cooper Stimson is a software engineer at ThinkShout, and co-maintainer of the Add to Cal module. He dynamically resizes to best fit your browser window, and can be found on d.o.