The Responsive images and styles module allows you to manage images in Drupal sites that are using Responsive Design. The module provides an interface to map existing image styles to breakpoints.

This documentation is only for the 7.x-2.x Version.

Installation

Recommended to download the 7.x-2.x Version and install. This version doesn't use javascript anymore to detect the device width, but uses a picture tag and full media queries.

Pre-requisites

  1. Breakpoints
  2. Ctools
  3. Field formatter settings API module

Steps

  1. Place all the module in: your sites/all/modules directory; or your sites/[my site]/modules directory.
  2. Enable the modules at: admin/modules

Configure responsive images

  1. Configure Breakpoints module
  2. Create image styles required for your site at:admin/config/media/resp_img/create_style
  3. Visit the responsive images configuration page: config/media/resp_img
  4. Choose the breakpoint group associated with your theme
  5. Map the breakpoints to image styles

Map the responsive images to content types

  1. Visit the content type admin page:admin/structure/types
  2. Choose the content type you want to edit
  3. Click on Manage display
  4. Click on the settings icon next to the image field
  5. Associate image style to the group created for your theme
  6. Click Save

Visit the content page and see the images load based on the defined breakpoints.