Drupal 8 Responsive Image Module

With more and more users using their phones to search the web, the demand to create faster loading web pages is ever increasing. A common issue that developers face when looking to reduce page load time is image optimization. Beyond image compression, however, there is not much more you can do to image without sacrificing the quality of the image - until now. Thanks to a recent update to Drupal 8, the Responsive Image Module allows for the cropping or scaling of images at any desired breakpoint. This means you no longer have to load a 1900px+ size image on mobile devices, greatly reducing download time.

Additionally, from a front-end perspective, you are no longer constrained to one image style across all breakpoints. You can switch up the crops and scale sizes from one breakpoint to another, giving you more design freedom when using image styles.

To use this powerful module, there are just a few simple steps to get you on your way.

1. Create yourtheme.breakpoints.yml file

The yourtheme.breakpoint.yml file allows you to define all the breakpoints used in your site.

This file is placed within the root of your project, where your .theme and .info files live. The essential aspects of this file are:

Theme.small: machine name of your breakpoint
Label: The name of that breakpoint
mediaQuery: the screen size that breakpoint covers, written in proper media query format
Weight: The order the breakpoint appears
Multipliers: a measure of the viewport's device resolution. A more technical definition would be defined as the ratio between the physical pixel size of the active device and the device-independent pixel size. An easy reference is:
- 1x = standard sizes
- 2x = retina display (think Macs)

Below is an example of a basic yourtheme.breakpoint.yml file to get started:

theme.small:
 label: small
 mediaQuery: ''
 weight: 0
 multipliers:
   - 1x

theme.medium:
 label: medium
 mediaQuery: 'all and (min-width: 640px) and (max-width: 991px)'
 weight: 1
 multipliers:
   - 1x

theme.large:
 label: large
 mediaQuery: 'all and (min-width: 992px) and (max-width: 1199px)'
 weight: 2
 multipliers:
   - 1x

theme.xlarge:
 label: extra large
 mediaQuery: 'all and (min-width: 1200px)'
 weight: 3
 multipliers:
   - 1x

2. Enable the Responsive Image Module

Once the .breakpoint.yml file has been created, install the Responsive Image module within the Extend section.

3. Create Image Styles

Next, you will need to create an image style for each breakpoint. I typically make sure I do two things when creating these image styles:

Name their image styles with their media query size included
- Example: Hero Image - Medium
Crop or scale them roughly with a max-width of that media query, to avoid stretching of an image at any point.

Example: Hero Image - Small has a Scale and Crop of 260px x 640px - (The max width of our small breakpoint defined in step 1).

4. Create a Responsive Image Style

Now that the module is installed and your image styles are created, you are ready to create your first Responsive Image Style.

Go to Configuration > Media > Responsive Image Styles
Click *Add responsive image style*.

Label your responsive image style, and select a breakpoint group. It is important to select the breakpoint group you created in the previous step (typically called your theme name), as this will allow you to add an image style for each breakpoint group.

The next page you will see is where you can set the image styles for all your breakpoints you defined in your mytheme.breakpoints.yml file. There are a few ways to define your image styles for each breakpoint here, but we will just go over one simple one for now:

Open a breakpoint (large for example)

Choose Select a single image style under Type
Choose your predefined image style from Image style the dropdown

And that's it! Repeat the steps above for each breakpoint, and you will have successfully created a responsive image style. Now it is time to use that style on a field.