Drupal 9.2 will support WebP images out of the box

WebP images have higher quality and smaller file sizes at the same time. This is what makes them great for using on the web where every byte counts, and Drupal 9.2 will support using WebP images out of the box. Let's see how we can use this image format.

The scheduled release date of Drupal 9.2.0 is June 16, 2021, and among many improvements and features is WebP images support. The original issue for adding WebP support was created a long time ago: Let GDToolkit support WEBP image format

To be able to use this new feature make sure that PHP's GD extension is built with WebP support. To verify that this image format is supported by your website visit the following page:

admin/reports/status/php#module_gd

You should see something like this:

Image

All latest versions of popular web browsers support this image format, but please check out browser support because if you have to support older browsers you might have issues if you don't provide a fallback solution.

To learn more about providing fallback support for older browsers check out Mike Herchel's article Speed up Drupal’s Front-end with WebP Images

To convert JPG, PNG, or GIF images to WebP you can use image styles and Convert effect. Create a new image style and add a Convert effect:

Image

After clicking on the Add button select WEBP from the Extension list:

Image

You can now add this image style anywhere you want, just like any other image style. For example, go to the Articles manage display page: 

admin/structure/types/manage/article/display

and configure the image style for the Image field:

Image

And that's it. Go ahead and create an article with some random image to test. If you inspect the HTML code you'll see that the image is converted to WebP image format.

Image

In this test case, the original JPG image was 202KB, and after conversion is only 42KB in size. That's not a small difference. Maybe finally you won't see those pesky Google PageSpeed insights warnings about your images being too big.

As you can see configuring your website to convert images is super easy. Using WebP images will make your website faster and on slow connections that could make a big difference for your visitors.

About the Author

Goran Nikolovski is a web and AI developer with over 10 years of expertise in PHP, Drupal, Python, JavaScript, React, and React Native. He founded this website and enjoys sharing his knowledge.