The Best Way To Optimize Images

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.

Pros

• 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

Cons

• 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)

Conclusion

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.

Links

• For Windows/Mac
• Photoshop plugin (Mac)
• pngquant.org

Thanks for reading

If you enjoyed what I wrote, consider upvoting this protip or endorsing me.
If you want to see more of my stuff, you can see other protips I have written or visit my profile.