How to serve WebP images with a Drupal 8/Drupal 9 site

Requirements

PHP

php -i | grep 'WebP'
WebP Support => enabled

Drupal

Screenshot of the Modules overview where you can see the installed ImageAPI modules

Drupal Configuration

The Image Optimize configuration page should look similar to this one. Note that you might only see the “Local Binaries” Pipeline first (if you installed it)

Let’s create a new pipeline

Add optimization pipeline
fill in the name of your pipeline
Add new Processor, choose “WebP Deriver”

Sascha Eggenberger. Senior User Experience Designer @unic @Drupal Contributor. Drupal Design System, Claro, Gin. #OpenSource https://sascha.is/