ImageOptim is a must have as part of your responsive workflow when dealing with images. The Mac App, and now Web Service API, removes metadata from your images and compresses them so that there is no image quality sacrificed. The image on this page is a perfect example. Jan 04, 2017 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.
Take the pain out of building site search with the Algolia hosted API. Start free now!
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.
Exporting images for the Web from one’s favorite graphics software is something many of us have done hundreds of times. Our eyes fixate on an image’s preview, carefully adjusting the quality and optimization settings until we’ve found that sweet spot, where the file size and quality are both the best they can possibly be.
After exporting the image — usually using a feature called “Save for the Web” — and having gone to all that care and effort, we would be forgiven for thinking that our image is in the best shape possible. That’s not always the case, of course.
In fact, much more data is usually left in such files, data that browsers have to download despite not requiring or even using it, data that keeps our users waiting just a bit longer than necessary.
Thankfully, a number of popular tools can help us optimize images even further, but which should we use? We assumed, for a time at least, that our graphics editing software properly optimized our files, but what do we really know about our image optimization tools?
Further Reading on SmashingMag:
Image Optimization Tools
If you’re not currently using any image optimization tool, I would urge you to choose one. Any is better than none. Regardless of which you choose, you will likely speed up your website and keep users happy.
To inform our work, I ran the most popular image optimization tools over a varied sample of images (kindly donated by Daan Jobsis via his “Retina Revolution” article), and I’ve published the results on GitHub.
The report shows us how much data each tool saves and how much quality was lost statistically. However,
Aim For The Biggest Gains
I’ve been using ImageOptim for many years, with ImageAlpha and JPEGmini joining it more recently.
With this trio, we have a specialist in JPEGs, another in PNGs, and a great all-round application, ImageOptim, which also supports GIF and other formats. Each uses different techniques to deliver impressive savings, but they complement each other when combined to offer better savings still.
ImageOptim
ImageOptim beats any single lossless optimizer by bundling all of them. It works by finding the best combination of compression parameters and removes unnecessary comments and color profiles.
ImageAlpha
ImageAlpha is unique in its lossy conversion of PNG24 to PNG8, delivering savings many times bigger than popular PNG optimizers such as Smush.it and TinyPNG. The conversion even maintains alpha-transparency in all browsers, including on iOS and even in IE 6.
JPEGmini
JPEGmini is a “patent-pending photo recompression technology, which significantly reduces the size of photographs without affecting their perceptual quality.” The creators claim it reduces a file’s size by up to 80%, while maintaining quality that is visually identical to the original.
The savings are quite remarkable, but you will need to purchase the software to use it without restriction.
Prioritize Convenience
In terms of performance, the comparative data is reassuring, and to date I’ve been happy with my decisions. But there’s a real problem: all of these tools are GUI applications for OS X.
This has some benefits because everything is local. You don’t need to upload and download files to a Web server, so there’s no risk of the service being temporarily unavailable. This also means that your images don’t need to leave your machine either.
But at some point ahead of every launch, I had to remember to open each application, manually process new images, then wait for the tool to finish, before doing the same in the next application.
This soon gets tedious: We need to automate! This is why (with James Stout and Kornel Lesiński) I’ve created ImageOptim-CLI, automated image optimization from the command line interface (CLI).
ImageOptim-CLI
Though other image optimization tools are available from the command line, ImageOptim-CLI exists because the current benchmarks suggest that ImageOptim, ImageAlpha and JPEGmini currently outperform those alternatives over lossless and lossy optimizations.
I wanted to take advantage of this.
Given a folder or other set of images, ImageOptim-CLI automates the process of optimizing them with ImageAlpha, JPEGmini and ImageOptim. In one command, we can run our chosen images through all three optimizers — giving us automated, multi-stage image optimization right from the command line.
This gives us the levels of optimization of all three applications, with the convenience of the command line, opening up all kinds of possibilities for integration with other utilities:
- Integrate it with Alfred workflows.
- Extend OS X with folder actions and more using Automator.
- Optimize images whenever they change with the Guard RubyGem.
- Ensure that images are optimized when you Git commit.
Do you know of other ways to integrate image optimization in your workflow? If so, please share your ideas in the comments.
Installation and Usage
The CLI can be downloaded as a ZIP archive or cloned using Git, but the easiest way is by running this:
Running all three applications before closing them afterwards can be achieved with this:
Or you can do it with the equivalent shorthand format:
Imageoptim Reviews
You will find more installation and usage examples on the project page on GitHub.
Case Study: Myspace
Earlier this week, I visited Myspace and found that 4.1 MB of data was transferred to my machine. With the home page’s beautiful magazine-style layout, it’s no surprise that roughly 76% (or 3.1 MB) of that were images.
I was curious whether any data could be saved by running the images through ImageOptim-CLI. So, I recorded the video below to show the tool being installed and then run over Myspace’s home page.
As you can see, the total size of images before running the command was 3,186 KB, and ImageOptim-CLI was able to remove 986 KB of data, while preserving 99.93% of image quality.
Imageoptim
grunt-imageoptim
Imageoptim App
There is a companion Grunt plugin for ImageOptim-CLI, called grunt-imageoptim, which offers full support for the optimization of folders and collections of images. It can also be paired with grunt-contrib-watch to run whenever any images are modified in your project.
Smashing Magazine has a great article for those who want to get up and running with Grunt.
Summary
Image optimization is an essential step in a designer’s workflow, and with so many tools to choose from, there’s bound to be one that suits your needs.
Data should bear heavily in your decision, so that you reap bigger rewards, but choose one that is convenient — using a weak tool every time is better than using than a strong tool sometimes. You’ll rarely make a decision in your career that doesn’t have some kind of trade-off, and this is no different.
Resources
Imageoptim Online
If you’ve made it this far, I thank you for reading and welcome your questions, comments and ideas.
Imageoptim-cli