Image optimization in action: guide to Drupal image styles & responsive image styles

14 Oct 2020

Undoubtedly, image optimization is one of the cornerstones of fast Drupal website performance and good user experience. Becoming a more and more user-friendly CMS, Drupal offers easier and easier ways to optimize images. Today, our Drupal development team will take a look at how image styles and responsive image styles in Drupal help you bring perfect order to your site’s visual assets. Let’s begin!

Why is image optimization so important?

  • Images are larger in size than written content or most of the other website files. They take more time to load and can bring your website’s performance down. Optimizing your visual assets helps you significantly reduce your page rendering time and also save gigabytes of space on your server. Good speed, in its turn, always brings more user engagement, increased conversions, higher customer loyalty, better SEO, and more.
  • Optimized images provide smooth viewing experiences for your website’s audience, no matter what type of device they are using. Images look trimmed and are nice to view on any screen. Of course, this makes your users more satisfied and engaged. To learn more about this, pay special attention to the “Responsive image styles” part of our article.
  • Automated optimization techniques save plenty of time and hassle to your website’s content editors and/or users in the process of adding new images. Anyone can upload files of any size and see them automatically converted to the right one. Drupal image styles perfectly do this job — read next to find more details.

Introduction to Drupal image styles and responsive image styles

  • What are Drupal image styles?
    Image styles are the versions of the original file with particular effects applied (usually, we talk about the scaling and cropping effect). The original file remains unchanged on your website’s server, and the styled copy is created and displayed on the front-end according to your settings.
    You can create styles for particular use cases. For example, a thumbnail is a great fit for a user's picture in the comment section, while a full user profile page can have a medium-sized or large picture.
    Image styles are easy to create through the Drupal UI. In the next chapters, we will show this with details and examples.
  • What are responsive Drupal image styles?
    Responsive image styles in Drupal are collections of image styles mapped to particular media queries. This allows you to automatically display specific image versions based on each user’s device. A mobile, a tablet, and a desktop will all show the appropriate Drupal image sizes that are the best fit for their screens.
    Drupal 8 responsive image styles are one of the breakthrough concepts that characterize the 8th version of Drupal as a mobile-first CMS. Drupal 8 has amazing core modules for this — Responsive Image and Breakpoint. In addition, Drupal default themes are totally responsive out-of-the-box and include all the configuration.
    Creating responsive image styles is possible through the UI but also requires providing the breakpoints for media queries in a YAML file. Read on and you will learn more.

Workshop 1: How to work with image styles in Drupal

Creating image styles

Image styles in Drupal 8 and 9 can be accessed at the Configuration — Media — Image styles page of your Drupal UI.

Drupal comes packed with 3 default ones are:

  1. Large (480×480)
  2. Medium (220×220)
  3. Thumbnail (100×100)

By clicking “Add image style,” you will be taken to a page where you need to give your style a name and then click “Create new style.”

 

 

First, you will need to select one or multiple effects to be used in your style. If you choose multiple ones, they will be applied according to their row weight (the most important one having a 0 weight).

Here are the effects that are available by default:

  • Convert
  • Crop
  • Desaturate
  • Resize
  • Rotate
  • Scale
  • Scale and crop

More effects can be added through extra modules. For example, if you add the Focal Point contributed module, you will have the Focal Point Crop and Focal Point Scale and Crop effects on the list. This module allows you to mark an important point in an image that can never be cut off even if it is situated in a corner.

As long as you have selected the effect, click “Add” and you will arrive at the page with the effect settings. Specify the details and click “Add effect.” Finally, don’t forget to click “Save” on the general Image style page.

There are two ways to apply an image style that you have created: in a content type’s view mode or in Drupal Views.

Option A) Using image styles in a content type’s view mode

Let’s say you want all articles to have a header image with this style. Then go to Structure — Content types — Article — Manage display. By default, you are configuring article default view mode, but you could change it to Teaser or other. Next to the image field, find the cogwheel where you can select the styles from all available ones.

Success! Regardless of the uploaded file dimensions, all article header images in the default article view mode will be of the the same style.

 

 

Option B) Using image styles in Views

If you want all article images on the article listing page to have the same style, you can create a view with articles and apply a special style in it.

In “Structure — Views — Add new view”, create a view showing Content of the Article type and set its page display settings to a grid of fields.

Under “Fields,” find and add the image field of the Article content type.

When configuring the field, select the appropriate style and apply it.

All articles on our article page will now have exactly this header image size.

Workshop 2: How to work with responsive image styles in Drupal

Getting the modules ready

First of all, you will need to enable the Responsive image core module. The Breakpoint module should be enabled by default.

Providing the breakpoints

How should Drupal know when to show a different style? This will depend on the current user’s device screen characteristics (minimum and maximum width). For example, a smaller image will be displayed on screens up to 500 px in width, but when the 500 px point is reached, the medium-sized image will start showing. These “points” are called breakpoints.

You should define these breakpoints in a special file — your theme’s or module’s [theme-name].breakpoints.yml file. The file should be put in the root folder of your theme. If you are working Drupal 8 and Drupal 9 default themes, this file already exists.

Specify the breakpoints at which a different style needs to be loaded. Usually, there are options for small, medium, and large screens. See how this is done in Drupal’s core Bartik theme.

 

 

Creating image styles

For each breakpoint, provide an image style with the appropriate dimensions (you can check out the instructions in the previous chapter).

Matching the styles to the breakpoints

Next, on your Drupal admin dashboard, go to Configuration — Media — Responsive image styles and click “Add responsive image style.”

 

 

Give it a name and select the name of the theme in the Breakpoint group.

You will see a list of the breakpoints provided by this theme. Open them one by one and assign the styles to them.

Finally, go to Structure — Content types, find the content type where this style should be used, open the Manage display tab, and set the image field to “Responsive image.”

Exporting image styles into a theme

Any image styles created through the UI can be exported into a theme. In Drupal 8, image styles are configuration entities, which means they can be exported, just like all other website elements, using Drupal’s configuration management system. They are created in the UI, exported as YAML, and included in the theme’s active configuration.

Some PHP functions for image styles

Back in Drupal 7, there were commonly used functions for generating images with Drupal 7 image styles, for example:

  • The theme_image_style function to return the HTML for an image with a particular style.
  • The image_style_url function to return the URL of an image derivative given a style and image path.

In Drupal 8, to render images with a specific style, developers no longer need to use functions directly, but create render arrays instead. When they want to render the URLs of images with specific Drupal 8 image styles, they load the style configuration entities and ask them for the image URLs.

To sum up

The system of images styles and responsive image styles in Drupal 8 is indeed very powerful. Use them properly and see how your Drupal performance grows together with the UX improvements. Your customers and content editors will also appreciate this!

If you need any help with your website optimization, reach out for Drupal services by Golems!