Optimize and Compress Pictures Online with SmushIt

Ads by Google

compress-pictures-onlineIf 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.

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.

smushit-upload

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.

Ads by Google

optimize pictures online

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.

smushit-result

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.

smushit-medialib

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

Join live MakeUseOf Groups on Grouvi App Join live Groups on Grouvi
Mozilla Firefox Fans
Mozilla Firefox Fans
24 Members
Safari Browser Tips
Safari Browser Tips
12 Members
Internet Explorer (IE) Tips
Internet Explorer (IE) Tips
2 Members
Best Mobile Browsers
Best Mobile Browsers
13 Members
Google Chrome Mastery
Google Chrome Mastery
19 Members
Ads by Google
Comments (21)
  • 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

  • Federico Blanco

    lATER YOU WILL RECEIVE MY COMMENTS

  • 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.

  • 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

  • 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
    });

Load 10 more
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.