How to setup a working Responsive Image in Drupal 8

Responsive Image module is a core module in Drupal 8 and this guide will show setting up this module with working example.

Steps:

1. Enable the Responsive Image module at http://www.yoursite.com/admin/modules.

2. We can use existing Breakpoint group but in this guide we will create our own Breakpoint group. It can be created as module or as theme and we will create this as module. Inside /modules folder of your Drupal 8 site, create a folder labelled as "site_optimization".

3. Inside the /modules/site_optimization folder create the info file with filename of "site_optimization.info.yml". Copy and paste the following codes inside this file:

         
   name: Site optimization
   description: Site optimization.
   type: module
   package: Custom
   version: 1.0
   core: 8.x
         
       

4. Still inside the /modules/site_optimization folder create the info file with filename of "site_optimization.breakpoints.yml". Copy and paste the following codes inside this file:

         
   site_optimization.big_screen:
     label: big screen
     mediaQuery: '(min-width: 1025px)'
     weight: 4
     multipliers:
       - 1x
   site_optimization.tablet_landscape:
     label: tablet landscape
     mediaQuery: '(min-width: 769px)'
     weight: 3
     multipliers:
       - 1x
   site_optimization.tablet:
     label: tablet portrait
     mediaQuery: '(min-width: 481px)'
     weight: 2
     multipliers:
       - 1x
   site_optimization.smalltouch_landscape:
     label: smalltouch landscape
     mediaQuery: '(min-width: 321px)'
     weight: 1
     multipliers:
       - 1x
   site_optimization.smalltouch:
     label: smalltouch portrait
     mediaQuery: '(min-width: 1px)'
     weight: 0
     multipliers:
       - 1x
         
       

5. Clear the Drupal cache and enable this site_optimization module we have created.

6. We will create four image styles to support major device screen sizes. Go to http://www.yoursite.com/admin/config/media/image-styles and click "Add image style" button. Populate the "Image style name" field with "Image quarter (max width 320px)" and "Machine-readable name" field with "image_quarter".

   

   Add "Scale" effect.

   

   ... and populate the "Width" field with "320" and leave the "Height" field empty. This settings will limit the image to maximum width of 320 pixels and height size will be auto.

   

7. Lets create the second image style. Go to http://www.yoursite.com/admin/config/media/image-styles and click "Add image style" button. Populate the "Image style name" field with "Image half (max width 480px)" and "Machine-readable name" field with "image_half".

   

   Add "Scale" effect.

   

   ... and populate the "Width" field with "480" and leave the "Height" field empty. This settings will limit the image to maximum width of 480 pixels and height size will be auto.

   

8. Lets create the third image style. Go to http://www.yoursite.com/admin/config/media/image-styles and click "Add image style" button. Populate the "Image style name" field with "Image part full (max width 768px)" and "Machine-readable name" field with "image_part_full".

   

   Add "Scale" effect.

   

   ... and populate the "Width" field with "768" and leave the "Height" field empty. This settings will limit the image to maximum width of 768 pixels and height size will be auto.

   

9. Lets create the fourth image style. Go to http://www.yoursite.com/admin/config/media/image-styles and click "Add image style" button. Populate the "Image style name" field with "Image full (max width 1100px)" and "Machine-readable name" field with "image_full".

   

   Add "Scale" effect.

   

   ... and populate the "Width" field with "1100" and leave the "Height" field empty. This settings will limit the image to maximum width of 1100 pixels and height size will be auto.

   

10. Now we will create a Responsive image styles. Go to http://www.yoursite.com/admin/config/media/responsive-image-style and click "Add responsive image styles" button.

    

11. Populate the "Label" with "Global image style". Select "Site optimization" from "Breakpoint group" dropdown menu. Collapse the "1x big screen [(min-width: 1025px)]", select the "Select a single image style." option from "Type" and select "Image full (max width 1100px)" from "Image style" dropdown menu. Collapse the "1x tablet landscape [(min-width: 769px)]", select the "Select a single image style." option from "Type" and select "Image full (max width 1100px)" from "Image style" dropdown menu. Collapse the "1x tablet portrait [(min-width: 481px)]", select the "Select a single image style." option from "Type" and select "Image part full (max width 768px)" from "Image style" dropdown menu. Collapse the "1x smalltouch landscape [(min-width: 321px)]", select the "Select a single image style." option from "Type" and select "Image half (max width 480px)" from "Image style" dropdown menu. Collapse the "1x smalltouch portrait [(min-width: 1px)]", select the "Select a single image style." option from "Type" and select "Image quarter (max width 320px)" from "Image style" dropdown menu. In "Fallback image style" dropdown menu select "Image quarter (max width 320px)" option and click "Save" button.

    

12. To test, create a content and upload an image inside the Body field. Click "Source" button on WYSIWYG to edit the HTML code of the uploaded image and insert data-responsive-image-style="global_image_style" inside the img tag. Click "Save and publish" button.

    

13. The output HTML of the test image should have picture tag.