Return
X Linkedin
Drupal

Adaptive image styles in Drupal

Published on 23 August 2021
Image illustrating a photo shoot
Here is the updated quick guide to image handling in Drupal. Our goal: to optimize site display across all devices.

During the design phase, UX and UI designers are in constant contact with developers, who discuss and validate the interfaces. Image processing requires special attention to optimize both the contribution experience and display performance. The idea is to offer the best possible image quality with the minimum file size, in order to serve every type and size of screen with the optimal solution.

Responsive Images

Using responsive images will allow us to achieve these objectives. Images and image styles enable the loading of images specifically sized for the user's screen based on breakpoints.

The
tag

In Drupal, responsive images are rendered using the HTML5
tag.

The browser uses the values to load the most appropriate image. It uses the first element that matches its needs and ignores all following tags.

The element is required as the last child tag inside
. The element provides backward compatibility for browsers that do not support the
element. It also allows an image to be displayed if none of the tags match the browser's needs.

The
element works similarly to the

Prerequisites

Modules to enable:

  • Breakpoints;
  • Responsive Image;
  • Media.

Breakpoints

Breakpoints are used to divide your screen into several breaking widths (can also be heights, but we use widths). The responsive display adjusts to these breakpoints to display content correctly on different devices (desktop, tablet, mobile).

You define the breakpoints to use on your site in a yml file within your theme. The yml file is called "your_theme.breakpoints.yml" and is located at: "/themes/custom/your_theme".

For more information on breakpoints and example configurations – https://www.drupal.org/docs/theming-drupal/working-with-breakpoints-in-drupal.

Once the modules are installed and breakpoints set, we can create responsive image styles here: /admin/config/media/responsive-image-style. Different image styles can be assigned to each breakpoint.

Note on the multipliers setting: this is a measure of the viewport resolution.
Normally, 1x will be used for standard sizes and 2x for retina display (see below).

Methods + pros/cons 

Depending on the needs of a particular site, one or more of these methods are used on this site.

Using the Drupal back office to apply responsive image styles to Media fields

Pros:
This is the simplest and fastest of the three methods. It does not require coding.

Cons:
For complex sites or installation profiles, this method has drawbacks. Each change will need to be manually replicated in configurations or for each profile. In this case, it’s better to apply image styles via code.

Method:
Step 1: create the display here: /admin/structure/media/manage/image/display.
Add a media display mode, and for the image field choose the format “Responsive image”. Go to the settings and select the responsive image style you want to apply to this view.

Example:

Step 2: In your paragraph / content type / block containing your image field, go to display management. For the relevant image, choose the Rendered Entity format and select one of the display modes you created in step 1.

Example:

The image will be rendered as a responsive image and will use the responsive image style defined in the media display mode assigned to this field.

Using Preprocess for rendering responsive image styles

Pros:
This method is easy to manage and particularly useful for profiles with multiple sites.

Cons:
This method takes longer to set up. The code may require maintenance for major Drupal version changes or changes made to the Media module (such as changing Media classes, etc.).

Method:
If you need to apply responsive image styles to multiple content types / paragraphs, it’s best to define a function to be called in each node/paragraph preprocess to apply the image styles.

Example:

function _eliorblog_set_responsive_image(&$variables, $entity, $field_image_name, $image_style_name){
    $field_image = $entity->get($field_image_name)->first();
    if ($field_image instanceof \Drupal\Core\Field\Plugin\Field\FieldType\EntityReferenceItem) {
          $media = $field_image->entity;
          $responsive_image = [
            '#theme' => 'responsive_image_formatter',
            '#item' => $media->get('field_image')->first(),
            '#responsive_image_style_id' => $image_style_name
          ];
          $renderer = \Drupal::service('renderer');
          $renderer->addCacheableDependency($responsive_image, $media);

          $variables['responsive_image'] = $responsive_image;
          return true;
    }
    return false;
 }

You now call this function within your preprocess function.

Example:

function elior_blog_preprocess_paragraph__infographie(&$variables){
        $paragraph = $variables['elements']['#paragraph'];
        //responsive_image
           				 		_eliorblog_set_responsive_image($variables$paragraph,field_image_infographie','image_paragraph_infographie');
   }

Finally, in your template, instead of
{{ content.field_image }}
you will use {{ responsive_image }}, which is the variable set in the configuration.

Applying responsive image styles in Templates

Pros:
Easy to manage and especially useful for profiles with multiple websites. This method is faster to apply, directly in the template without going through preprocess.

Cons:
You need the image field's URI. Finding this can take some time in Twig. 

Method:
You only need the image field’s URI, then you use the code that creates a responsive image.

{% set rendered_responsive_image = {
        '#theme': 'responsive_image',
        '#responsive_image_style_id': 'actualites_a_la_une',
        '#uri': image_field_uri|trim,
       }  
   %}

You can now use this responsive image directly as {{ rendered_responsive_image }}.

What about the WebP format?

WebP is an image format created by Google. By using the WebP image format, you can reduce your site images’ file size by 20% or more, without losing resolution. Display performance is improved.

A fast site also receives SEO points, improving site ranking and helping its content to be more easily discovered by users. You need to have responsive image styles on your website to use WebP.

Module to install: https://www.drupal.org/project/webp

Using webp on the server will require installing a gd extension on the server (ext-gd). For more details, you can check out this article https://dev.acquia.com/blog/webp-and-drupal.

NOTE / ISSUES: There is a conflict between this module and the Image Widget Crop module.
Using the Image Widget Crop module causes rendering issues in the admin area. The display of an existing image will not update as the WebP image is generated only once.
The changes are applied to the site when you save the image style again since the images are regenerated. This issue is documented in WebP module issues: https://www.drupal.org/project/webp/issues/3082266.

Retina?

Apple created the term “Retina display” to describe its screens that have very high resolutions due to their pixel density.

How to add Retina support to your responsive image styles?

In "your_theme.breakpoints.yml", you have a setting called multipliers in the viewport of a breakpoint. To support retina screens, add 1x and 2x to your breakpoint. In your responsive image style, if you have an image style (300px x 300px) for your 1x multiplier, you should have an image style (600px x 600px) for your 2x image style for this breakpoint (just double the dimensions)—the 2x having a higher pixel count suitable for Retina screens.

Conclusion

What we deliver to different screen resolutions must be carefully configured. We need to be precise—serving each type and size of screen with the optimized resource. Drupal provides this with responsive image styles.

References:

Read more articles on Drupal