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):
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!
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!
That is a handy little extension. Thanks for the heads up
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.
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!
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!
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.
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!
Hi Thomas,
Good luck smushing! I hope it works as well for you as it did for me.
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.
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
This is great. So far I’ve been using Pixresizer for images.
yea Pixresizer is realy great
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.
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
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.
This seems like a nice tool. I already have a shortcut on Photoshop created that will handle this for me and I will probably stick with this since it works for me.
LINK REMOVED: because of failure to use KeywordLuv syntax (name@keywords)
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.
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!
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)
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 🙂
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. 🙂
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…
nice post, the information will be usefull for me..
thanks for sharing, going to smushing my images.. 🙂
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? 🙂
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!
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?
i used Pixresizer and it’s good but this sound great too. thanks for info
@Kevin, which is better Pixresizer or Smushit when it comes to image compression?
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!
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
I can highly recommend Advanced JPeg Compressor, does wonders for me. Offline with a great GUI
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
Thank you very much Stephen for the link… I am a person who always want to try something new.
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.
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.
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
Nice post. Have added you on RSS to keep myself updated.
LINK REMOVED: because of failure to use KeywordLuv syntax (name@keywords)
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.
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!
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)
i agree with you Adobe Fireworks CS3 is good at creating images optimised for the web
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.
Thank you so much for the heads up, I will surely try it.
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.
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.
Smush it works well, I just did all of my pics!
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.
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.
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.
Anything to help us dialup users….
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.
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!
i just used it with my recent blog post. I wanted to have nice image and got that. its simply superb loved it.
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.
This looks like a pretty handy tool for anyone looking to optimize images for the web. I will try it out and report back.
Downloading.. thanks for share.
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.
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!