Drupal Responsive Image Style

What is this?

In Drupal 8, image style is used to set the presets for image processing. We can set properties like crop, rotate, and scale. If we display an image with any image style, a new image file is created and being used instead of an original image, and no changes are done in the original image.

Responsive image style is the combination of more than one image style. To fulfill this requirement we have a module “Responsive image” in drupal core.

Why We need this?

Nowadays, most of the traffic comes to a site via mobile or other portable devices, a developer should optimize web pages to cater these devices smartly, by using less amount of internet data. Responsive image style adds a step into this.

Suppose a situation where we have a multi-image banner on top of an image. For this we are using images of dimension 1600px X 450px. This is fine with the desktop view, but when we view this page on small devices, do we still need this high-resolution image? The answer is “No” as small devices do not have that much of width. So when we display the same image, the image is being scaled by device width itself, in that case, we have achieved the proper dimension according to the device’s width, but the file size is still the same that of an original. Now the idea came that why we need a 1600px wide image on small devices which likely have a size of around 320px to 640 px. High resolution for desktop is ok but shouldn’t we use small resolution image for small devices?

How to implement it?

As said earlier we have a module “Responsive image” in drupal as a core module. We can use this module. Responsive image module works with Breakpoints Module. First, we need to enable this module:

Goto: /admin/modules and enable this.

So we will create 3 Image styles for given three presets.

Now we need to create a Responsive image style:
If we look into Media section under configuration page, we have now  “Responsive image styles” menu available there. So let’s create a responsive image style:

• Create a responsive image style by any name.
• Select the breakpoints you want to use, I’m using bartik, (we can also make our own breakpoints).
• Now select the image style from the option you want for each breakpoint.

If your user is on an old browser that does not support <picture> tag, you can set the smallest image style as a fallback image style.

Now click on “Save” button.

Now we are ready to use this created Responsive image Style.

How to use this?

We can use this responsive image style for any content type.

• Go to manage display and select the “Responsive image” for “Format” of the image field.
• Once done then click on the gear icon and select that “responsive image style” which we created recently.
• Click on “Update” button and then “Save” it.

Now go to the page and resize your browser to see the magic.You will see that each breakpoint is using different image style what we have configured.

Wondering how it works?

Responsive image module results in HTML which can hold multiple image source for different breakpoints(devices).

Tag allow the browser to load only that image which is explicitly stated for use for defined device’s size.

[java]
<picture>
<source srcset="large.jpg" media="(min-width: 851px)">
<source srcset="medium.jpg" media="(min-width: 560px) and (max-width: 850px)" alt="My default image">
<source srcset="small.jpg"><img srcset="default_image.jpg" alt="My default image">
</picture>
[/java]

Hope this information will be useful to you.If you have any questions or comments about this blog, please leave them below.