Compress Images For Faster Load Times
Last updated: Jul 25, 2008We 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:
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
Need to print shipping labels on your site?
Checkout my product RocketShipIt for simple easy-to-use developer tools for UPS™ FedEx™ USPS™ and more.