Automatic Image Optimization with Hazel and ImageOptim
I’m forever trying to make my local image workflow easier. I work with images as part of blog posts, images as part of sites I’m working on, images headed to social media… images everywhere. Almost always headed to the web. If we’re taught one thing about images and the web, it’s that they should be optimized.
For me, that means dragging every single image onto ImageOptim before using it. Monotonous repetitive tasks are fertile ground for computerization, so let’s computerize it.
The Desktop is my staging area
It’s just how I work. Things I’m actively using go on the Desktop. I do whatever I’m doing with them, then move them away. I keep it pretty tidy. Images are one of the most common things that end up there. Perhaps it’s a screenshot that needs to get resized, then optimized, then uploaded somewhere, then deleted.
The Desktop is a convenient place, for me, for all that to happen.
Making any image on the Desktop automatically optimized
What if we didn’t need to optimize images because any image that was on the Desktop was automatically optimized? That’s what we’re shooting for here.
One way to approach this would be to set up a Grunt/Gulp/Webpack/Whatever watch task to watch the Desktop. Then if an image file appears there, run an image optimization task. A lot of us probably already do this with the web projects we work on. This wouldn’t be much different.
Except… that we’d need to gulp watch (or whatever) from the command line every time we restarted. I bet there is some trickery to avoid that. Like putting the command into `~/.bash_profile` or something. I didn’t go down that road, though, because…
Enter Hazel
A number of recommendations from folks turned me onto Hazel. It’s basically a watch task for macOS, with a UI to set up all the stuff you want it to do. For example, you can watch your Downloads folder, and if the type of file is a Movie, you can automatically move it to the Movies folder. Cool.
That makes what we want to do real easy. We watch the Desktop folder and if the kind of file is an Image, open it in ImageOptim.
Simple, indeed
This is a pretty simple and obvious thing that I could have done years ago. That’s why I’m blogging it, I suppose. It’s a simple thing that has helped me a ton and might help you. Most importantly, I’ve actually stuck with it. Sometimes I try out some workflow optimization and it doesn’t stick. This has.
Automatic Image Optimization with Hazel and ImageOptim is a post from CSS-Tricks
