Your web server needs to support WebP through PHP.
PHP 5 >= 5.4.0
How to check if everything is working as expected:
php -i | grep 'WebP'
If everything is working fine you should see
WebP Support => enabled
We should be ready to go on, yay 🎉
If you get another output, you might need to enable/install libgd and enable it in your PHP.ini.
This tutorial only works with Drupal 8/9. As a start you'll need to enable/install some modules:
The module has built in support for core Image styles and a service allowing use in third party modules.
⚠️ Make sure to enable the "ImageAPI Optimize WebP Responsive" submodule if you're using the Responsive Image module in Drupal Core.
This module is optional but it provides support for popular binary image processors like JpegOptim, PngQuant, AdvPNG etc.
Head over to
/admin/config/media/imageapi-optimize-pipelines for the Image API configuration.
Add a new optimization pipeline
By clicking on
+ Add optimization pipeline
Name your pipeline
I will call the pipeline
optimize imagesbut you can name it whatever you would like.
Choose your processor
Set image quality
You can set the image quality here, 80–90% should serve with good overall quality. 100% will be lossless.
Click on "Save configuration" and you're done.
⚠️ Don't forget to clear the Drupal cache after this.
You should place the WebP processor before any other compression processors to avoid multiple compression of an image. This can have an inverse affect and provide a lower quality image at a larger file size.
Enjoy WebP images with your Drupal site!