Responsive Images


This recipe describes how to set up the Responsive Image module in Drupal 8, Breakpoints and also set up Image Styles.

What are responsive images?
Using responsive images means loading images that have been specifically sized for the user screen based on breakpoints. This practice makes websites load faster on mobile devices because image sizes are optimized for mobile devices. This is different than fluid images when large images are scaled down with CSS.

Recipe Type
Drupal Version
Steps to Build

Environment (optional)

Skip this section if you already have a Drupal environment ready to use this recipe. If you wish to spin up a simple site with Drupal 8, I suggest starting with Brian Perry's Olivero Sandbox here

For the instructions below, I cloned this repo to my local machine and followed the README.

The commands I ran to spin up the environment were:

cd dev/olivero-sandbox-master
lando start

You will need to log in with the Admin account for the Drupal site to follow this recipe. One way to do this is to use Drush. Learn more about drush here.

Once drush is installed, you can log in as an Admin in Drupal using this command:

lando drush uli -l

Step 1: Enable Modules

Make sure that both the Responsive Image and Breakpoint modules are enabled. Go to the following link on your local environment to verify the modules are enabled.


You can also use Drush to enable the modules using these commands:

lando drush en responsive_image
lando drush en breakpoint

Step 2: Add New Breakpoint

This step and subsequent steps assume you will be using the Olivero theme in Drupal 8. To add a new breakpoint to the Olivero theme, find this file on your machine: web/themes/contrib/olivero/olivero.breakpoints.yml

Add the following Breakpoint at the end of this file:

  label: Mobile Responsive Image Resize
  mediaQuery: 'all and (max-width: 699px)'
  weight: 8
    - 1x

Step 3: Create New Image Style

Go to the following URL: /admin/config/media/image-styles.

Add new Image Style called: "Hero Mobile Portrait"
Scale and crop 640×1046

Step 4: Create Responsive Image Style

Add responsive image style: "Hero Article"
Choose Olivero as Breakpoint Group
Single Image Style
Hero Mobile Portrait

Step 5: Apply Responsive Image Style to Article Content Type

Go to Article Content Type


Manage Display


Format: Responsive Image

Next, apply the "Hero Article" Responsive Image Style.


View Chrome's Network Tab to see that only the proper image is downloaded.


Note that if you alter Image Styles, you may need to flush the image cache to re-create the images. The great thing about Drupal and images is that the original images are not altered! By flushing an Image Style cache, new images are created the next time you visit a page that uses that particular Image Style. You can flush the cache for each individual Image Style by going to the following link in the Admin, finding the Image Style you want to re-create images, and select the "Flush" under "Operations".


Anywhere along the way, if you don't see what you expect, clear the Drupal cache:

lando drush cr

This is a great approach to only load into the browser the desired image optimized for the appropriate device. It helps site performance to reduce the number of images loaded by the browser.

Other Cool Things You Can Do With Responsive Images

Pixel Density

Learn more about how to only load by device pixel density.

User Prefers Dark Mode

Learn more about how to only alter images for Dark Mode computer settings.

User Prefers Reduced Motion

Learn more about how to only load images without animations for users that prefer reduced motion.

Supporting Organizations