This module provides a WebP processor for the ImageAPI Optimize module. When added to a pipeline, a .webp derivative is created from the source image, providing 2 versions of a styled image.

Example Image Render Cycle:

  1. 'Banner' image style is applied to image1.jpg
  2. ImageAPI Optimize takes the stylized image and runs it through the defined pipeline
  3. ImageAPI Optimize WebP creates a .webp version of the stylized image.
  4. Additional optimization occurs on the source stylized image.
  5. Both the source stylized image(image1.jpg) and webp derivative(image1.webp) are copied to the styles folder.

Currently, a submodule is being created to include the .webp derivative with Drupal core's Responsive Image module. Progress can be followed along here: #3061598: Create submodule for responsive_image support.. Without the submodule, this module will provided limited functionality without customization in your theme.

Recommendations:

  • You should place the WebP processor before any other compression processors to avoid duplicate compression of an image. This can have an inverse affect and provide a lower quality image at a larger file size.
  • You are encouraged to set your sitewide GD toolkit quality to 100, and allow ImageAPI Optimize to handle compression/optimization. This is again to avoid duplicate compression of images. We've created another module: ImageAPI Optimize GD to allow for standard image quality reductions in your pipelines, however checkout ImageAPI Optimize for a full list of processors.

Note:

There is some overlap with this module and the WebP module. The difference being this module is intended to only support projects using ImageAPI Optimize. Because of the overlap between these modules(and the need to override the same route), both modules cannot work in tandem for the time being.

Supporting organizations: 

Project information

Releases