{"id":47847,"date":"2017-05-15T16:20:06","date_gmt":"2017-05-15T10:50:06","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=47847"},"modified":"2017-05-16T11:26:13","modified_gmt":"2017-05-16T05:56:13","slug":"drupal-responsive-image-style","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/drupal-responsive-image-style\/","title":{"rendered":"Drupal Responsive Image Style"},"content":{"rendered":"

\"banner\"<\/span><\/p>\n

What is this?<\/span><\/h3>\n

In Drupal 8<\/a>, image style is used to set the presets for image processing. We can set properties like crop, rotate, and\u00a0scale. 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.<\/span><\/p>\n

Responsive image style is the combination of more than one image style. To fulfill this requirement we have a module “Responsive image”<\/strong> in drupal core.<\/span><\/p>\n

Why We need this?<\/span><\/h3>\n

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.
\n<\/span>
\nSuppose 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?<\/span><\/p>\n

How to implement it?<\/span><\/h3>\n

As said earlier we have a module\u00a0“Responsive image”<\/strong> in drupal as a core module. We can use this module. Responsive image module works with Breakpoints<\/a><\/strong> Module. First, we need to enable this module:<\/span><\/p>\n

Goto: \/admin\/modules <\/strong>and enable this.<\/span><\/p>\n

\"\"<\/span><\/p>\n\n\n\n\n\n\n
Devices<\/strong><\/span><\/td>\nImage size<\/strong><\/span><\/td>\n<\/tr>\n
Desktop<\/span><\/td>\n1600px X 450px<\/span><\/td>\n<\/tr>\n
Tablets<\/span><\/td>\n850px X 300px<\/span><\/td>\n<\/tr>\n
Mobiles<\/span><\/td>\n640px X 250px<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

So we will create 3 Image styles for given three presets.<\/span><\/p>\n

\"image-styles\"<\/span><\/p>\n

Now we need to create a Responsive image style:<\/span>
\nIf we look into Media section under configuration page, we have now \u00a0\u201cResponsive image styles\u201d<\/strong> menu available there. So let\u2019s create a responsive image style:<\/span><\/p>\n