Responsive Images

Objective

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

Status
Active

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
./scripts/install.sh

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 http://olivero-sandbox.lndo.site/

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.

/admin/modules

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:

olivero.responsive-test:
  label: Mobile Responsive Image Resize
  mediaQuery: 'all and (max-width: 699px)'
  weight: 8
  multipliers:
    - 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

/admin/config/media/responsive-image-style
Add responsive image style: "Hero Article"

Choose Olivero as Breakpoint Group
1X MOBILE RESPONSIVE IMAGE RESIZE [ALL AND (MAX-WIDTH: 699PX)]
Single Image Style
Hero Mobile Portrait

Step 5: Apply Responsive Image Style to Article Content Type

Go to Article Content Type

/admin/structure/types

Manage Display

/admin/structure/types/manage/article/display

Format: Responsive Image

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

Test

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

Troubleshooting

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".

admin/config/media/image-styles

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

lando drush cr
Conclusion

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

Participants