I try my hardest to do every part of web design in vector graphics or via CSS; but there are always times where I simply must use images. Image optimization is nothing new, and neither are the methods listed below; but I do believe I have found one of the best scripts for optimizing images.
Using pngquant, I have noticed that my PNG files are typically between 60% and 80% smaller than their normal size, and are usually between 10% and 30% smaller than their JPG counterparts at a similar (high) quality. Additionally, pngquant preserves transparency, which can be a key factor in web design.
Using pngquant is by no means complicated; in fact, most people (not just programmers) can use it just like any other application. Unless you want to use the CLI version of course.
- High quality images with a minimal file size
- Transparency is preserved
- Cross Platform (Windows | Mac | Debian/Ubuntu | Red Hat)
- GUI application is very simple (PNGoo/Windows)
- Works pretty fast (5 - 15 seconds per image)
- CLI versions available
- Has a Photoshop plugin (Mac Only)
- Open Source with good documentation
- GUI application becomes unclickable after starting the queue (PNGoo/Windows)
- Images that are extremely large usually fail (PNGoo/Windows)
- When input is JPG, about 1 in 15 have a larger output (usually under 10% larger)
I highly recommend using pngquant. While image optimization can sometimes be a pain, the ability to batch process them with consistent results can be invaluable.