You cannot have an interactive and engaging website without including high quality digital images. Great quality images usually add a lot of weight, which can lead to a slow performing website. But with tools like ImageMagick and image formats like WebP that can be leveraged in Drupal, you can provide a faster and better performing web. In this article you will learn about using the ImageMagick Drupal module, WebP image format and how you can implement them in your Drupal 8/9 website. 

What is the ImageMagick Drupal Module

ImageMagick is an image toolkit for image API in Drupal 7, 8 and 9. It uses Imagick PHP Extension to create and edit images using the Imagemagick API. With ImageMagick, you can compress the image sizes with better quality. Using ImageMagick you can customize the quality of images from 0 to 100. A higher value means better image quality but bigger files. The Drupal module supports both ImageMagick and GraphicsMagick image processing systems.

Why use ImageMagick

• Page Optimization
• Faster website speed
• Helps increase the number of pages Google can crawl and index
• Reduce server load
• The faster your site loads, the lower the bounce rate

ImageMagick Toolkit

ImageMagick supports multiple image formats which can be enabled and disabled as required

Installing the ImageMagick Module

Before installing the ImageMagick Drupal module, make sure you have installed ImageMagick on your server and the convert binary needs to be accessible and executable with php.

Configuration

Navigate to Administration > Configuration > Media > Image Toolkit and change the Image toolkit to ImageMagick.

If you are not able to find convert binary command in the default shell path then you need to enter the full path of ImageMagick’s convert executable.

For example:

How to install ImageMagick on your server

• Install ImageMagick using homebrew.
• Or based on your operating system you can download it from here.
• On successful installation, your php output should look like this (see below image):

What is WebP

WebP is an image format employing both lossy and lossless compression. In a lossless compression, the file size is reduced but not the quality of the image. A lossless compressed image can also be decompressed to its original size. But a lossy compression removes data for good, which means you cannot decompress it back.

WebP is designed to create files that are smaller for the same quality, or of higher quality for the same size, than JPEG, PNG, and GIF formats. It also supports animation and alpha transparency.

Implementing WebP with ImageMagick

Step 1: Enable WebP formats from Image Toolkit format options, which was explained previously.

Step 2: Now, create a new image style or update any old one with a convert effect. For example:
 
 

Step 3: After adding the convert effect, use the same image style to display images and you will see the result.

Let’s take an example of an image with size 1.2 MB (see below image):

Now check out the results after converting the image:

You can see that the file size is now reduced to 8.6 KB from 1.2 MB, which is a very good reduction.