You can configure your “lazy” view to load:   

  • Converting images to the WebP format 

  

  • lossless compression (full image quality with no data loss)
  • lossy compression (file size reduction with some data removed and minimal quality loss)

  

Size comparison for an image converted from JPEG to WebP via Drupal core’s Image Styles
Size comparison for an image converted from JPEG to WebP via Drupal core’s Image Styles

 

  • WebP support in Drupal core’s Image Styles

  

Setting up image conversion to the WebP format in Drupal core’s Image Styles
Setting up image conversion to the WebP format in Drupal core’s Image Styles

  

Inspecting a WebP image on a Drupal website via Chrome Developer Tools to check its size

 

  • The WebP module

    

  • The ImageAPI Optimize WebP module

  

  • you want more control over compression quality
  • you’re already using ImageAPI Optimize and want to include WebP as part of a consistent optimization workflow
  • you need fallbacks or conditional logic (like skipping conversion for already-optimized images)
  • you’re on a setup without WebP support in core libraries

  

  • The ImageAPI Optimize module

   

  • Image Optimize Binaries. It uses command-line tools installed directly on your server — like jpegoptim, optipng, and more — to shrink image file sizes without losing quality. Once set up, everything runs automatically when images are uploaded or processed through Image Styles.
  • Image Optimize reSmush.it. It integrates with the free reSmush.it service for easy and efficient online compression.
     
The reSmush.it image compression tool
The reSmush.it image compression tool

 

The TinyPNG image compression tool
The TinyPNG image compression tool
  • ImageAPI Optimize GD. It allows adjustment of compression quality using Drupal’s built-in GD toolkit.
  • Kraken. It provides integration with the Kraken.io — a robust image optimizer and compressor tool.

 

The Kraken.io image compression tool
The Kraken.io image compression tool

   

  • Resizing images with Drupal core’s Image Styles

    

  • The Image Resize Filter module

     

  • Lazy-loading in Drupal core

  

The interface in Drupal for creating image compression pipelines via the Image Optimize module
The interface in Drupal for creating image compression pipelines via the Image Optimize module

  

  • The Lazy-load module

   

  • Colorbox
  • Image
  • Responsive image
  • Media Thumbnail 

  

  • The Lazy Views module

   

  • when a user clicks a button or a link
  • upon page load

  

An example of a “lazy” view that loads upon a click of the link
An example of a “lazy” view that loads upon a click of the link

Final thoughts

 The ImageAPI Optimize module uses a powerful and flexible pipeline-based system for image optimization. “Pipelines” define a sequence of steps for processing and compressing images. 

Similar Posts