Automatic Image Optimization with Hazel and ImageOptim

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.

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.

See this image? The one right above? It was automatically optimized with Hazel and 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
Source: CssTricks

Posted on January 4, 2017 in Austin Web Designer, Blog, css, drupal design,, Drupal Developer, drupal developer austin, Drupal Development, Drupal Development Austin, Drupal Support, Expert Drupal Development, social, Social Media, The, web, Web Design Services

Share the Story

Back to Top