How to convert images to WebP format in Drupal?

Facebook
X (Twitter)
LinkedIn
LinkedIn
Share
WhatsApp
Copy link

WebP is an image format that is used to display images on websites. We can use this format as a replacement for JPEG, PNG or GIF images. The WebP is developed by Google with the intention of low weight images to be displayed on websites. WebP provides the lossy and lossless compression for the images on the web. I know you are in a dilemma to search what is lossy and lossless. No problem, lossy reduces file size by removing some of the original data that is not much noticeable. Lossless reduces file size by removing some unnecessary metadata.

Why WebP?

WebP is designed exclusively for websites. It will improve the performance of the website without reducing the quality of images.

Drupal has a very good image style functionality that we can use to upload one image and display it on a website with different styles. The same image style functionality can be used to convert images to WebP. That means the content administrators can add JPEG, PNG or GIF images. Drupal will convert it to WebP.

How to create WebP in Drupal?

  1. Go to Admin Panel > Configuration > Media > Image Style.
  2. Create a new image style called WebP.
  3. Edit WebP image style.
  4. Select effect ‘Convert’ from the drop down.
  5. On next window you will get a drop down ‘Convert to’ , select WebP from there.
  6. Add effect and save image style.
  7. You can select this image style wherever you want WebP images.

The WebP should work only if your web server supports the WebP format. So please make sure that you have WebP Support enabled on your server.

WebP with docker and Nginx


You can install libwebp-dev on your docker and add below command to install the extension with GD library.

docker-php-ext-configure gd --with-webp=/usr/include/ 

Add mime type image/webp  webp; to nginx config file

Add webp on location block with other types

location ~* \.(ogg|ogv|svg|svgz|swf|eot|otf|woff|mov|mp3|mp4|webm|flv|ttf|rss|atom|jpg|jpeg|gif|png|webp|ico|bmp|mid|midi|wav|rtf|css|js|jar)$ {
        try_files $uri @rewrite;
        expires max;
        log_not_found off;
    }