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.
