Amazing Results – Optimising Image Size Using Smush.it

There are dozens of new web based applications being launched every day. Most are moderately useful, but it’s rare that I actually need to use one. After playing with them for a while, I normally abandon them and go back to the core tools I use to get things done.

Well, I found one that’s going right into my toolset: smush.it, the image optimisation web application.

I recently read yet another one of those posts that list free web based applications that you must use! There are too many of these posts going around to keep track of. You see the same applications listed again and again and the lists grow longer and longer. Tiresome, but I still read them!

I’d seen smush.it mentioned before, but on this particular day, I decided to click through and check it out.

To be honest, I was skeptical before I tried it. I thought I knew a bit about balancing quality and size for web images. I use Adobe Fireworks CS3, which is pretty good at creating images optimised for the web. So, when I tried running smush.it on my blog’s header image, I wasn’t expecting much.

Results time: smush.it reduced my header image from 57.3KB to 46.7KB. That’s a saving of about 19%!

Here’s the original 57.3KB file created in Fireworks (click to open):

And here’s the 46.7KB smushed image (click to open):

You can guess which ones up there in the page header now!

When I open the smushed image in Fireworks and save it again, it goes back to 57.3KB. That’s for a flattened PNG24 image (same as the smushed image). Whatever Fireworks is adding, it must be pretty big! The only visible difference I can see is that the smushed image is 96dpi, while the original is 71dpi.

I also tried smushing some other images and only got a saving of around 2%, but every little bit counts and if you can occasionally chop 19% off an image, then it’s well worth running. I’ll be a regular user of smush.it from now on.

I optimised the image via the smush.it site, but they’ve also got a Firefox extension (or bookmarklet for other browsers) that will smush all the images on a web page and provide you with them in a zip file for you to download!

Who’s behind this new web 2.0 offering? Stoyan Stefanov and Nicole Sullivan, who are part of the of the Exceptional Performance team at Yahoo! (the team responsible for YSlow). No wonder it’s good!

Anyone else out there had any success optimising images using smush.it? Matt Mullenweg, if you happen to come across this, smush.it can reduce your main header image by 6.45KB (or 4.81%). Happy smushing everyone!

Tags: performance, tools, web 2.0, web applications, Web Development