WebP to improve Drupal performance

In a content management system such as Drupal it is very common, if not “almost mandatory” to work with images on a recurring basis. My experience in previous projects comes today to explain why it is so important to carefully analyze the structure and logic that determines how the images will be uploaded in the CMS.

In this article we are going to review the importance of image formats or extensions. Specifically, we are going to talk about one of the most used and efficient...

WebP

WebP is a modern image format developed by Google that offers far superior compression and quality compared to other traditional formats such as JPEG and PNG. It supports lossy and lossless compression, transparency and animation, making it a versatile and highly recommended option for working with images.

In short, WebP helps improve website performance by reducing file size, resulting in faster load times and a better user experience.

WebP support in browsers

As of 2020, all major browsers support WebP. If it reassures you, you can take a look here to see the compatibility with all browsers.

Configuring Drupal to enable WebP

Since Drupal 9.2.0, full WebP support was introduced in Drupal core, making it much easier and more accessible to use this format in web portals with this version onwards. Prior to 9.2.0, it is necessary to use contributed modules or custom implementations that allow integration with WebP.

We will focus on Drupal 10 onwards, since the solution is already included in the core and is much simpler. Just follow the steps below:

1. Go to Settings > Multimedia > Image Styles.
2. Locate the image style you use for your images; if more than one, repeat step 3 for each of them.
3. Add the “Convert” effect, and select “WEBP”.
4. You're done!

Tests

Now all images that use the image style or image styles that you have modified to convert to WEBP should be in that format. If not, reset the caches.

Open the element inspector of your favorite browser and check the format of the images. They should now be WebP.

Benefits

The benefits and optimization improvements are obvious. Image size should be reduced by up to 50% if you were using traditional formats. Maybe in one or two images you won't notice or perceive a difference, but in websites with multiple images it can be a significant improvement!

However, if you don't want to opt for WebP because you don't need to or simply because you don't use images much, you can still use traditional formats and use other image compression and optimization techniques.