Responsive Images in Drupal 8 – Best Cloud Hosting ASP.NET

We use media queries in CSS to make our images flexible so that they nicely scale with the view port width but responsive images take things to a whole new level and that’s because responsive images are not only an aspect of responsive design but even more importantly of web performance.

The goal of responsive images is to serve the right image to the right screen size and device, in order to avoid downloading unnecessary large images on smaller screens.

The good thing regarding responsive images in Drupal 8/9 is that it is all in Drupal core and we don’t actually need to download any extra module or library for it. We only need the following few steps to implement this advanced functionality.

1. Enable the Breakpoint and Responsive Image modules

These two modules are part of Drupal 8 core and all we need is to enable them. If you are using the Drupal /9 standard profile then the Breakpoint module is already enabled and, in this case, you only need to enable the Responsive Image module on your site.
To confirm or enable new modules, go to /admin/modules

2. Create the breakpoints in your theme

Breakpoints are really just media queries with some additional metadata. They are used to separate the width and height of viewports in a responsive design so that they are displayed correctly on different devices.
In Drupal 8/9 the Breakpoints module standardizes the use of breakpoints and enables modules and themes to expose or use each other’s breakpoints. Unfortunately, there is no user interface for editing breakpoints in Drupal 8. Instead, we can define breakpoints by creating a Config file called myThemeOrModule.breakpoints.yml in a theme or module. Let’s create one such file in our custom_theme.
Example (custom_theme.breakpoints.yml):

custom_theme.xs:
  label: Extra_small
  mediaQuery: "(min-width: 0px)"
  weight: 1
  multipliers:
    - 1x
    - 2x
custom_theme.sm:
  label: Small
  mediaQuery: "(min-width: 576px)"
  weight: 1
  multipliers:
    - 1x
    - 2x
custom_theme.md:
  label: Medium
  mediaQuery: "(min-width: 768px)"
  weight: 2
  multipliers:
    - 1x
    - 2x
custom_theme.lg:
  label: Large
  mediaQuery: "(min-width: 1024px)"
  weight: 3
  multipliers:
    - 1x
    - 2x

Each entry in this file defines one breakpoint, consisting the machine name for the breakpoint, label, media query, weight and multipliers. Out of them the weight property is really important and provides the value for the order in which breakpoints are arranged. Breakpoints with the smallest min-width should have the lowest weight, while breakpoints with the largest min-width should have a larger weight value. Multiplier is the measure of the viewport’s device resolution 1x is normal and 2x for HD and retina displays.

3. Creating Drupal image styles

In order to serve the right image for the right screen size, we need to create different variations or image styles of the original image where each image style is the result of applying one or more effects (i.e scale, crop, resize, etc.) to the original image.
Since we created four breakpoints in this example, we will also create four image styles in Drupal but you may create less or more. It is up to your use case. To create an image style in Drupal, Visit the Image styles page via the Manage administrative menu, navigate to Configuration > Media > Image styles (admin/config/media/image-styles) and you will see the image styles that are defined by default. I’m going to add the following new image styles to the list:

4. Create the Responsive Image Style in Drupal

In the previous step we created four different Image Styles each with different dimensions. In this step we are going to associate each Image Style with the breakpoints that we have already created in our “custom_theme.breakpoints.yml” file.
To do so navigate to Configuration > Media > Responsive image styles (/admin/config/media/responsive-image-style) and click on “+Add responsive image style” action button. On the new page follow the steps:
I) Enter a Label
ii) Select the theme where you created the breakpoints in .yml file. This will list all the breakpoints that we defined in our “custom_theme.breakpoints.yml” file
Iii) Assign a suitable image style to each breakpoints listed.

5. Use the Responsive Image Style in an image field

Go to the content type or block type where you have the image field and you want to make it responsive. As an example let’s apply it to the image field of the default Article content type.
Go to Structure > Content type > Article > Manage display and change the format of the image field to “Responsive image”.

Next open the display setting for the image field by clicking the gear icon on the right side. Here you can select from the responsive image style that you created before.

Click on update and then Save.

6. Test it with the chrome dev tools.

To test the image source on different screen sizes, open the dev tools window your Chrome browser and then go to network tab and click on the image. Here you can find the source URL of the image used on this particular view port size.
Now change your screen size and check the image source again which will show a different one.