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!