WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs.
After conducting some research, I came across an informative article that explains how to convert existing JPEG, PNG, and GIF images into WebP format by utilizing Drupal’s Image styles:
Speed Up Your Drupal 9 Website with WebP Images
https://imagexmedia.com/blog/speed-your-drupal-9-website-webp-images
I followed the article and tested the results on my personal Drupal site. The steps are quite simple to follow.
You just need to create a new Drupal image style with an effect that automatically converts files to WebP. The workflow is standard for Drupal image style creation.
Go to Configuration > Media > Image styles, click “Add image style,” give it a name, and click “Create new style.”
Select the “Convert” effect from the dropdown menu:
Click the “Add” button next to the selected “Convert” effect. From the extension options, select “WebP.” Finally, click “Add effect.”
Attach the newly created image style to a content type.
I tested the new Drupal style on my article content type:
Go to Structure > Content types > Article > Manage display and click the cogwheel next to the image field. Under Format, select the WebP image style from the dropdown. Save the changes.
Don’t forget to clear your Drupal cache.
I created a new article content type and uploaded a jpeg image to test the new Drupal Image style. The original file size of this jpeg image is 207 KB, and as you can see from the screenshot below, the new Drupal Image style converted this image to WebP and now it’s only 133 KB:
This solution works on all my articles and renders all the existing JPEG, PNG, and GIF images as WebP.