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:
You should see something like this:
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:
After clicking on the Add button select WEBP from the Extension list:
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:
and configure the image style for the Image field:
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.
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 senior web developer who loves working with Drupal, React, and React Native. He is the founder of this website and he enjoys sharing his knowledge. Need help with anything? Get in touch.