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

Requirements

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

Check your PHP setup
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:

  1. ImageAPI Optimize
    https://www.drupal.org/project/imageapi_optimize
    The module has built in support for core Image styles and a service allowing use in third party modules.
  2. 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.
  3. 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.
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.

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)

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

Add optimization pipeline

2. Name your pipeline
I will call the pipeline “optimize images” but you can name it whatever you would like.

fill in the name of your pipeline

3. Choose your processor
We choose “WebP Deriver”.

Add new Processor, choose “WebP Deriver”

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.

4. Set image quality
You can set the image quality here, 80–90% should serve with good overall quality. 100% will be lossless.

5. Save
Click on “Save configuration” and you’re done.
⚠️ Don’t forget to clear the Drupal cache after this.

Enjoy WebP images with your Drupal site!

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

A Brief Guide to Octolooks Scrapes

CS 373: Week of 27 Sep — 3 Oct

Introdução ao MySQL Workbench

MiXiT 2019 Conference in Lyon : Passion & Pancakes

Software Engineering in a nutshell

Bringing Dev and Ops together: “Now I’m wasting all my time on fixing incidents!”

Book summary: Mining of Massive Datasets — chapter 6: Frequent Itemsets

{“type”:”text”,”file”:””,”date”:”2021–06–01…

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
Sascha Eggenberger

Sascha Eggenberger

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

More from Medium

What to log…

Interaction with low-level FireDac objects in TDataSet

CS371p Spring 2022: Week 5

Introduction To Swift Programming language.