Using Responsive Images in Drupal 8
Drupal 8 provides an easy-to-use responsive image module in core.
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.