- Nov 03, 2020 I have ImageOptim post-processing set for all my export presets for uploading to the web, prepping files for social media, or sending via email, for instance. Windows and Linux. ImageOptim is Mac-only, but if you’re using Windows or Linux, here are some other apps worth investigating.
- ImageOptim-CLI Automates batch optimisation of images. Speeding up images often comes with a cost in picture quality and finding the right balance can be difficult.
Dec 16, 2018 ImageOptim is a front-end (GUI) for set of tools for optimisation of PNG and JPEG images. Optimization makes files smaller (in terms of disk space) by finding optimal compression parameters and by removing unnecessary information, like file comments, EXIF tags, and color profiles.
The size of an ePub file is important. Some retailers— like Kindle’s Direct Publishing program—have very small maximum file sizes or charge you download fees. Each image you add can be—quite literally—costly. But it’s not just that: the size of an ePub file can also contribute to sluggish rendering times and slow downloading times to get it onto your device.
If you create image-heavy eBooks (both reflowable and FXL), you’ve probably seen how quickly your final ePub’s file size can increase. Fortunately there’s a great little program that can help reduce the size of images. Let’s take a look at ImageOptim
What is ImageOptim?
ImageOptim is actually a series of scripts and algorithms that remove unnecessary data from images to make them smaller in size and load faster. Even if you use Save For Web in Photoshop there’s still a lot of additional cruft in that file that can be removed to further reduce the file size. When you run ImageOptim on an image, it tests each algorithm and then applies the one that creates the smallest file size.
It’s important to know what ImageOptim does NOT do as well. Unlike Photoshop’s Save for Web, it does not compress images at all. You shouldn’t see any visual difference in your images when using ImageOptim, only a file size difference.
I recently made an FXL book for a client that had a large number of full page images in it. Before running ImageOptim the folder of images was 51.8 megabytes (these images had already been saved using Photoshop’s Save For Web). After running ImageOptim it squeezed out 3.8MB in total from all the images. That might not seem huge, but that means I reduced the entire folder size by about 4 full images. And depending on how you save your images that could be even more. On some web projects I’ve seen the size reduction be as much as 50%!
How to use ImageOptim
Imageoptim Online
One of the best parts of ImageOptim is just how easy it is to use. Download the app, drag in your image folder and let it do it’s thing.
1. Download ImageOptim
You can download ImageOptim from this link: Download
Once downloaded, open up the zipped file, and drag the application to your Applications folder
2. Drag in your image folder
Once you have installed the app, go ahead and open it up. Then crack open your ePub, and drag the images folder into the ImageOptim window. ImageOptim will begin to run through the images, optimizing each one of them (this can take a awhile, and don’t be surprised if your computers fans get loud—this is a pretty processor heavy procedure).
Imageoptim For Windows
When it’s finished it will give you a total amount saved in the bottom corner. Even if its .1MB its still something!
There are quite a few options you can set in ImageOptim’s preferences. I encourage you to take a look at the ImageOptim website for more information.
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
Imageoptim Online
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:
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.
grunt-imageoptim
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
If you’ve made it this far, I thank you for reading and welcome your questions, comments and ideas.