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

Requirements

PHP

Your web server needs to support WebP through PHP.
PHP 5 >= 5.4.0
GD Library

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

Drupal

This tutorial only works with Drupal 8/9. As a start you’ll need to enable/install some modules:

  1. ImageAPI Optimize WebP
    https://www.drupal.org/project/imageapi_optimize_webp
    ⚠️ Make sure to enable the “ImageAPI Optimize WebP Responsive” submodule if you’re using the Responsive Image module in Drupal Core.
  2. ImageAPI Optimize Binaries
    https://www.drupal.org/project/imageapi_optimize_binaries
    This module is optional but it provides support for popular binary image processors like JpegOptim, PngQuant, AdvPNG etc.
Image for post
Image for post
Screenshot of the Modules overview where you can see the installed ImageAPI modules

Drupal Configuration

Head over to /admin/config/media/imageapi-optimize-pipelines for the Image API configuration.

Image for post
Image for post
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

1. Add a new optimization pipeline
By clicking on “+ Add optimization pipeline”

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

Written by

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store