Last Updated: April 15, 2023
·
2.428K
· projectcleverweb

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

 
 
 

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.

Have a fresh tip? Share with Coderwall community!

Post
Post a tip