How to Set Up Responsive Images in Drupal 8

Responsive images are great! If I wanted to quickly introduce what responsive images are to some, I would say: On mobile? Small images. Tablet? Medium images. Desktop? Large images. This article is a complete "how to" in setting up responsive images in Drupal 8. 

If you are using Drupal 7, check out my previous article here: Picture Module: Building Responsive Images in Drupal 7.

So much has changed in Drupal 8 since our last tutorial. With D8, there is no need to download an extra module. The 'Responsive Images' module is now in Drupal's core.

Here is what this post will cover.

1. Enable the Responsive Image module.
2. Setup breakpoints.
3. Setup the image styles for responsive images.
4. Assign the responsive image style to the image field.

Lets get started!

Keep in mind that Drupal 8 was end-of-lifed on Nov. 2, 2021 for an updated version of this topic, go to "How to Set Up Responsive Images in Drupal 9."

Step 1: Enable the Responsive Image module

One of the major changes in building responsive images in Drupal 8 from Drupal 7 is the responsive image module being part of Drupal’s core - there is no need to download an extra module. However, this feature is not enabled by default.

1. To enable the responsive image module, go to "Admin" > "Configuration" (/admin/config).
2. Click the checkbox next to "responsive Image".
3. Click "Install".

Step 2: Setup breakpoints

If you are using a default theme like Bartik, there is no need to create breakpoints.yml file. Default themes already have this file.

If you have a custom theme, go to your editor. In the root of your theme directory, create a file called "yourthemename.breakpoints.yml".

Your theme directory is usually found at "/themes/custom/yourthemename".
For this tutorial, I will call my theme "alumni_theme".

alumni_theme.small:
  label: small
  mediaQuery: '(min-width: 0px)'
  weight: 0
  multipliers:
    - 1x
    - 2x

alumni_theme.medium:
  label: medium
  mediaQuery: '(min-width: 768px)'
  weight: 1
  multipliers:
    - 1x
    - 2x

alumni_theme.large:
  label: large
  mediaQuery: '(min-width: 1200px)'
  weight: 2
  multipliers:
    - 1x
    - 2x

Each breakpoint will tell Drupal what image size to load for each of the assigned mediaQuery. For example, we can load an image with a small image size for the breakpoint at min-width: 0px. When the browser is at min-width: 740px we can load another image size.

It is important to take note that the breakpoints weight should be listed from smallest mediaQuery to largest mediaQuery.

The multipliers allow us to display a crisper image for HD and retina display.

Step 3: Setup the image styles for responsive images.

 

Drupal image styles

We need to create the image sizes for the different breakpoints. Add one image style for each breakpoint you set at your_theme_name.breakpoints.yml. Since we created three breakpoints in our breakpoint.yml file, we will have to create three image styles.

One image style for each breakpoint.

For this tutorial, I will create:

1. Image style of 400px by 200px for a minimum breakpoint of 0px up to breakpoint not more than 740px. This image style would be used for mobile devices.
2. mage style of 1000px by 450px for a minimum breakpoint of 740px up to breakpoint not more than 1200px. This image style would be used for medium devices like Ipads.
3. Image style of 500px by 400px for a minimum breakpoint of 1200px and above. This image style would be used for large devices like desktops.

You can configure your own image styles at ‘Home > administration > Configuration> Media’ (/admin/config/media/image-styles).

• Click ‘Add image style’.
• Type in the name of your image style. It’s better if your image style name is descriptive. Click Save.
• From the drop-down, choose scale and crop. Click ‘Save’.

 

 

• Type in the width and height of your Image style.

 

 

• Click ‘Add effect.’

So that's one image style. Go ahead and create two more image styles. Just follow the steps provided above.

Here are the three image styles I created for this tutorial.

 

Step 5: Responsive Image styles

We will now assign the image styles with the breakpoints, to create the Responsive Image styles.

Go to ‘Home > Administration > Configuration > Media’ (/admin/config/media/responsive-image-style) and click on ‘Add responsive image’.

For this tutorial, I will call it ‘Header Image’ since this will be used for the header images of my posts.

• Type in the name of your responsive image.

 

 

• From the drop-down in ‘Breakpoint group’, choose your_theme_name.
• Click Save.
• Assign image styles to every breakpoint defined in “your_theme_name.breakpoints.yml”.

 

Step 6: Assign the responsive image style to an image field

 

• Go to the content type where you want the responsive image style to be used.
• Click ‘Manage fields’.

 

• Click the gear icon on the right side.
• From the drop-down under ‘Responsive Image style’, choose the responsive image style you created.
   

And we are done!

To check, add a new content piece and add an image to the image field (make sure you are in the right content type). Resize your browser to the browser size defined in your your_theme_name.breakpoints.yml.

Right-click on the image and click ‘inspect’. In ‘network > img’ you will see the name of the image style that your image is using based on the browser size.

 

 

 

 

And we are done! Your image should now be resized based on the browser size without losing its quality.

Special thanks go to Raymond Angana, Andrew Kucharski and Luc Bézier for contributing to this post before publication.