Back in early 2010, when Jason Grigsby pointed out that simply setting a percentage width on images was not enough, and that you needed to resize these images as well for a better user experience. He pointed out that if you served the right sized images on the original responsive demo site, more than 75% of the weight of those images can be shaved on smaller screens.
Ever since, the debate on responsive images have evolved in what is the best solution to render the perfect, responsive images without any hassle.
We all know how Drupal 7 does a great job in handling responsive images with its modules. However, with Drupal 8, things are even better now!
Responsive Images in Drupal 8
The Responsive Image module in Drupal 8 provides an image formatter that maps the breakpoint of the original image to render a flawless responsive image using a picture tag.
When we observe how Drupal 8 handles responsive images when compared to Drupal 7, some of the features to be noted are:
Drupal 7 consists of the contributed module picture element, which in the latest version is known as Responsive Images.
In addition to this, Responsive images & Breakpoint modules are a part of the Drupal core in the latest version of the CMS.
The Problem
One of the major problems with the images in web development is, browsers do not know about the images, and are clueless about what sized images are rendering in relation with a viewport of different screens until the CSS & Javascripts are loaded.
However, the browser can know about the environment in which the images are rendering, which includes the size of the viewport and resolution of the screen.
The Solution
As we mentioned in previous sections, responsive images use picture element which basically has sizes and srcset attributes which play a major role in notifying the browser to choose the best images based on the image style selections.
So Drupal 8 has done a great job in providing the responsive images module in the core. This will download the lower sized images for the devices with lower screen resolution, resulting in better website load time and improved performance.
Steps to reproduce
- Enable Responsive images and breakpoint module.
- Setup the breakpoints for your projects theme.
- Setting up the image styles for responsive images
- Creating a responsive image style for your theme
- Assigning the responsive image style to an image field.
Enable Responsive images and breakpoint module
Since it's a part of drupal 8 core, we will not require any other extra module. All you have to do is enable the responsive images module, since the breakpoint module will be installed with the standard profile. Else enable the breakpoint module.
To enable the module goto->admin->extends select the module and enable the module.
Setup the breakpoints for your project's theme
Setting up the theme’s breakpoint is the most important part for the responsiveness of your site.
If you are using a core theme like bartik , seven, umami or claro, you will already have the breakpoints file and you don’t have to create any new ones.
However, if you are using a custom theme for your project, it is important that you define the breakpoints in "yourthemename.breakpoints.yml" which can be found in your theme directory, usually found in "/themes/custom/yourthemename".
Each breakpoint will assign the images to media query. For example images which are rendering in mobile might be smaller i.e width less than 768px, where in medium screens will have a width between 768px to 1024px.
Each breakpoint will have:
label: Is the valid label given for the breakpoint.
mediaQuery: Is the viewport within which the images are rendered.
weight: For the order of display.
multipliers: It's a measure of the viewport's device resolution normally 1x will be used for standard sizes and 2x for retina display.
Setting up the image styles for responsive images
Now we will have to create an image style for each of the breakpoints. You can configure your own Drupal 8 image styles at admin->config->media->image-styles.
Click ‘Add image style’. Give the valid name for your image style & use scale and crop effect which will provide the cropped images. If the images are stretched, add multiple image style for different viewports.
Creating a responsive image style for your theme
This is where you provide the multiple image style options to the browser and let the browser choose the best out of the lot.
To create new responsive Drupal 8 image style navigate to:
Home -> admin- > config-> media->responsive-image-style and click on ‘Add responsive image’.
Give a valid name for your responsive image style & select the breakpoint group (choose your theme) & assign the image styles to the breakpoints listed
There are multiple options for the image style configurations
- Choose single image style: Where you can select the single image style that will be rendered on the particular screen
- Choose multiple image style: Where you can select the multiple-image style and also specify the viewport width for the image style
At last, there is an option to select a fallback image style. The fallback image style should only appear on the site if an error occurs.
Assigning the responsive image style to an image field
- Once all the configurations are done, move to the image field by adding the responsive image style.
- To do that go to the field’s manage display and select the responsive image style which we created.
- Add content and see the results on the page with a responsive image style.
Final Results
The image at a minimum width of 1024px (For large Devices).
Image at minimum width of 768px (For Medium Devices).
Image at maximum width 767px (For Small Devices).
