Optimize Your Web Images Online With Smush It

Tweet

Yesterday, I wrote about how to optimize images for the web using Photoshop. There are also a number of free applications that can help you squeeze your image files down in size, and one in particular that is particularly good is Smush.it from Yahoo.

As mentioned in the previous post, despite the near ubiquity of broadband in some parts of the world, there are still plenty of people working off a slow connection. To ensure your web pages load very quickly for everyone, and in the process hopefully keeping your visitors that little bit longer, all of your images should be optimized.

Photoshop does a good job with image optimization, as does Illustrator and Fireworks, but Smush.it can really compress the living daylights out of your images producing very small file sizes. It can process JPG, GIF, and PNG images that are up to one megabyte in size. From the Smush.it website;

Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a “lossless” tool, which means it optimizes the images without changing their look or visual quality.

Mini Case Study

In yesterday’s post I uploaded a photographic image of a flower. The image file size was 159KB. On the Smush.it homepage, I entered the URL of that image and the result is shown below.

smush-result

Smush.it squashed the same image down to 112KB, a saving of 47KB. The resulting image file is listed as a link and can be downloaded. The service is quick and free.

WordPress Plug-in

Smush.it is also available as a WordPress plug-in here

With the Smush.it WordPress plug-in installed on your blog, any new image you add to the Post and Pages are automatically optimized behind the scenes. You don’t need to do anything! With existing images on your blog, you can select an image from the Media Library and press the Smush.it Now button.

There is also a Firefox plug-in, called Yslow available, which includes Smush.it. I installed the plug-in and at the time of writing, it didn’t work properly for me. However, this may be something to do with the latest update of Firefox.

Have you used Smush.it to optimize images?  Did you find it useful?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.phpied.com ssttoo

    Thanks for mentioning the tool, Jeniffer.

    If anyone’s curious how the tool works, I’ve written a few articles over at the YUIBlog:
    http://yuiblog.com/blog/2008/10/29/imageopt-1/

    The “secret sauce” is just using free open source programs such as pngcrush, imagemagick and jpgtran for lossless optimization.

    A much similar feature is also available in Google’s PageSpeed extension. It’s running optipng instead of pngcrush to optimize PNGs, but the results are pretty similar.

    The point I’ve been trying to make for some time is: we have to optimize images. 50% of the average web page is images and 10-30% of the image weight can be optimized. Using free open source tools anyone can run in a batch on all images. After finishing with PS’ Save for the Web.

    Here’s also a presentation SP readers might find interesting:
    http://www.slideshare.net/stoyan/image-optimization-7-mistakes

  • http://www.h2ok.de captainh2ok

    I installed the plug-in and it didn’t work properly for me.

    This morning i run an update for my plugins in Firefox 3.5 manually, and there is a new (beta) version of YSlow. Now it works also in FF 3.5!

  • http://www.crearedesign.co.uk TomBradshaw

    Those are some impressive stats, thanks for the info Jennifer. I’ll have to give this a go!

  • mikebrady

    Wow, thanks! This tool is great! I’ve reduced the file size of almost every image on my site drastically. Even after saving for the web in PS.

  • Anonymous

    sdsd