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?
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.
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.
For those looking for a quick solution to responsive images we suggest installing the Adaptive Image module.