Responsive image

Building responsive images using the Picture module in Drupal 7

Optimisation of your images in Drupal 7 with the Picture module. Small device, small images. Large screen, large images. This article will help you take your images to the next level.

Handling responsive images can be a bit challenging, especially for a beginner. But there are always a lot of ways in dealing with this challenge. In this article, we will see how you can set Drupal 7 to provide the right image for the right device. You would not want to waste the user’s time (and bandwidth) by providing a large version of the image if a mobile device is being used. So let’s discuss about a better solution: Picture module of Drupal 7. With this solution, you would be able to provide a small version of an image to a mobile device and a larger version of the same image to a larger device.

Picture module is a part of Drupal 8 core, the Drupal 7 version is a backport of it. This module will deliver alternate image sources based on device capabilities to prevent wasted bandwidth and optimise display for both screen and print. 

Along with picture module, we will also be using a breakpoint module. We define different image style for specific screen sizes (breakpoints), and you define breakpoints using the breakpoint module.

Step 1. Download and enable picture module and breakpoint module.

Nothing special here, just like every other module: download and enable.

Picture module
You can find more about this module's description at


If you are using drush (, download and install the picture module and it’s dependency breakpoint module by running the following commands in your terminal.

$ drush dl picture

$ drush en picture

$ drush dl breakpoints

$ drush en breakpoints

If you are not using drush, you can also download the two modules manually at and

Step 2. Configure breakpoint for the picture module

A. After the picture module and it’s dependencies had been downloaded and enabled, go to Configuration » Media (/admin/config/media) then click breakpoints. Add the custom breakpoints. Once the breakpoints had been entered, we should see the page similar below.

We set the smallest breakpoint to 0px minimum to ensure that we can accommodate arbitrarily small screen sizes. For responsive design, the preferred order of breakpoints is using minimums in decreasing order. In this example, I am using classic breakpoints for responsive designs:

  • Mobile: from up to 739px
  • Tablet: from 740px to 979px
  • Desktop: 980px and above
Note that the option "multipliers" would help you to manage hi-resolutions screens (retina type).


B. After breakpoints had been set, click on ‘add new group’. Enter a name in the ‘Group name’ field. You can call the group based on what you are using it for. For this tutorial, we will call our group ‘ Blog image.’  Select all the breakpoints then click ‘Save’.

Step 3. Configure picture module

We had just configured three breakpoints, next we will be assigning image styles to these breakpoints. In the toolbar, go to Configuration » media and click on 'Picture mapping' and click on 'Add'.

After clicking on 'add', a dropdown will appear, click on 'blog images'.

Assign image styles to specific breakpoints.

picture mapping
Click 'add'.

breakpoint group
A dropdown will appear, click on the breakpoint group you created, in our case, 'blog images'.

add new picture mapping
Assign image styles to specific breakpoints.

Step 4. Configure field formatter in content types.

Go to Admin » Structure » Content types.

Click on your content type, for example ‘Articles’, then click on ‘Manage display’ tab.

Select the picture formatter from the dropdown.

Select 'blog image' from the picture formatter dropdown.

In the view, click on 'Fields' then Content: Image. 

In formatter dropdown, choose 'picture'.

choosing picture mapping in views
In picture mapping dropdown, choose 'blog image'.


This is it! You now have optimised your images, and this will work on all devices!

Tune in to the next article: Responsive Images with Drupal 8.


Join the conversation

Mary Chris Casis

Front-end and Drupal developer