Smush your images to an optimized state

I’ve been big into optimizing content lately, GZIPing, caching, combining, minifying and what not as part of the final phase of my development process. One thing that has always bothered me though  has been getting my images compressed just right. I’m very comfortable with Photoshop and picking the right tool for the job: PNG, JPG and GIF but I would often get lazy when it comes to compressing things down as far as they can acceptable go. That’s where Smush.it comes in.

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.

This tool has been around awhile (I’m usually the last to know), is web based and available at Smushit.com. All you need to do is save your images to the best of your ability and then process them through this tool to get extra savings. This takes all the pain out of the process and I’ve now added its use to my standard dev/rollout process and couldn’t be happier about it.

Here’s an example of the extra saving you could be getting:

I even smushed this image to get an extra 27% savings

Some of my other favorite tools for optimizing this and that include:

  • SquishIt
    A CSS and JavaScript compressor/combiner that can be used in MVC and ASP.NET
  • CSS Sprite Generator
    Makes it easy to combine multiple images into a single image reducing HTTP calls. It’s configurable and even generates all the CSS classes for you.
  • Googles Page Speed Extension
    Analyzes your page checking for issues that may slow it down. Tests stuff like CSS size, proper image compression, Bad HTTP calls and so on.

Leave a Reply

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