Responsive Images and Drupal

Responsiveness must consistant of three things: a flexible grid, flexible images and media, and media queries. In this article we will discuss the use of responsive images.

It’s easy enough to style images so that they scale to fit within a parent container by adding to one’s stylesheet. However to use this effectively, though, the image must be large enough to scale up to whatever size we can reasonably expect on the largest possible display. This procedure can involve a great deal of overhead and very time consuming in the long run. So what techniques can we use for responsive images?

Polyfill

Scott Jehl has a JavaScript polyfill which is one way to implement a responsive image.

Advantages

• Mimics other media syntax like and.
• Backward compatibility with older browsers.

Disadvantages

• Complicated. Harder to learn and impliement especailly in a Drupal environment.
• Requires more code.
• Media query syntax can be found in elements of CSS and HTML.
• Future updates are more difficult.

view demo

Responsive Content Images with PNG background-image

The responsive content images technique only requires a blank PNG or GIF the same size as the intended image. This then sets that image’s background to the images needs and is served alongside with background-size: contain.

This procedure works because the spacer PNG is set to transparent by default, which allows the image’s background image to be visible. Because the background is set with CSS, it can then be changed with media queries as required to serve different images to different viewport sizes or resolutions.

Pros

• All users, regardless of device get the image that’s targeted for them with minimal overhead.
• No additional markup needed – just the img tag
• Compatiable with existing technologies and markup.
• No dependencies on JavaScript.
• No polyfills.
• Images will still retain any accessibility features from the alt text.

Cons

• An extra HTTP request to first load the spacer PNG.
• A unique PNG is required for every different dimension of content image that needs to be made responsive.
• Replacement images defined in CSS, not in markup or on the image itself.
• Users cannot pin, share or save the image easily.

view demo

Adaptive Image on Drupal

From a Drupal perspective this is the easiest to implement and get up and running. The Adaptive image module provides device-appropriate versions of images from your fields. You can activate adaptive images by adding an adaptive effect to any of your image styles.

Pros

• Heavy lifting done by Drupal core.
• Integration with "image styles" configuration.
• Integrates with Views 3.x. via the use of image styles
• Generates its own rescaled images on the server and doesn’t require markup changes.

Cons

• Lack of CDN support
• No Drupal 6 version

view project page

For those looking for a quick solution to responsive images we suggest installing the Adaptive Image module.