DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Sascha Eggenberger
Sascha Eggenberger

Posted on • Originally published at saschaeggi.Medium

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

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.

Drupal

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

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.

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.

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.

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)

Let's create a newΒ pipeline

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

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

  3. Choose your processor
    We choose WebP Deriver.

  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.

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!

Top comments (3)

Collapse
 
miteshmap profile image
Mitesh Patel • Edited on

For me it generates the webp images but it doesn't replace the jpg / png image rendering with webp. Does it happen automatically. Any idea?

Collapse
 
ls profile image
Lars

Does this work with D8 s3fs module and/or headless drupal using consumer image styles module?

Collapse
 
jameswilson profile image
James Wilson

Thanks for writing this up. This has been my recipe for several years and now I have a place to point folks to who want to know how to do it!

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›