Intervention Image Engine – Modern, Responsive, & High-Performance Image Processing

[ukyo]

Hi everyone,

This module completely replaces the default ProcessWire image sizing engine with the powerful Intervention Image v3 library. The goal was to modernize how we handle images in ProcessWire, bringing in features like AVIF support, superior resizing quality, and strict aspect-ratio handling, while keeping the API compatible with what you already know.

🚀 What does it do?

1. Replacement: It hooks into Pageimage. You can keep using $image->width(300), $image->size(800, 600), or $image->crop(...) just like you always have.

2. Modern Formats: Automatically handles WebP and AVIF generation.

3. Smart Responsive Images: It introduces a configuration-based approach where you define Breakpoints, Grid Columns, and Resizing Factors. The module uses these settings to automatically calculate and generate the perfect srcset for your layouts.

✨ New Methods: render() and attrs()

While standard methods work as expected, I’ve added/updated methods to handle modern HTML output:

1. $image->render(string $preset, array $options)
This outputs the complete HTML tag. It automatically handles:

• The <img> tag with srcset and sizes.

• The <picture> tag with <source> elements if you have enabled extra formats (like AVIF/WebP) in the settings.

• Lazy Loading & LQIP: It automatically generates a Low Quality Image Placeholder (pixelated/blur effect) and applies a base64 background to the image tag for a smooth loading experience.

// Example: Render a 'landscape' preset defined in module settings
echo $page->image->render('landscape', ['class' => 'my-image']);

2. $image->attrs(string $preset, array $options)
Perfect for developers who use template engines like Twig or Latte, or prefer full control over their HTML. This returns an array of attributes instead of an HTML string.

$data = $page->image->attrs('landscape');

// Returns array like:
// [
//   'src' => '...',
//   'width' => 1200,
//   'height' => 675,
//   'srcset' => '...',
//   'sources' => [ ... ], // Array for picture tag sources
//   'style' => 'background-image: url(data:image...);', // LQIP Base64
//   'class' => 'iv-lazy ...'
// ]

⚙️ Configuration Strategy

Instead of hardcoding sizes in your templates, you configure your design tokens in the module settings:

• Breakpoints (e.g., 1200px)

• Aspect Ratios (e.g., 16:9)

• Grid Columns (e.g., 1-1, 1-2, 1-3)

• Factors (e.g., 0.5, 1, 1.5, 2 for Retina support)

The module calculates the necessary image dimensions based on these combinations. If you request a specific aspect ratio, it ensures strict adherence to it, preventing 1px rounding errors.

📝 A Note on Documentation

I wanted to get this into your hands as soon as possible, but due to a heavy workload, I haven't finished writing the detailed README.md yet.

Currently, you can grab the code from GitHub (link below). I will submit this to the official ProcessWire Modules Directory after add some other features and after update readme.md

Download / GitHub: GitHub Repo

I’d love to hear your feedback and suggestions!

[BrendonKoz]

This is great. I wonder if @ryan would be up to this being a PR for the core's image processing handling? Or at least basing some of it on an update to offer more modern options. I'd love to see more community modules get adopted into the core, though I also do understand the potential for technical debt that could have (especially here, as you seem to be using an external library for help with the image processing).

This is a really insightful and feature-rich addition. (Someone else also had a srcset handling module, but the addition of LQIP and such is just really awesome.)

Question: I see the format of your breakpoints and aspect ratios fields doesn't use any commas, but the field mentions that it's a comma-separated list. Is it actually newline separated, or is that just a formatting thing where your list entries are a list of one (ex: each line could be a list)?

[ukyo]

@BrendonKoz breakpoint and aspect ratios not comma separated, its line by line config. its a copy paste input field issue.

I am using this external library on all my project. I decide to make it a module. Now its a module.

There is base Pageimage library problems for me and there is no solution until now: 

https://github.com/processwire/processwire-issues/issues/2048

https://github.com/processwire/processwire-issues/issues/2016