Client Side Performance: Optimizing Images
Posted on November 23, 2010
By John Nunemaker
I love easy wins. I also love performance, whether it be on the server or client side. Yes, I know we live in the high speed internet days, but so often, it still all comes down to how many bytes are flying across the wire. Anytime you can reduce that number, things will be faster.
For a while I have been playing with Smush.it, but I never got around to actually using it on any of the images in Harmony. The main reason was that Harmony has a lot of images and icons and it would probably take a while. I am lazy, thus it never happened.
Behind the scenes, ImageOptim then uses several utilities to find the best compression parameters and remove unnecessary comments and color profiles. It runs the utilities and saves the file right in place.
For Harmony, all I had to do was drag all the images onto the app, wait for them to complete, git commit all of the updates, and deploy. Just like that, we cut probably a fourth of our image weight in the Harmony administration area. It is so easy, how can you not do it?
The image above is a screenshot of ImageOptim with several of the Harmony images optimized. I even optimized the screenshot and saved around 15%.
If this were the only client side optimization we did, people might not notice a big difference, but this in combination with some of the other things we have done and will be doing are noticeable. Every bit counts! I cannot wait until I get time to build this into Harmony, so I do not even need an OSX app. :)