Client Side Performance: Optimizing Images
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.
The other day, Allan Branch tweeted about ImageOptim, a handy little OSX app, that allows you to simply drag and drop images that you would like to optimize.
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. :)
Just two little comments based on my experiences.
I use https://github.com/grosser/smusher for automatic server side image reduction. It’s easy as hell and works just awesome :)
And you should consider using css sprites for your bunch of button_* images. The HTTP request savings are enormous.
Have you checked out Jammit? It can take all these icons and turn them into data-uris for you so you have fewer http requests. This is equivalent to spriting without having to actually sprite the images.
@Tobi: Yep, aware of both. Laziness has stopped me from doing the spriting. :)
@Randy Schmidt: I will have to do more research on data-uris. Thinking I read they were bad for some reason, but cannot recall why anymore.
Another thing to note is that you should always click the “Again” button in ImageOptim until there are no more optimizations possible for all the images. Because it combines several crunchers, it’s possible to optimize the same image up to three times. So, always click “Again” until the “Savings” column is full of zeroes.
I see you haven’t done this for the screenshot you posted; ImageOptim can easily crunch another 3.7% of its file size.
You should probably add that to your post.
@Mathias. Sweet. Good to know.
What a great find, I just shaved off about 30% from my site’s images.
Awesome, this looks like a handy tool. Especially nice that it can be scripted (via command line support). I mostly use the Smush.it tool in YSlow to process images, which smartly gives you a preview of the resulting image along with the compression stats so you can choose whether it was a good idea to strip out some of the data or not…
Data URIs can be very useful for performance, but the biggest disadvantages are the lack of support in IE7 and below (IE8 can handle them, so long as the code is less than 32KB), and the fact that the data isn’t cached by the browser like a regular image file would be. Still worth investigating to see if it makes sense in your situation, though!
Sprites are easy even for the lazy.
Just use: http://spritegen.website-performance.org/ (or there are others)
Also, Smush.it is amazingly simple, and will even maintain the folder structure of the page you browse from (via Firebug).
“Data URIs can be very useful for performance, but the biggest disadvantages are the lack of support in IE7 and below (IE8 can handle them, so long as the code is less than 32KB), and the fact that the data isn’t cached by the browser like a regular image file would be.”
If you put the Data URIs into your CSS, they will naturally be cached along with the style sheet; using CSS you can also provide a fall-back for IE7 and other horrible browsers.