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.
This inspired me to do it the bash profile way.
Put that function in your bash profile and either run it from inside a directory as “optimize” or specify a directory and it will duplicate the directory and optimize the result ex. “optimize my-dir”
Good article Chris
Forgot to mention, this requires that you have imageoptim installed.
I added this to my bash_profile yesterday, and I’ve already used it at least a dozen times.
You could also use macOS’ own Automator and its folder actions.
Or you can do it all locally with https://github.com/toy/image_optim
You can skip all local image optimization by hosting the images on Sirv. Upload your original images and they can be instantly served at any size, with any optimization settings, by appending options in the URL. This demo shows the options:
https://sirv.com/demos/dynamic-imaging/
It can deliver images over a CDN and automatically serves WebP when possible and retina when possible. There’s a free plan and a range of paid plans depending on how much storage you need. (I’m one of the creators of Sirv).
Hey Chris, great tips. I try to keep my desktop neat too when I’m editing images. I have even tried the bumtop app to organize it, but less clutter is always better for working with images. Thanks for the help.
I’m using the same approach with Hazel.
But I put my images into Dropbox «Public» folder. This allows me to compose direct link for sharing.
If someone interested, I can share my setup.
Trouble with optimizing images is that the really big gains come from lossy optimizations like those you get from ImageAlpha, but deciding which degree of loss is acceptable is a really hard problem to automate, but really easy for a human.
Thanks so much for this, Chris: I’ve been looking for something dead-simple like Hazel for a long time. Combining a variation of what you’ve suggested here with Hazel’s SFTP upload action has improved my image workflow dramatically.