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.
• 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)
• Offload all your transforms to Imgix. Or, write your own transformer to use whichever method/service you'd like. (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 Download Transformer
Bunny.net Optimizer Transformer
External Storage Driver for DigitalOcean Spaces
PDF Adapter
Video Adapter
Rounded Corners Effect
ImageOptim Optimizer

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 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.