Browsers Internet

Optimize and Compress Pictures Online with SmushIt

Damien Oh 20-03-2009

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 [Broken URL Removed] 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 [Broken URL Removed]. 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.


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.

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 [Broken URL Removed] 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.


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.


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

Explore more about: Image Editor, Mozilla Firefox.

Whatsapp Pinterest

Enjoyed this article? Stay informed by joining our newsletter!

Enter your Email

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Amit Banerjee
    July 20, 2009 at 1:40 pm

    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

  2. Federico Blanco
    April 5, 2009 at 5:16 pm


  3. Aaron
    March 23, 2009 at 6:06 am

    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
      March 23, 2009 at 11:09 am

      The result is more significant if you are using png images

  4. Cheryl
    March 22, 2009 at 8:17 am

    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

  5. Stoyan
    March 21, 2009 at 11:58 am

    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

  6. Vadim P.
    March 21, 2009 at 8:52 am

    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
      March 22, 2009 at 9:54 am

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

  7. Cheryl
    March 21, 2009 at 8:11 am

    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.

  8. Jim Keplinger
    March 20, 2009 at 11:50 am

    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
      March 22, 2009 at 9:46 am

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