Image optimization in Drupal 8 with built-in capabilities

Good images can be your website’s best friends if you treat them well. But they can be your website’s enemies if you have never heard about image optimization.

Happily, there are many useful optimization tools. The 8th version of Drupal has a number of great ones out-of-box. This is one of many Drupal 8’s benefits that make website owners want to upgrade to Drupal 8.

So let’s talk about the reasons to optimize images and the ways to use the image optimization in Drupal 8 via the core features.

Why image optimization is vital

• Optimized images do not overload your website and significantly increase its performance compared to that with “raw” ones. Optimization saves precious seconds of your user’s browser loading time.
• Conversions are potentially increasing because users do not leave a slow website. That’s why great attention is paid to e-commerce product image optimization. However, the ability for users to reach their goals is vital for every type of site and business.
• Image optimization with mobile devices in mind significantly boosts your audience.
• It is beneficial for SEO because search engines consider website speed as a ranking factor. Properly formatted images also have more chances to show up in image search results.
• Automatic optimization will save a lot of your editorial staff’s work on content moderation.
• Finally, needless to say that your customer satisfaction and brand reputation wins from fast-loading and trimmed visual assets.

Image optimization in Drupal 8 core at a glance

Drupal 8 has the image styling feature out-of-box that allows you to trim original images for various scenarios. All uploaded images will be automatically formatted in the specified ways.

For example, if all users upload profile pictures, there will be no “chaos” in their dimensions. You can “ask” Drupal to show their thumbnails on the list of users, the pictures of specified sizes on the account page, and so on.

To trim the original pictures as part of optimization, Drupal 8 applies effects such as scale and crop, resize, rotate, and more.

It is also possible in Drupal 8 to create responsive web design and show different image styles according to device dimensions. You can have high-resolution Retina images and small ones for mobile devices. All this is created by Drupal 8’s built-in modules Responsive Image and Breakpoint.

You can always entrust image optimization in Drupal 8 to our Drupal developers, so all your visual assets are optimized for all use cases and all devices.

Drupal 8 image optimization at a closer look

1. Creating image styles

Let’s imagine someone uploads a profile picture with large dimensions and plenty of extra space.

In terms of optimization, the scaling and cropping could be perfect here. And we can apply it automatically to all our Drupal users’ pictures.

In Configuration — Media — Image Styles, we see Drupal 8’s default ones (“thumbnail,” “medium”, and “large”) and can add any others. So we:

• create an image style and call it “User picture”
• select the “scale and crop” effect for it
• click “add” and “save”

When we edit this style, we can choose the width and height, as well as the part of the picture to retain during the crop. A good default is the center.

2. Assigning image styles to use cases

So let’s use the newly created “User picture” style as a standard for user accounts. The styles can be assigned to an image field wherever it appears — in content types or their particular view modes (e.g. article teaser), in Views (e.g, a collection of articles), and so on.

In our case, this is the “Picture” field in the user account (Configuration — People — Account settings — Manage display). Next to the field, we click on the cogwheel and select the “User picture” style.

And now our user Spiderman will have his picture scaled and cropped to 400х400, and the same automatically applies to all other user pictures, old or new. A nice optimization!

3. Providing responsive design

Trimming the pictures to 400х400 looks pretty nice, but all devices are different. To have different styles for different device dimensions, developers enable the Responsive Image module and also use the Breakpoint module in Drupal 8 core.

We specify the breakpoints (or “turning points” in device dimensions) at which Drupal 8 will start to show a different image style. We do it in the theme’s breakpoint.yml file. Thanks to this, all devices show the picture well.

When the breakpoints are ready, we create a responsive image style in Configuration — Media — Responsive Image Styles, select the name of the theme in “Breakpoint group,” and attach image styles to breakpoints. The final optimization accord is assigning the responsive image style to the image field.

Let’s optimize your Drupal 8 images

Image optimization in Drupal 8 is organized perfectly. D8 is equipped with user-friendly interfaces, but at the same time the optimization process looks a bit tricky to non-developers, especially in the responsive design part.

So our Drupal development team is ready to do all the necessary optimization on customers’ websites. To do this, we can use Drupal 8's core capabilities or other tools from our large developer’s arsenal.

With us, you can also migrate to Drupal 8, which has image optimization and responsiveness as a priority.

Enjoy the benefits of having your images optimized!