There are a number of responsive image techniques for Drupal. Typical responsive image modules used regularly include: Responsive Images, Client-Side Adaptive Image, Borealis, Adaptive Image. These typically allow you to create a drupal Field which is an image and it will respond to the viewport of the device visiting your website. Some of these modules use Javascript, some don’t.
A new module entering this space is Media Query Images. This module can make use of the BreakPoints module, and optionally Picture module to in a nutshell:
- Let you define breakpoints which images should be generated per viewport size.
- It then generates media query rules stored in CSS to allow remote browsers to fetch the correctly sized image — there is no javascript needed clientside for responsive images using this module as its using/generating media queries for you. (On older browsers it uses Respond.js which has known issues with IE8 at this time)
- Optionally supports the Picture module to match up breakpoints to custom drupal image_styles rules.
An example of media_query_images with the Breakpoints integration enabled is shown here, for the given Breakpoint setting, the specific image_style of Thumbnail should be used:
This module and its 2 drupal dependencies (or at least just Breakpoints), seem really easy to use and install. Hopefully its adoption will take off.
note: This module maintainer and I are long time acquaintances :P. But, having heard about this module from him, I felt the need to expose it out to the world at large!
Looking for quality Drupal Web Hosting? Look no further than Arvixe Web Hosting!
