WebP logo

Creates a WebP copy of image style derivatives to decrease loading times.


Whenever an image style derivative is created this module will also create a WebP copy of the derivative to be served to supporting browsers.


  1. Make sure your hosting supports webp. See [Webp and Drupal](https://dev.acquia.com/blog/webp-and-drupal) for more information.
  2. Install the module.
  3. Install responsive_image module (Drupal 8 core)
  4. Select Responsive image in admin/config/media/responsive-image-style for the style you want to use
  5. Go to your content type, display, and choose responsive image (ie: admin/structure/types/manage/article/display)
  6. Optional clear caches, your html now should display something like this:


Support for ImageAPI Optimize

When ImageAPI Optimize is installed the module will not automatically generate WebP images. Instead, a WebP image processor will be available to be added in optimization pipelines.

Supporting organizations: 

Project information