Adaptive Images and Drupal 7

Having adaptive images is an great addition to an responsive website. Not only will it reduce page load times, but it will make the site perform better on small devices with limited resources. But wouldn’t it be nice if there was an easy way to integrate adaptive images in with your current Drupal site? And if you could pick as many images styles to generate the adapted images as you wanted? And if it was integrated with the Media module so you could insert adaption images using a wysiwyg editor?

Introducing the Adaptive Image Styles (AIS) module.

The AIS module comes with everything you need to make your images adaptive, and only requires a small addition to you standard Drupal htaccess file to run. It works in a very similar way as this adaptive images library, but uses Drupal’s built in image styles to generate the adapted images. By default is comes with default images styles for various size, but you’re free to configure your own.

It works by launching some JavaScript early in the page load you determine the width of the browser page and which image style is then most appropriate for that width. It then sets a cookie with the name of that image style.

When the browser goes to download the image, the small addition to Drupal’s htaccess file redirects it to the appropriate image style.

# AIS: Adaptive Image Style
  RewriteCond %{REQUEST_URI} ^(.+)/files/styles/adaptive/(.+)$
  RewriteCond %{HTTP_COOKIE} ais=(.+)
  RewriteRule ^(.+)/files/styles/adaptive/(.+)$ /$1/files/styles/%1/$2 [R=302,L]

If the user has JavaScript disabled or if the cookie hasn’t been set yet, the “adaptive” image style simply displays the original image without modifications.

Since the module make any image render with the image style named ‘adaptive’ an adaptive images, it can be integrated very easily with existing content. Just set the image to use the “adaptive” image style.

Check out the AIS module or checkout a demo of the AIS module.

Here’s some non-Drupal specific information on Adaptive Images:

If you’re not running apache and don’t want to port any htaccess rules, but still want to play with adaptive images on Drupal, you can also check out the Responsive Images module.