How Optimized Are Your Images? Meet ImageOptim-CLI, a Batch Compression Tool

Advertisement

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?

Image Optimization Tools

If you’re not currently using any image optimization tool, I would urge you to choose one1. 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 Jobsis2 via his “Retina Revolution3” article), and I’ve published the results on GitHub4.

The report shows us how much data each tool saves and how much quality was lost statistically. However, how great a loss in quality is noticeable and how much is acceptable will vary from person to person, project to project and image to image.

Aim For The Biggest Gains

I’ve been using ImageOptim215 for many years, with ImageAlpha226 and JPEGmini237 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 Stout8 and Kornel Lesiński9) I’ve created ImageOptim-CLI2410, 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 benchmarks11 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 Alfred12 workflows.
  • Extend OS X with folder actions and more using Automator13.
  • Optimize images whenever they change with the Guard14 RubyGem.
  • Ensure that images are optimized when you Git commit15.

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:

npm install -g imageoptim-cli

Running all three applications before closing them afterwards can be achieved with this:

imageoptim --image-alpha --jpeg-mini --quit --directory ~/Sites/MyProject

Or you can do it with the equivalent shorthand format:

imageoptim -a -j -q -d ~/Sites/MyProject

You will find more installation and usage examples on the project page16 on GitHub.

Case Study: Myspace

Earlier this week, I visited Myspace17 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-imageoptim2518, which offers full support for the optimization of folders and collections of images. It can also be paired with grunt-contrib-watch19 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 Grunt20.

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.

(al, ea)

Footnotes

  1. 1 http://addyosmani.com/blog/image-optimization-tools/
  2. 2 https://twitter.com/daanjobsis
  3. 3 http://www.netvlies.nl/blog/design-interactie/retina-revolutie-follow-up
  4. 4 http://jamiemason.github.io/ImageOptim-CLI
  5. 5 http://imageoptim.com
  6. 6 http://pngmini.com
  7. 7 https://itunes.apple.com/us/app/jpegmini/id498944723
  8. 8 http://zoooot.com
  9. 9 https://twitter.com/pornelski
  10. 10 https://github.com/JamieMason/ImageOptim-CLI
  11. 11 http://jamiemason.github.io/ImageOptim-CLI
  12. 12 http://www.alfredapp.com/powerpack/
  13. 13 http://macosxautomation.com/automator/
  14. 14 http://guardgem.org/
  15. 15 https://github.com/JamieMason/ImageOptim-CLI#adding-to-git-pre-commit-hook
  16. 16 https://github.com/JamieMason/ImageOptim-CLI
  17. 17 http://www.myspace.com
  18. 18 https://github.com/JamieMason/grunt-imageoptim
  19. 19 https://github.com/gruntjs/grunt-contrib-watch
  20. 20 http://www.smashingmagazine.com/2013/10/29/get-up-running-grunt/
  21. 21 http://imageoptim.com
  22. 22 http://pngmini.com
  23. 23 https://itunes.apple.com/us/app/jpegmini/id498944723
  24. 24 https://github.com/JamieMason/ImageOptim-CLI
  25. 25 https://github.com/JamieMason/grunt-imageoptim

↑ Back to topShare on Twitter

Jamie is a Consultant JavaScript Engineer from the UK.

Previously a Senior Engineer at BSkyB—one of the UK’s largest media organisations—he now helps companies of all shapes and sizes with their JS architecture, front-end performance, and more. He is the developer of popular image optimisation tool ImageOptim-CLI, and Tweets about all things front-end at @fold_left.

Advertising
  1. 1

    Good article, I’ve been using ImageOptim for quite sometime.

    If you want a Windows alternative with a GUI then I recommend FileOptimizer.

    http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer

    I don’t use Windows much but it helps to have options.

    0
  2. 3

    I’ll be quite honest, I only skimmed this article but I’m curious what you guys think about RIOT (Radical Image Optimization Tool) http://luci.criosweb.ro/riot/ for compressing images.

    0
    • 4

      If I remember correctly RIOT has plugin for PNGOUT compression which is very good, but it doesn’t support alpha channel in 8-bit PNGs, which limits what you can do.

      For 70% PNG+alpha reduction check tools listed on http://pngquant.org

      1
    • 5

      Hey James,
      Correct me if I’m wrong but I don’t think RIOT is available for OS X, I’ve not been able to use it.

      It would be interesting to know what the state of play is with Image Optimisation tools for Windows now you mention it — none of them feature in my tests.

      0
  3. 6

    Felipe Fialho (@LFeh)

    December 17, 2013 6:16 pm

    Nice Jamie.

    I use the Grunt for automate all tasks in my Workflow, incluse optimize images.

    I separate my live in B.G (before Grunt) and A.G (after Grunt), haha.

    0
    • 7

      Haha! I’m a heavy user of Grunt like you I think — it’s so good how many useful plugins are available for it.

      0
  4. 8

    Thanks for popularizing image optimization! I talk to a lot of people who think Photoshop’s “Save for web” is the same as image optimization.
    Also, if I may: I created a small app for windows which optimizes all web images. It’s called imgoptimize, if you’re curious. The trick you did with myspace could have been done in imgoptimize with one click :)

    0
  5. 10

    Good article. I would have loved to see RIOT as part of the image compression tools reviewed. I have been using this product for over a year now, and have found the results to be amazing! I highly recommend anyone interested in image compression to check it out: http://luci.criosweb.ro/riot/

    0
    • 11

      Thanks Mark, as I mentioned in another comment — I’ve not had the opportunity to use RIOT but I often hear it recommended. It seems to be a good option for Windows users, who aren’t able to benefit from ImageOptim and ImageAlpha.

      1
  6. 12

    Thank you so much, this was exactly what I was searching for and some how could not find it :) ! Maybe… because there was nothing like that before!

    0
  7. 14

    Nikhil Madhamshettiwar

    December 17, 2013 7:19 pm

    I always use PNG as my proffered format and I use https://tinypng.com/ for compression. It almost saves 70% bytes.

    0
    • 15

      That’s great Nikhil, TinyPNG will really help improve your page load times — it sounds like you’re in good shape.

      0
  8. 16

    find www/img/ -type f -name ‘*.png’ -exec optipng -o7 -i=0 {} ;
    find www/img/ -type f -name ‘*.jp*g’ -exec jpegtran -copy none -optimize -progressive -perfect -trim -outfile {} {} ;

    0
    • 17

      That will give you only 5-20% lossless savings compared to 70% possible with lossy PNG from ImageAlpha/pngquant.

      In lossless optimization it misses out on PNGOUT/Zopfli compressors and jpegcrush/jpegrescan.

      0
    • 18

      I would agree with Wersz, it’s great you’re using optipng and jpegtran, but there is the potential for saving a *lot* more with the tools mentioned in this article. That said, you’re using *something* and that puts you in a much better position than those not using anything — nice work.

      0
  9. 19

    We’ll have to give ImageOptim a try and see how it compares with our existing suite of tools. We at Pixtulate (http://www.pixtulate.com) are always looking for better ways to optimize images.

    Is there a way to use this in a runtime on-demand environment?

    We primarily process images on the fly as they are being requested to ensure an image is optimize for the exact visitors device and screen.

    0
    • 20

      Hey Krzysztof, it’s great that services such as Pixtulate and http://ReSRC.it are appearing to help solve the responsive images problem — and more so that performance as a fundamental priority for them.

      JPEGmini offer a service which can be installed on your server (but that is something you would have to pay for) and ImageOptim.app packages several command line utilities that you could run independently of ImageOptim.app on your Server.

      I hope this helps, thanks for commenting Krzysztof and best of luck with Pixtulate.

      0
  10. 21

    That’s looks great
    Is there any option for Linux version so we can run this on uploaded images ?
    Thanks
    BTW great writing

    0
    • 22

      Thank you.

      I can’t be sure about all of them but the CLI tools which ImageOptim bundles together *should* mostly all be available for Linux, they are: advpng, gifsicle, jpegoptim, jpegtran, libjpeg, libpng, optipng, pngcrush, pngquant, and zopfli-png.

      0
      • 23

        The ones you mention are, AFAIK. The provided example craps out on Linux with what seems to be a dependency on ImageAlpha. It looks like to me that is OSX only. There are other errors in the script as well which might be problematic too (on Linux), eg “/usr/bin/imageOptimBashLib: line 436: osascript: command not found”.

        0
        • 24

          Hi, ImageOptim-CLI takes three OS X Applications and automates them, so it’s inherently an OS X-only tool — until anything changes in any of those three upstream projects.

          Thanks Hal.

          0
  11. 25

    Hein Haraldson Berg

    December 18, 2013 12:16 am

    Any advantage to using grunt-imageoptim over grunt-contrib-imagemin?

    0
    • 26

      Vastly superior levels of image optimisation. Honestly, if you didn’t notice in the article there is some data at http://jamiemason.github.io/ImageOptim-CLI which should demonstrate this.

      That said, if for whatever reason grunt-imageoptim isn’t a good fit for you then grunt-contrib-imagemin is excellent. You can continue to use that and be in a really good position. Like I said in the article — *any* tool is better than none.

      0
  12. 27

    I’m using Photoshop CS5 (refuse to update due to Adobe’s Subscription CC model). I was pretty blown away when I saved a PNG spritemap and it was 85KB, but after I took it to an online PNG crush tool, it knocked it down to 29KB, and it looked every bit as good (even the transparency). That’s some serious lack of optimization from Photoshop.

    Nowadays, NO site goes live without ALL the images going through proper lossless compression and optimization. It’s amazing how much of a savings it can make on the Response stack.

    0
    • 28

      Fantastic Aaron, it’s great to hear you embrace this and do it on all of your projects. The savings are huge and quality remains high — what’s not to love? Keep up the good work.

      0
  13. 29

    ImageOptim CLI utility is great, but if someone is look for a drag and drag alternative. The GUI tool does a pretty amazing job.

    http://imageoptim.com/

    0
    • 30

      Absolutely. If you only need to optimise images occasionally then ImageOptim is really convenient and gives great results, thanks Thilak.

      0
  14. 31

    I develop for Mobile, hence image size is a big concern for us. We must crush the images to the lowest filesize, while keeping the quality same.

    For alpha images, I use PNG images, crushed using https://tinypng.com/

    For non-alpha, I use JPEG with 80-90% quality, which has minimal size with optimal display quaity.

    0
    • 32

      That’s brilliant Vishnu. Regarding your JPEGs though, if you’re just saving out of something like Photoshop (regardless of at what level of quality) you’re likely to have unnecessary metadata still in there.

      I’d urge you to investigate this by running them through one of the tools mentioned in this article.

      0
  15. 33

    Loved the terminal notifier at the end of video!!

    0
  16. 35

    Hi Jamie,

    I gotta be honest — I’ve been dropping the ball on image optimization.

    Thanks for explaining all of the different options.

    I’m going to figure out what the right approach is for a couple projects I’m working on.

    Cheers.

    0
  17. 37

    Great article. I was looking for Image Optimization topic for a long time. Probably it is first well written (and very useful) piece of work I have found up to the moment. Thanks a lot.

    0
  18. 39

    We primarily process images on the fly as they are being requested to ensure an image is optimize for the exact visitors device and screen.

    0
    • 40

      Very cool demersraye, do you do the optimisation the first time an image is requested then serve it from cache for each subsequent request?

      0
  19. 41

    I make a lot of flash banner ads.
    Flash has its own compression tool. Do you think using something like ImageOptim would help at all?

    0
    • 42

      Hi Phil,
      I couldn’t say for sure but my instinct tells me that a smaller file going into Flash would tend to mean a smaller file coming out. It’s been 5+ years since I last used Flash but if I remember right it offers you a quality scale to choose from right? I wouldn’t imagine it does any of the removal of useless metadata that ImageOptim and Co do.

      But again, I’m only guessing and couldn’t say for sure Phil.

      Thanks.

      0
  20. 43

    How about tools that are cross platform friendly? (After all, I don’t think everyone on planet earth uses OSX) ;)

    This is a great post, alas of no use (to us), as we’re Linux based with the odd Windows box. But we still try to use applications that are ported throughout all platforms.

    0
    • 44

      Thanks Rama, this echoes some of the points made in the article — there’s a huge amount of tools to choose from and naturally every choice brings with it trade-offs;

      + Some tools optimise really well.
      + Some tools optimise poorly.
      + Some tools degrade image quality.
      + Some tools don’t degrade image quality.
      + Some tools don’t process [jpg, gif, bmp, png, other].
      + Some tools don’t work on [OS X, Windows, Linux, other].

      Among the many choices available to us: ImageOptim-CLI was created to solve a problem felt by users of OS X — but to write an article on it does not deny the existence of other tools — on the contrary, other tools are referred to in this article plus some others we’ve been discussing here in the comments.

      That said, please don’t hesitate to ask if you are interested in discussing Image Optimisation tools for Linux further.

      I hope this has helped you in your search.

      Thanks.

      0
  21. 45

    Benjamin Melançon

    January 8, 2014 2:41 pm

    Seems the ultimate in convenience is tools you don’t run yourself. Sure, in some cases you’ll want to spend time to test and get the exact right balance of quality and size, but most of the time, probably not? And for images submitted in user-generated content, that’s not even really an option.

    Would people be interested in powerful compression capabilities for an online image processing and caching service like http://imagescale.co ? (Its focus now is the first optimization for images: serving the appropriate size!)

    0
  22. 47

    Wow, this is phenomenal! I hate to admit that I wasn’t already compressing my images–I was relying on my designer to get them small. I used your script to run all of my images through ImageOptim, ImageAlpha, and JPEGmini and got a 48% reduction in filesize. What?! It’s embarrassing that I haven’t done this before!

    0
    • 48

      It’s not embarrassing at all Kevin, I’m regularly surprised by how few people have heard of these tools. They’re incredibly useful, but for some reason the word on them doesn’t spread so easily.

      0
  23. 49

    I’m surprised Photoshop isn’t mentioned in this article. Isn’t the #1 question everyone would want to know how the image compression compares to Photoshop, which nearly every designer has?

    I just tried JPEGmini and ImageAlpha for the first time, and here’s what I found. If you already have Photoshop, JPEGmini is not worth your time or money. Both JPEGmini and Photoshop do a great job of compressing JPEGs, but Photoshop actually does a slightly better job at reducing file size (I used a quality setting of 75, which produced comparable results to JPEGmini’s result).

    ImageAlpha, however, is well worth it. While Photoshop’s 24-bit PNGs look great, the file sizes are huge. Photoshop’s 8-bit PNGs look so crappy, I almost never use them. ImageAlpha’s PNGs are much smaller than Photoshop’s 24-bit PNGs, and look almost as good. They are even slightly smaller than Photoshop’s 8-bit PNGs, and look tons better. And at $0, you can’t beat the price.

    0
    • 50

      Hey Kris,
      I was mindful not to mention that any particular product out of respect for the creators but it is true that the “original” files in the performance comparison mentioned in this article (http://jamiemason.github.io/ImageOptim-CLI) are exported from Photoshop. I should mention though that although this is the case, the same is true of other similar image applications.

      Photoshop is beaten by every tool in the comparison without exception, so your findings come as a great surprise — what steps did you follow in performing your test?

      Thanks.

      0
  24. 51

    http://Optimizilla.com allows to optimize both JPEG and PNG images. The best!

    0
  25. 52

    Hii..
    I want to compress the image as less as possible.It should be on linux command line.I have tried jpegtran but its not working.
    Kindly Help ASAP.

    0
  26. 53

    Hi, i want to optimize image, But i dont want the dimension to get change,but the KB size .
    Pls help its important

    0
  27. 55

    “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.” Can you explain exactly how image optimizers work differently from Photoshop’s Save for Web dialog? Thanks.

    0
    • 56

      Hey Steve,
      I couldn’t say what happens under the hood of Photoshop — all I can say is that the file that results from that process is much more bloated than those subsequently run through the tools mentioned in this article.

      Sorry I can’t shed any more light on that.

      0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top