March 11, 2016

Using Responsive Images in Drupal 8

Written by Rory Douglas
Drupal 8 Responsive Images banner

Until recently, if you wanted to load different images for different screen sizes on your website — what's usually known as responsive images — you had to hack together your own combination of JavaScript, HTML, and back-end languages to get the right images and markup into the right places. With Drupal 8, however, an easy-to-use responsive image setup is built right into core, and you can use it on your site without any coding at all. Here’s what you do.

1. Turn on the responsive image module

The responsive image module comes with Drupal core, but you have to turn it on before you can use it. Go to /admin/modules and click the checkbox next to “Responsive Image.” Then click “Install.”

2. Set up your breakpoints

A breakpoint is a window width where Drupal will start using a different size image. For example, you might set a breakpoint at min-width: 600px. With that breakpoint, you’ll be able to tell Drupal to load one image for window sizes smaller than 600px, and use a different image for window sizes of 600px or more.

If you’re using a pre-built theme like Bartik, it’ll likely have breakpoints set up already. If you’re building your own theme, you’ll have to set up breakpoints in your theme’s breakpoints.yml file. Instructions on how to do that are right here.

3. Create your image styles

For each breakpoint in your theme, you’re going to want an image style. If we’re using the Bartik theme, it has the following breakpoints:

  • Min-width: 851px
  • Min-width: 560px and max-width 850px
  • Mobile (smaller than 560px)

For each of these breakpoints, we’ll want to create an image style. For the mobile breakpoint, you’ll want an image that’s 559px wide — that’s the smallest image that’ll fill the screen. If your image has 3:2 dimensions, for example, you're going to want that image to be 373px tall. (It takes a little bit of math.) 

Doing the math for each of the breakpoints is the hardest part about this. Setting up the actual image styles is easy. First, go to /admin/config/media/image-styles/add. For image style name, use something descriptive, like “Homepage banner mobile.”

After you click save, you get to the screen where the real magic happens. Under “Effect,” click “Select a new effect” and then click “Scale and crop.” Enter your width and height — 559px and 373px in our example — and click “Add effect.”

Now any image that has this style will automatically resize the uploaded image to those dimensions. Drupal does this intelligently, so it’ll first size the image to the right dimensions, and then crop off extra — the image won’t look stretched or weird.

You’ll have to go through and create image styles for each of your breakpoints, which goes fairly quickly after you do the math.

4. Create your responsive image style

Now that you have your individual image styles for each breakpoint, you need to bundle them together in a responsive image style. Go to /admin/config/media/responsive-image-style, and click “Add responsive image style.” Name your style something that will make sense wherever you see it throughout the site, like “Homepage banner image style.”

Under “Breakpoint group,” select the breakpoint group from step 2. It’ll likely be named after your theme, e.g. “Bartik.” When you select your breakpoint group, a list of your breakpoints will appear. For each one, click on the breakpoint and select the image style that you want to appear.

At the bottom, you’ll see an option for fallback image style. Some older browsers don’t support responsive images, so Drupal provides a fallback image just in case. It’s usually best to select your largest image style — it’s better to have an image that’s too heavy than one that doesn’t fill the space it’s supposed to fill.

5. Assign your style to an image field

All that’s left to do is to tell Drupal what image field you want it to responsify. Click on “Structure > Content Types,” and next to the content type in question — if this is a homepage banner, it'll be named something like “Homepage” — click the arrow next to “Manage Fields” and select “Manage Display.”

Find the image field you’re looking for, and under “Format” select “Responsive image.” You then have to click the gear icon on the right side, and under “Responsive image style” pick the style you just created. Click Update, and you’re done!

You can now upload whatever image size you want for your homepage banner, and Drupal will provide all the proper formatting so that the right image gets loaded at the right screen size.


About Rory Douglas
Software Engineer

Rory works on theming and front-end development in Drupal projects, mostly in Drupal 8. He has 10 years experience with web development, focusing on non-profits and higher education. He has an in-depth knowledge of front-end web development, particularly as it pertains to marketing and increasing return on investment. 

Learn how to turn your Drupal website into a marketing machine!

In this “Ask Me Anything” (AMA) style webinar, our Drupal experts, Matt and Rory, field questions about using Drupal to build a conversion machine.

Share This Post


Stay Connected