Smushit is a great tool by Yahoo. It is a lossless tool that will remove unnecessary bytes from images, which means you do not lose visual quality. Image file size will be reduced, but not the pixel size (dimension) or the quality. Your images will look virtually the same as the original.
I have used this tool numerous times and I can’t tell the difference between my original and the Yahoo Smushit image in terms of quality. Smushit is one of the few tools that will not reduce the quality of your images. I can’t say the same about other similar tools out there.
I have only used it with .jpg/.jpeg and .png image formats, but it does seem to smush or reduce the size of .png’s a little more than it does .jpg’s.
Just go to Smushit and upload some images and see for yourself. Once they have been smushed you can preview them in your web browser and/or download them.
For you WordPress users there is also a Smushit plugin available that will automate the process for you. I haven’t used it myself, but check it out if interested. I usually go directly to the Smushit site and smush my images manually.
Here are a few example tests and results using Smushit
Before Smushit (Originals)
2.png original 133KB
3.png original 131KB
converting-to-mp4v.png original 59KB
2.png 21.66KB 16.24%
3.png 21.73KB 16.48%
converting-to-m4v.png 34.82KB 41.02%
Basically this is what happened:
2.png went from 133KB to 112KB
3.png went from 131KB to 110KB
converting-to-m4v.png went from 59KB to 35KB
As you can see in the screen shot the overall savings for the 3 images was 67.61KB.
I am not trying to save bandwidth by doing this, I am trying to reduce the time it takes to load a page. It just so happens that bandwidth and image size happen to go hand in hand, or a two for one deal.
You might be saying big deal 67.61KB of savings who cares. It really can add up to a decent chunk of speed and performance.
Imagine if a visitor happened to view 10 of your pages that each had savings similar to the above amount. That would save 676.10 KB, and depending on the visitors internet connection speed it could save 1-5 seconds of page loading time.
Now if you had more than 3 images or larger images that could be smushed even more you really could shave off substantial page load time. If you were saving 100KB, 200KB, or more per page load that can really add up.
If you resize or scale your images down first, which you should be doing for your web pages anyway and then run them through Smushit you could easily save 100KB to 500KB or more per page load in some cases.
Here is an example. An image being used on a web page is 857px by 609px and a whopping 548KB (1/2 Megabyte) for one image. If you look closely it is being scaled to 595px by 426px. This means that it really only needs to be 595px by 426px and it will look exactly the same.
So what you can do is first resize the image down to 595px by 426px. After doing so, it becomes 447KB give or take depending on what program you use to resize it, which is about 101KB of savings.
Now take that and run it through Smushit and it is reduced to 325KB saving another 122KB. This one image will have gone from 548KB down to 325KB with a total savings/reduction of 223KB for one single image. Now imagine if there were 5 similar images on 1 page that would be over 1100KB+ (1 Megabyte) of savings per page load. Again, we are not so concerned about bandwidth consumption, but reducing the time it takes to load the page.
I wouldn’t waste my time with smaller images in size, or those that would only save a few KB’s because it’s just not worth it.
If you can save or shave off a hundred KB’s or more per page it can be worth a few extra minutes of your time. This is definitely something to consider and think about when optimizing for page load speed.