In today's world, images are an essential part of the modern web. It helps in engaging users as it is a universal language that speaks louder than words. Images are also more memorable than text content and are processed faster by the brain. A research shows that people tend to remember 80% of what they see (visuals) and only 20% of what they read (textual content).

But did you know that on an average, images take up almost 64% of a website’s total weight? If you don’t pay attention to image optimization, you might be losing out on potential customers because your website, although immersive, may be taking too long to load. Hence using optimized images is extremely important for a website. However, image optimization could seem like a nightmare to a content editor who needs to optimize (using external tools) and upload hundreds of images. Drupal’s ImageAPI Optimize module to the rescue! We will be explaining further on this topic and how you can use ImageAPI Optimize in Drupal to automate image optimization. The ImageAPI Optimize module is also compatible with Drupal 9!

What is Image Optimization?

Image optimization is a process of delivering high quality images in the right format, dimension, size and resolution without compromising on the quality of the image. 

Why use ImageAPI Optimize?

• Images can contain far more data than required to display. ImageAPI Optimize will provide optimization for those images.
• The module provides integrations to the optimization tools and web services.
• It defines the pipelines made up of configurable processors.
• There are multiple processors available as a contributed module like: imageapi_optimize_binaries, imageapi_optimize_resmushit, imageapi_optimize_tinypng and kraken etc.
• Each pipeline can be applied to an image to remove the extra metadata or to recompress.

Installing the ImageAPI Optimize module

Step 1 : Download the ImageAPI Optimize and ImageAPI Optimize reSmush.it module using composer.

$ composer require drupal/imageapi_optimize

$ composer require drupal/imageapi_optimize_resmushit

Note: ImageAPI Optimize reSmush.it is used for integrating the web service which will provide the free API for optimizing images with great quality. Click here to find more on the API. 

Step 2 : Enable the downloaded module using drush or from the drupal UI.

$ drush en -y imageapi_optimize

$ drush en -y imageapi_optimize_resmushit

Configuration

Creating a pipeline for ImageAPI Optimize:

Let’s first create a pipeline that can be used sitewide to optimize the images. To do that, go to Administration >> Configuration >> Media >> Image Optimize Pipeline

Configuring the installed processor for the pipeline:

Now let’s configure the installed processor for that pipeline we just created. Go to Administration >> Configuration >> Media >> Image Optimize Pipeline >> Your Pipeline. Now, edit the pipeline and select the processor installed. In this case we are using a Resmush.it processor as shown in the image.

Allow image styles to use the created pipelines:

By default all the core image styles will be optimized from imageAPI optimize. For new image styles, go to Administration >> Configuration >> Media >> Image Styles >> Your Image styles. Edit the image styles and select the created pipeline.

Results

ImageAPI optimize module in Drupal provides great compression without compromising on the quality. It provides up to 70% compression for images. Check out an example of the results of an image before and after optimization.

Original

File size : 1.4MB

Optimized

File size : 116 KB