Optimize and Compress Pictures Online with SmushIt

Ads by Google

smushit logo   Optimize and Compress Pictures Online with SmushItIf you have followed my posts previously, you will know that I am a fanatic in optimizing my site for the best performance. One of the thing that I do is to compress the pictures to the smallest possible size without losing the visual quality.

If you are wondering why reducing the size of your images can help in the site’s performance, basically the bigger the size of your images, the slower it takes for the server to load, and the higher probability that your server will crash when you experience a traffic spike (like reach Digg front page). In addition, if you are hosting your images on a third party site, like Amazon S3, having a smaller image also mean lesser cost as the charge is based on the bandwidth and storage space used.

How To Compress Pictures Online with SmushIt

Smush.it is a service developed by the Yahoo Exceptional Performance team, aimed to improve the performance of your site. What SmushIt does is to strip all the metadata from the images and compress them using an optimization algorithm that will not only reduce the size, but also preserve the visual quality. When I first used it, I were surprised to see a 30% reduction in the size of the image that I have optimized in Photoshop. Most of the time that I use Smushit, it is able to shave 10-50%, occasionally 80% off the image size.

Ads by Google

There are several ways that you can utilize Smush it to optimize pictures online.

Upload your image

If you have some images in your computer that you want to optimize, you can easily upload your images to Smushit via the onsite uploader. There is no limit to the number of images that you can upload, but do bear in mind that the more you upload, the slower it is.

smushitupload   Optimize and Compress Pictures Online with SmushIt

Image URL

Instead of uploading, you can also point Smushit to a Web URL (for example, your site) and get it to analyze and optimize all the images in that URL.

smushiturl   Optimize and Compress Pictures Online with SmushIt

Firefox extension

This is by far, my favorite way of using Smushit. If you are using Firefox browser, you can install the Smushit Firefox extension and have quick access to it anytime, anywhere. When you are on a web page (perhaps when you are previewing your post article in your site) and you want to optimize the images on that page, simply click on the SmushIt icon on the Status bar and it will analyze and optimize all the images on that page.

Alternative to the Firefox extension is the bookmarklet that you can place on your Bookmark bar.

The result

Once SmushIt has optimized your images, it will show a report of how many bytes it has shaved off the original images and provide you a link to the zipped files of all the compressed images.

smushitresult   Optimize and Compress Pictures Online with SmushIt

WordPress Plugin

Another thing, if you are using WordPress, there is also a Smushit plugin that you can use. Once you have activated the plugin, all the images that you upload to your site will automatically run through SmushIt behind the scene. There is nothing extra that you need to do. Alternatively, you can go to your Media Library in WordPress and process your existing images with SmushIt.

smushitmedialib   Optimize and Compress Pictures Online with SmushIt

Have you tried out SmushIt to optimize and compress pictures? Is it useful to you? Share with us in the comments.

Ads by Google

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

21 Comments -

Jim Keplinger

Brilliant addition with the WP plug in. Now, would they please make a sister app that works on Adobe Illustrator files (I’m greedy, I know).

Damien Oh

I don’t think they have it at the moment. Will keep you inform if I found the plugin that works fro Adobe Illustrator.

Cheryl

Thanks for this info. Just used it this morning to reduce the size of my galleries and shopping cart thumbnails. What a difference!!

I love the pop-up feature where you mouseover the image and it shows it to you!! Wish I knew how to do that.

Thanks again.

Vadim P.

I prefer to use gimp’s save for web plugin when optimizing images (since it gives you various options to try, and, apparently, does a better job than photohop’s equivalent). I’ll give this a try, if it works out allright, that would be less work for me ;)

Damien Oh

You’ll be surprised how much more SmushIt can compress your images, even after you have compressed them with GIMP.

Stoyan

Thanks for the review, Damien!

@Cheryl, you’d be surprised how easy it was to do the mouse over thumbnails. I used the Tooltip widget from the YUI library, like so:

var ttip = new YAHOO.widget.Tooltip("myid", {
context: document.getElementById(id).getElementsByTagName('td')[0],
text: '<img src="thumb.png" /><br />150 x 150',
width: 200
});

Cheryl

Stoyan….. it’s “easy” if you read and understand a foreign language! :-) And, I don’t.

I can only follow code if it has a complete example on how it’s used. :-(

Thanks for sharing, though

Aaron

I tested it with a couple images. One was originally 57KB, and it reduced it by 1.37%. The next was 23.1KB, and it reduced it by 1.48%. Not too impressive.

Damien Oh

The result is more significant if you are using png images

Federico Blanco

lATER YOU WILL RECEIVE MY COMMENTS

Amit Banerjee

Tried to Use the Plugin but it showed ” Bad response from Smush it”…. anyway would have been useful if it could work the same way for me