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:
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
Maybe you can give some examples? How many kb’s did you win?
[...] MarkSanborn.net (también posible en JPG [...]
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.
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.
@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.
@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.
The best tool I’ve found for this is online at: http://tools.dynamicdrive.com/imageoptimizer/index.php
Thanks for the link Eric!
I think that you have a little error on your post using jpegtran, the correct command line should be:
$ jpegtran -copy none -optimize -perfect src.jpg > dest.jpg
For those who do prefer to use Windows/Mac-based GUIs and have access to the Adobe suite, I personally have found great results in using Adobe Fireworks as an alternative to Photoshop. In the years I’ve used it I’ve always been impressed in its ability to reduce file size with slight (inconceivable) percentage reduction in quality. And the ability to see the outcome in ‘preview’ mode in real time while changing settings before exporting saves a lot of time and headache.
And their built in batch processing capability lets you process a large group of images and do compression, image size reduction, as well as a few other things like adding borders and watermarks.
The downside is the software costs money.
[...] – I have found that Photoshop’s save for web feature doesn’t fully compress images. Pngcrush eliminates this [...]