Providing responsive images with Drupal

This article first appeared in issue 232 of .net magazine – the world's best-selling magazine for web designers and developers.

Most web developers using responsive techniques know that serving up images to low-bandwidth mobile devices can be an ache within a headache.

Even if you set your max-width on your images to 100% and set your height to auto (you should), the web server still sends the full image to your user’s device. This sucks up potentially precious bandwidth on your user’s mobile connection. And, as we all know (right?), mobile optimised websites shouldn’t just be formatted to the screen, they should be optimised for the low bandwidth connections mobile devices frequently encounter.

Luckily for most devs, our industry’s geniuses have been hard at work devising techniques to ease this pain. Popular techniques include Mairead Buchan’s method, creating responsive images using the noscript tag, and Matt Wilcox’s adaptive image system.

In this tutorial, we’ll be solving this problem four times, thanks to the latest version of the Drupal CMS, 7, and its vast, user contributed module library. We’ll be looking at the adaptive image module, the adaptive image styles module, the client-side adaptive image module and, finally, the responsive images and styles module. These represent great solutions to optimising your Drupal website for bandwidth starved mobile devices; all modules used employ the techniques listed above.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.