Imager X

Imager is a Craft plugin for doing image transforms, optimizations and manipulations. It does all the things that the built-in image transform functionality do – and so much more.

NEW: You'll probably also want to get The Power Pack if you're using Imager X inside Twig templates to create responsive images!

Features

• The most efficient template syntax for doing a bunch of image transforms in one go.
  {{ craft.imager.transformImage(myImage, [800, 2000, 16/9]) | srcset }}
• Transforms are completely file based, no database queries needed.
• Transform Assets (local and cloud-based ones), local images, external images, or even the transformed images themselves.
• Or offload all your transforms to third party services with first party extensions for Cloudflare, Bunny, Imgix, AWS serverless, Imagekit and Imageboss. Or, write your own transformer to use whichever method/service you'd like. (PRO)
• Upload and serve transforms from Amazon S3 or Google Cloud Storage. Or, write your own storage interface to use whichever cloud service you want. (PRO)
• Support for modern image formats like WebP, AVIF and JPEG XL.
• Optimize your legacy format images with jpegoptim, jpegtran, mozjpeg, optipng, pngquant, gifsicle, TinyPNG, Imagemin or Kraken. Or, write your own optimizer interface for whichever post-optimization tool or service you want.
• Auto generate transforms on Asset upload or when saving elements. (PRO)
• Console commands for batch generating transforms. (PRO)
• A nifty utility for clearing caches, batch generating transforms (PRO), and debug information.
• GraphQL support. (PRO)
• Transform any type of input data that can be represented as an image using file adapters.
• Support for interlaced/progressive images.
• Support for animated gifs.
• Support for fallback images when Assets are missing, or completely replacing all images with a placeholder one (especially useful in development).
• If you know the aspect ration you want, you don't have to calculate the extra height/width.
  { width: 800, ratio: 16/9 }
• New letterbox resize mode.
  { width: 600, height: 600, mode: 'letterbox', letterbox: { color: '#000', opacity: 0 } }
• New croponly mode. To crop, not resize.
  { width: 600, height: 600, mode: 'croponly', position: '20% 65%' }
• New cropZoom parameter for when you want to get a little closer.
  { width: 600, height: 600, mode: 'crop', position: '20% 65%', cropZoom: 1.5 }
• Basic image effects, including grayscale, negative, blur, sharpen, gamma and colorize.
  { effects: { sharpen: true, gamma: 1.4, colorize: '#ff9933' } }
• Advanced image effects, including color blend, tint, clut, levels, sepia, contrast, modulate, normalize, contrast stretch, unsharp mask, posterize and many more (Imagick imagedriver only).
  { effects: { modulate: [100, 40, 100], colorBlend: ['rgb(255, 153, 51)', 0.5] } }
• Your own choice of which resize filter to use. Speed vs. quality is up to you (Imagick imagedriver only).
• Support for watermarks.
  { watermark: { image: logo, width: 80, height: 80, position: { right: 30, bottom: 30 }, opacity: 0.8, blendMode: 'multiply' } }
• Lots of placeholder options, even the brand new blurhash thingy.
• Get color information, dominant color and palette, from your images.
• A bunch of color utilities for getting brightness, hue, lightness, percieved brightness, relative luminance, saturation, brightness difference, color difference and (puh!) contrast ratio.

Interested? Read the documentation to learn more!
To play around with the effects, check out the playground app.

From the blog

A hybrid approach to image transforms
Introducing: The Power Pack and Quick Transform Syntax
Say hello to file adapters
Optimizing transformed image filenames for SEO
Combining transformers for even more awesome
Using a pull CDN with Imager X to optimize image delivery
Transforming and optimizing external images in Craft CMS

First party plugins

The Power Pack
Craft Cloud Transformer
AWS Serverless Transformer
ImageBoss Transformer
ImageKit Transformer
Imgix Transformer
Imgix Download Transformer
Bunny.net Optimizer Transformer
AWS S3 External Storage Driver
GCS External Storage Driver
DigitalOcean Spaces External Storage Driver
Kraken.io Optimizer
Imager X Tinify Optimizer
ImageOptim Optimizer
PDF Adapter
Video Adapter
Rounded Corners Effect

In addition to receiving first-party support, these plugins also works as an example on how to extend Imager X with your own transformers, external storages, file adapters, optimizers and effects.

Upgrading from Imager X 5.0 to 6.0

In Imager X 6.0, some functionality with external dependencies has been extracted into separate plugins. If you were using any of these features in 5.0, you will need to install the corresponding plugin(s):

If you used the Imgix transformer in Imager X 5, you need to install the plugin and migrate your settings over to the plugins config file. The settings has been renamed, refer to the plugin documentation for details.

Note that the Tinify optimizer was previously called "tinypng" in Imager X 5. When upgrading, replace any references to tinypng in your optimizer config with tinify.

Refer to the respective plugin's documentation for setup instructions.

Upgrading from Imager 4.0 to 5.0?

There should be no breaking changes going from 4.0 to 5.0.

Upgrading from Imager 3.0 to 4.0?

There should be no breaking changes going from 3.0 to 4.0. A couple of things that was marked as deprecated in 3.0 has been removed, so make sure you solve any deprecation errors in Craft 3.0 before upgrading to 4.0.

Upgrading from Imager 2.0 to 4.0?

The easiest approach will be to upgrade Imager 2.0 to Imager X 3.0 first (obviously before upgrading Craft itself), make sure you fix any deprecation errors, and then upgrade to 4.0.

Upgrading from Imager 2.0 to 3.0?

Before upgrading, make sure you uninstall Imager 2.0 first, since there are conflicting dependencies.

Imager X is a drop-in replacement for Imager 2.0. All you need to do is copy over your config settings from your imager.php file to imager-x.php, and you're good to go! Some things have been deprecated, so check your deprecation warnings and fix as needed.