Picture This!

Robert Bates, Senior Developer
#Drupal | Posted

It seems like we are always trying to stay one step ahead of proposed web standards in an attempt to future-proof our sites and take advantage of emerging technologies. One such proposed standard that is exciting - yet difficult to implement at times in existing frameworks - is the new responsive PICTURE element.

We all know and love the good ol' IMG element that has been around since the dawn of the web, but in today's world of mobile devices and varying bandwidth to these devices, the one-size-fits-all IMG tag doesn't quite cut it. There are several polyfill solutions out there that leverage Javascript to serve up multiple images based on device size, but now you're piling more code on top of an already bandwidth-limited website. This is where the proposed PICTURE element comes into play, allowing a page to declare a single PICTURE element and multiple images to serve up based on CSS3 media queries. Problem solved, right?

Not so fast... The element is still in the "unofficial draft" state, so it has limited support (some advance versions of newer browsers might have it, but nothing in production to date). However, there are some solutions out there that will serve up the element if the browser supports it, but fallback to the polyfill solution if not. One that is turning out to be incredibly helpful is the combination of the Picture and Breakpoints modules to help future-proof D7 sites that implement responsive themes like Omega.

How does it work? Pretty simple - (once you get the hang of it, after setting a few up):

  1. Install the Breakpoints and Picture modules.
  2. Define breakpoints for your images (and additionally core image styles for those breakpoints if you don't already have some you'd like to leverage).
  3. Define breakpoint groups that will be used by the Picture module to associate breakpoints to image styles.
  4. Map image styles to breakpoints in each group.
  5. Under Manage Display for an image field, select the Picture field formatter instead of Image and select the picture group (aka breakpoint group) you want to use for this field.  Other settings are similar to the Image field formatter.
  6. Check out your new images!

What you should see on a browser that does not support the PICTURE element yet is a collection of IMG and SCRIPT tags to manage the polyfills leveraging weblinc's picture library. On a browser that supports the element, you will see a PICTURE element generated using the CSS3 media queries defined by the Breakpoints module and the images being served up from image style paths as mapped by the Picture module. The beauty of this solution in Drupal is that you can apply it to existing image fields with minimal impact since the implementation is encapsulated in a field formatter, with only wrapper-level CSS changes being your biggest hurdle.

[caption id="attachment_3397" align="alignnone" width="300"]picture-this-lg Large breakpoint example[/caption]

[caption id="attachment_3398" align="alignnone" width="300"]picture-this-md Medium breakpoint example[/caption]

[caption id="attachment_3399" align="alignnone" width="300"]picture-this-sm Small breakpoint example[/caption]

For a more detailed tutorial on setting up and leveraging these incredibly useful modules, check out the tutorial on drupal.org.

Robert Bates

Senior Developer