How to enable support for WebP images on Acquia Cloud

WebP is an image format that provides superior lossless and lossy compression, animation and alpha transparency developed by Google in 2010. By using WebP developers can gain better-compressed images than JPG or PNG, in turn, providing better overall performance on the web.

Summary of WebP support in Acquia Cloud

• Your website can serve existing WebP files stored in your site's files area via Apache, by enabling the MIME Type adding an AddType directive to your docroot/.htaccess file. See below for instructions.
• Cloud Classic:
  • Drupal can create image styles or derivatives (convert/scale/or otherwise manipulate them) of source WebP files only by using the GD support embedded in PHP. This means you can NOT use the platform's ImageMagick tool for this manipulation.
• Cloud Next:
  • Like the above Drupal can manipulate WebP files with the GD support embedded in PHP.
  • You can also use the platform's ImageMagick tool for this manipulation. The latter is only possible if the OS in use is Ubuntu 20.04 and above. See https://docs.acquia.com/acquia-cloud-platform/manage-apps/configuring-os-versions for how to see or pick the current OS version used in your application.

Enabling the WebP MIME Type in Apache

Serving static WebP files requires a minor addition to your site's .htaccess file to tell Apache and Drupal what to do with files ending with the .webp file extension.

Drupal's .htaccess file is located in your codebase's docroot. Within your .htaccess file, you will need to add the following line in order to properly set the WebP MIME type:

# Add webp MIME type so that Apache knows how to handle WebP images
AddType image/webp .webp

Once your updated .htaccess file is deployed, you should then be able to view WebP files being served from Drupal, and be well on your way to improving site performance and impressing your visitors with a snappier website!

Setting up Drupal for WebP image manipulation

The following example uses the stock Drupal image styles and the GD Image Toolkit settings:

• Imagine you have an Image field in Drupal which accepts WebP uploads, and you've configured this field to create thumbnail images.
• If you are using the Drupal core image styles, you would need to configure Drupal at /admin/config/media/image-toolkit to use the GD2 Image Toolkit since GD on Acquia Cloud can manipulate WebP images. 

If you're not using the stock Drupal core image styles, but other options like https://www.drupal.org/project/imageapi_optimize_webp then you'd need to configure those modules to use the GD Image Toolkit if possible. (For further instructions, consult their documentation and/or Issue Queues in Drupal.org).

Note that some Drupal image-manipulation modules have been coded to only work with ImageMagick or other commands/tools. Those modules will not be compatible with WebP images on Acquia Cloud.