Compress Images For Faster Load Times

We talked about images that could be embeded into the HTML for faster load times. Today we are going to talk about how to compress those images even smaller without quality loss. Often times web developers think that Adobe Photoshop’s “Save for Web” feature does enough compression. I was also under the belief that photoshop would compress images to the max. After compressing about 100 images I found out that this couldn’t be further from the truth.

Some of the images were reduced by over 90% and NONE of the images that I had saved with Adobe’s “Save for Web” were completely optimized. And remember the programs that I had used are optimizing with ZERO quality loss. The quality is still the same yet the file size is getting smaller.

The Tools

 
Here are some of the tools that we will use to compress various image types:

Pngcrush
Jpegtran

Compressing the Images

 
To reduce the file size of a png without quality loss you will need to use pngcrush.

pngcrush image.png -rem alla -reduce -brute result.png

To reduce the file size of jpeg files without los you can use jpegtran.

jpegtran -copy none -optimize -perfect src.jpg dest.jpg




8 Responses to "Compress Images For Faster Load Times"
  1. Edwin on August 3rd, 2008

    Maybe you can give some examples? How many kb’s did you win?

  2. [...] MarkSanborn.net (también posible en JPG [...]

  3. Matt on August 4th, 2008

    Thanks Mark, I was one of those who was under the impression that Adobe’s “Save for Web” was all I needed.

    Will have to do some testing with these tools. And since they’re command line they should be great for turning into a batch process if there isn’t a feature built into them.

    Thanks.

  4. Mark Sanborn on August 4th, 2008

    Matt,
    I was going to make a batch script that would check to see if it could be improved and improve if necessary. It would also convert to png and test if converting to png would be better than jpeg. I’ll post it up when I get it finished.

  5. Mark Sanborn on August 4th, 2008

    @Edwin,
    How about you try it and let me know how much you save. Even if it is only 1kb, I think it is worth doing.

  6. Matt on August 4th, 2008

    @Mark, so I just did some very rough testing of these tools and they do seem to cut a little bit of the filesize. My PNG that I tested I was able to save about 8KB, and the JPEG about 4KB.

    However, for the JPEG this is the number I would be saving if I kept the Quality set to 100% in Photoshop CS3. If I drop the quality to about 50% (image still shows no deformation to naked eye) I can cut the size down another 2-3KB or so.

    But it all depends on the image.

  7. Eric Wendelin on August 4th, 2008

    The best tool I’ve found for this is online at: http://tools.dynamicdrive.com/imageoptimizer/index.php

  8. Mark Sanborn on August 4th, 2008

    Thanks for the link Eric!

Leave a reply