Amazing Results – Optimising Image Size Using Smush.it

| Created: October 30th, 2008
Web Page Optimisation 57 Comments

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.

Some background: When I created my new theme, the header image weighed in at 57KB. While not as big as some sites (Matt Mullenweg‘s is 134KB for example), it was more than I was comfortable with. I could have made it smaller by splitting it up into several smaller images, but I went with a single image to reduce the number of http requests and to speed up the page

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):

Original Header Image

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

Optimised Header Image

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!

Note: smush.it is a free service, which is going to be open sourced. No one asked me to write this post, I’m not getting paid, it’s just damn good!

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!

57 responses on “Amazing Results – Optimising Image Size Using Smush.it

  1. Caroline@no debit card loans

    Pretty impressive as PNG files can be pretty large. I think I must have about a thousand bookmarks now, there must be a better way to organise them all.

  2. Chris

    Cheers Stephen, looks an interesting tool. I’ve just started using a theme with random headers and this shaved 100kb off the images in total, which can’t be bad!

    1. Stephen Cronin Post author

      Hi Chris,

      Great to see you here, reminds me I’m long overdue in leaving a comment on a certain one of your posts. Heading over there now!

  3. kouji@haiku poem examples

    cool tool. 🙂 i’m a big fan of anything that’ll help websites load faster. and it does appear to be much easier to use than photoshop or gimp.

  4. Thomas@Komödien Filme

    Hey, this looks good, and really helpful . . . I always use photoshop for my image resizing and all, and although it works, I am never sure on the exact variables to give me the best image size and guality. Not to mention, opening up photoshop, and opening an image just for a simple need like fixing and image size is such a hassle. I am going to test my luck at smush.it.
    Thanks and Happy Halloween!

    1. Stephen Cronin Post author

      Hi Thomas,

      Good luck smushing! I hope it works as well for you as it did for me.

  5. Anessa@Provillus Side Effects

    Hi, it sounds pretty good, I always do it in photoshop, but it takes too many time. So thanks for good advice, I think I will use this tool.

  6. Julie@ Press Release 001

    This is a great little tool to bookmark for use when I’m out and about and have to easy access to Photoshop or Fireworks

  7. bleuken@Corporate Gifts Srednarb

    I better try this one. It will definitely improve page loading and readability of my websites since I love using a lot images as illustration of my site. Thanks for this recommendation.

  8. Colby Baber@gran turismo 5

    Very nice tool to use. I always used PS in the past but this is going to be better. I hated having to open up PS just to do a small job. Thanks much.

    gran turismo 5

  9. Rafaat@Car Hire Sanford

    Nice tool, I have heard of it before but didn’t try it out. I guess now I will give it a shot. Generally I use fireworks and then convert the png to jpg, but it isn’t worth it since you have to give up things like transparency.

  10. Richard

    Very helpful tool, thanks for the heads up. I generally use Photoshop for this, but am always willing to try things that may make the process more efficient.

  11. Rome@Watch Calzaghe vs Jones

    Stephen, thanks for your little case study and experiment. I’ve heard about the site but I was also skeptical. I quickly checked it out after reading your post. Thanks Stepehen!

  12. Ferienhauser norwegen

    A friend referred this to me and right now, I am using smush.it to create images that is well optimized for the web and I agree with you because this tool is really good and most of all, FREE!

    LINK REMOVED: because of failure to use KeywordLuv syntax (name@keywords)

  13. Tom@The Home Business Archive

    Looks like a really helpful tool.Usually I use Photoshop, but I got to try Smush.The faster a site loads the better it is,people are so impatient online 🙂

  14. K-IntheHouse@Unblock blocked websites

    I have heard of SmushIt but never gave it a chance. After reading your post I am convinced that however little the savings maybe, every little bit helps and I will absolutely implement it.

    Thanks for pushing me over the edge. 🙂

    1. Stephen Cronin Post author

      Hi K,

      Normally it’s the other way around – I start using software that you suggest! Hope it works as well for you as it has for me…

  15. iwan

    nice post, the information will be usefull for me..

    thanks for sharing, going to smushing my images.. 🙂

  16. Jean@Barbecue Fish

    I have also used photoshop myself in the past for reducing the total size of the images, and more recently I have used the free program called irfanview, which was a faster alternative for me. Now with the smush.it, i can shave even more time in the process 🙂 And that is always great isn’t it? 🙂

  17. Jenny@christmas scrapbooking cards

    I too usually use photoshop, but I am always willing to try something new if it could work better. I’ll head over and check out smushit right now! Thanks!

  18. Tjäna Pengar

    I just wonder if search engines pay any attention to how heavy your site is? Could be that they rank you lower if you have a heavy site.

    I will test this smushit but if the image gets smaller it also get worse quality right? You can’t just shrink something and keep the exact same quality?

  19. Roger Hamilton

    Wow.. I always thought those created from Photoshop, Fireworks etc. have some of the better compressions. I didn’t know you could furthur reduce the size of images create from those! I’m going to check it out. Thanks!

  20. Jon@Beauty Salon Marketing

    Cool, thanks for the link Stephen. Like many other commenters, I’ve been using Photoshop but never feel too confident about all the options it gives me!

    Cheers, Jon

  21. Nick@Free Competition Sites UK

    Great, thanks for that. Been very wary of using images at all as I am trying to make the site as simple and as easy loading as possible… this should help me add in a couple of relevant images without damaging the page load speed anywhere near as much

  22. Jeff@Denver Properties

    Thank you very much Stephen for the link… I am a person who always want to try something new.

  23. OM@Cheap cars

    That was really amazing to see. There was no change in the picture quality and it got reduced by almost 20% of its size. It will be of great use to me. Thanks for sharing this tools. It is indeed amazing.

  24. David@Lift Chairs

    That is a very cool service/tool. I could not tell the difference between the two header images you linked too. I have one site I want to try this on, because I made the header myself and it looks pretty cool, but it is pretty heavy too.

  25. Tom@Recording Studios

    Smush it looks like a good idea to me, I’ve just started to blog (my musical world) and I am having to learn to use software and tools like this to work on becoming a better blogger.
    I like your blog because most of the time even I (one FNG) can understand what you are talking about.
    Thanks for another tool,( Now if I can figure out how to make my blog Do Follow, and add in KeywordLuv, I’ll be able to make giant strides toward my goal).
    Thanks Again,
    Tom

  26. Tina@Atlanta Real Estate

    Thanks for the info, we’ve been using photoshop’s “save for web” tool. We’ll give this a try and see if file size is reduced.

  27. Movers @ moving companies

    I tried smush.it before commenting and it really worked. One of you said earlier that he uses photoshop and it is kind of a hassle and I totally agree. I guess i will be using smush.it from now on as well. By the way, thanks for the great submission!

  28. Liquid Roof

    Nice tool…i have been using photoshop for the purpose but tried this one out on your recommendation and quite amazed..file size got reduced and picture quality was great too…Thanks!

    LINK REMOVED: because of failure to use KeywordLuv syntax (name@keywords)

  29. Claremont@Web Design Consulting

    Me too, tried it but it doesn’t really improve size compression. However, you can make use of this tool whenever CS3/Gimp is not available and you need image compression.

  30. jeff@High yield savings account

    Smushit looks like a great idea. I wonder if a site loads faster if you used it on all images on page. I have to try it and see how it works thanks.

  31. choonling@brochure design

    Things are moving fast in the web design industry. We have to be the first to know the new technology, new trends… Thanks for the sharing.

  32. Peet

    cool tool. i’m a big fan of anything that’ll help websites load faster. and it does appear to be much easier to use than photoshop or gimp.

  33. Simon@Acai Berry

    Wow those results are impressive. I really can’t tell the difference between the fireworks version and the smush versions. I am Photoshop user myself…but I am gonna give the smush it a go. It’s so damn hard to get optimized smooth gradients is it? Cheers.

  34. Bruce

    Hi, it sounds pretty good, I always do it in photoshop, but it takes too many time. So thanks for good advice, I think I will use this tool.

  35. Felix@Capiznon Bloggers 2009

    I’ve tried it and what I like about it is how you can send multiple files to resized and easily download it in compressed format. Cool tool.

  36. Erik G@Hunting and Fishing

    Seems like a really good application, say if you’re at work and you don’t have photoshop or fireworks. Worked really good for me, thank you!

  37. Ankita@IGNOU

    i just used it with my recent blog post. I wanted to have nice image and got that. its simply superb loved it.

  38. Dan@Sisal Rugs

    This image optimization tool can really very helpful specially if you are frequently using image for your websites. Like our website that displays a lot of rug images. The more the image is optimized the faster the site will load thus improving the user experience.

  39. Philip@Hair Extensions

    This looks like a pretty handy tool for anyone looking to optimize images for the web. I will try it out and report back.

  40. Shaz@Photoshop Tutorials

    I just use the export tool in fireworks when i need to down size images to keep quality i save as jpeg but it really depends on a image to image basis photos will mostl likley use be larger where as graphics will not im going to give smush.it a try however see if it works any better for me.

  41. victor@Optical Illusion Posters

    Nice addon! thanks for the heads up, this is actually really useful even though it only takes off about 10%. This can really speed things up significantly when a page is loading. And a second or two can make all the difference in first impressions!