module ImageOptim — automatic image optimization

[d'Hinnisdaël]

So I decided to wade into module development and created a wrapper module around ImageOptim, a service that compresses and optimizes images in the cloud. ImageOptim currently handles JPG, PNG and GIF files and, depending on the settings you use, shaves off between 15% and 60% in filesize. Great for bandwidth and great for users, especially on mobile.

This module handles the part of uploading images to ImageOptim via their official API, downloading the optimized version and storing it alongside the original image.
 

 

Download & Info

GitHub / Module directory / Readme / Usage
 

Why ImageOptim?

There are other image optimization services out there, some of them free, that have outstanding ProcessWire modules. A few things make ImageOptim the best tool for most of my customers: It's not free, i.e. it will probably be around for a while and offers support. However, it's cheaper than some of the bigger competitors like Cloudinary. And it does PNG compression better than any of the free services out there, especially those with alpha channels.
 

Installation

Install the module like any other ProcessWire module, by either copying the folder into your modules folder or installing it via the admin. See above for downloads links on GitHub and in the module directory.
 

Requirements

To be able to upload images to the service, allow_url_fopen must be set on the server. The module will abort installation if that's not the case.

I have only tested the module on ProcessWire 3.x installations. I don't see why it shouldn't work in 2.x, if anyone wants to try it out and report back.
 

ImageOptim account

To compress images, you first need to sign up for an ImageOptim account. They offer free trials to try the service.
 

Usage (manual optimization)

Images can be optimized by calling the optimize() method on any image. You can pass an options array to set ImageOptim API parameters.

$image->size(800,600)->optimize()->url
$image->optimize(['quality' => 'low', 'dpr' => 2]) // Set quality to low and enable hi-dpi mode

Automatic optimization

The module also has an automatic mode that optimizes all image variations after resizing. This is the recommended way to use this module since it leaves the original image uncompressed, but optimizes all derivative images.

$image->size(800,600)->url // nothing to do here; image is optimized automatically

To change compression setting for single images, you can pass an options array along with the standard ImageResizer options. Passing false disables optimization.

$image->size(800, 600, ['optimize' => 'medium'])
$image->size(800, 600, ['optimize' => ['quality' => 'low', 'dpr' => 2]])
$image->size(800, 600, ['optimize' => false])

For detailed usage instructions and all API parameters, see the usage instructions on GitHub.
 

Filenames

Optimized images will be suffixed, e.g. image.jpg becomes image.optim.jpg. You can configure the suffix in the module settings.
 

Roadmap

• Asynchronous processing. Not really high on the list. Image variations need to be created anyway, so waiting a few seconds longer on first load is preferable to adding complexity to achieve async optimization.
• Optimize image variations created by other modules. CroppableImage comes to mind. I don't use any of these, so if somebody wants to help out and submit a pull request — all for it!
• Add a dedicated page in the setup menu with a dashboard and detailed statistics. ImageOptim's API is very barebones for now, so not sure if that's feasible or even necessary.

Stability

I've been using this module on production sites for some time now, without hiccups. If you do notice oddities, feel free to comment here or investigate and submit PRs.

[horst]

Hi @d'Hinnisdaël,

many thanks for this well crafted module.

I (only) have read the modules code and checked some, (maybe critical) points for image modules . Everything seems to be well done! Only one thing I spotted, needs a bit clarification from you, as I may not see the whole picture yet.

You added a new hook delete to Pageimage. I cannot see how this integrates with PW's methods for deleting variations. How gets it invoked when I a) delete an image via UI and b) when I call removeVariations() via the API? Or what is it for, exactly?

Besides the integration with unlink & removeVariations, it may be very useful to have a function that only removes the variations from ImageOptim!

 

TL;DR

Spoiler

One possible solution, or the recommended one for this, would be to hook into isVariation(), as this is invoked from all PW functions (unlink, removeVariations).

If you don't want to use a semantically compatible suffix with your variations, you need to hook into this and have to keep track of adding the variations from this module to the methods result.

Or, if you change the none conform suffix to a supported one, you have to do nothing in this regard, (also don't need to add a hook delete), as it all is done from within PW.

// none conform
basename.optim.0x260-suffix1-suf2.ext

// PW conform
basename.0x260-optim-suffix1-suf2.ext
basename.0x260-suffix1-optim-suf2.ext
basename.0x260-suf2-suffix1-optim.ext

My concern is, if you do it like I understand it now, it may result in lots of lost variations across the assets/files directories when people use removeVariations(), what also is called by manually deleting images in the UI.

 

[d'Hinnisdaël]

Dear @horst,

thanks for the valuable feedback.

Indeed you mentioned a very good point. I suspect I had a slightly different than usual understanding of how to remove image variations created by modules. The current implementation uses a glob (/{page folder}/{original file basename}.*) to delete variations.

I'll update the module to use the standard naming scheme — this will have its benefits especially in edge cases, e.g. images will then still get removed if the module is uninstalled or deactivated.

Also good idea about having a public method removeOptimizedVariations(). That will be very easy to implement with the previous issue.

[d'Hinnisdaël]

Quick update and version bump to 0.1.0

I updated the module to use the standard ProcessWire variation suffixes. Instead of image.0x200.optim.jpg, optimized images will now be named image.0x200-optim.jpg. Deleting images in the admin or via the API will delete any optimized variations as before, but the process is a lot more straightforward now.

I also added a public method $image->removeOptimizedVariations() that does exactly what it says it does.

[gebeer]

Hi @d'Hinnisdaël do you still support this module, is it working with latest PW master?

[d'Hinnisdaël]

4 minutes ago, gebeer said:

Hi @d'Hinnisdaël do you still support this module, is it working with latest PW master?

Yes, I have it working in production on a few up-to-date sites. If you find it doesn't work for some reason, feel free to raise the issue here or on GitHub.

[gebeer]

6 minutes ago, d'Hinnisdaël said:

Yes, I have it working in production on a few up-to-date sites. If you find it doesn't work for some reason, feel free to raise the issue here or on GitHub.

Wow, that was fast. Thank you!