By Jennifer Farley

Optimize Your Web Images Online With Smush It

By Jennifer Farley

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 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 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 website; 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 homepage, I entered the URL of that image and the result is shown below.

smush-result 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 is also available as a WordPress plug-in here

With the 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 Now button.

There is also a Firefox plug-in, called Yslow available, which includes 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 to optimize images?  Did you find it useful?

  • Thanks for mentioning the tool, Jeniffer.

    If anyone’s curious how the tool works, I’ve written a few articles over at the YUIBlog:

    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:

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

  • 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


Get the latest in Front-end, once a week, for free.