Spring Sale! Save 30% on all books w/ code: PLANET24
Web Dev + WordPress + Security

5-Minute PNG Image Optimization

A great way to improve the performance of your site is to optimize the size of your images. Smaller image sizes require less bandwidth, disk space and load time, and ultimately improve visitor experience.

In this article, I share my effective 5-minute technique for optimizing PNG images. This is a two-step, lossless optimization process that removes as much extraneous data as possible without sacrificing any image quality whatsoever. It’s fast, free, and highly effective.

Step 1: Optimize with OptiPNG or Pngcrush

For the first (and most important) step in our image-optimization process, we want to run our PNG images through a command-line optimizer like OptiPNG or PNG Crush.

Either of these powerful programs will remove unnecessary data from your PNG images without reducing image quality. Both are excellent programs that work beautifully. Here are the commands that I use to optimize my images with either OptiPNG or Pngcrush.

PNG Crush

If you decide to use Pngcrush, try this command for great results:

pngcrush -rem allb -brute -reduce original.png optimized.png

Quick break down of the different parameters:

  • pngcrush — run the pngcrush program 1
  • -rem allb — remove all extraneous data 2
  • -brute — attempt all optimization methods 3
  • -reduce — eliminate unused colors and reduce bit-depth 4
  • original.png — the name of the original (unoptimized) PNG file
  • optimized.png — the name of the new, optimized PNG file

OptiPNG

If you decide to use OptiPNG, throw down with this fine command:

optipng -o7 original.png

OptiPNG is very straightforward (and very effective):

  • optipng — run the optipng program 5
  • -o7 — optimize the image at the highest possible level 6
  • original.png — the name of the PNG file to be optimized

Or, to batch process an entire directory of PNG images, use this:

optipng -o7 *.png

Important note: to keep a backup of the modified files, include the -k parameter before the file name within the execution command. Just in case!

Step 2: Optimize with Smush.it

Now that you have stripped out all the extraneous data from your PNGs, it’s time to smush ‘em even more with the powerful Smush.it online optimizer. It’s so easy. Simply click on the “Uploader” tab, upload your images, and let Smush.it do its thing. Smush.it optimizes your images on the fly and even returns a summary of the saved bytes and percentages. I always get a sh.it-eating grin on my face whenever I use this excellent service. ;)

[ Screenshot: Smush.it Online Optimizer ]
Click image for details

And that’s all there is to it! Once you are done uploading your images to Smush.it, download the provided zip file and compare your optimized file sizes with those of your original images. If all goes well, you should enjoy anywhere from a 5% to 30% (or more) reduction in size, depending on the complexity and size of your images. And best of all, this fast, free and effective technique is completely lossless, meaning that your images suffer absolutely no loss of quality. Nice :)

Notes

  • 1 Using the specified parameters
  • 2 Except transparency and gamma; to remove everything except transparency, try -rem alla
  • 3 Requires more processing and may not improve optimization by much
  • 4 If possible
  • 5 Using the specified parameters
  • 6 Requires more processing time and may not improve optimization by much; optimization levels range from 0 – 7, with 7 being the most intensive

About the Author
Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.
Wizard’s SQL for WordPress: Over 300+ recipes! Check the Demo »

55 responses to “5-Minute PNG Image Optimization”

  1. Sohbet Odalari 2011/08/17 3:40 pm

    You have a helpful blog you have posted. Would I be safe in beliveing that you may be a pro blog designer? ok, I love the hard work you have put in this website, and this article was very interesting. Hope to see more cool stuff like this in the future!..

  2. Tom Conte 2012/03/09 9:14 pm

    If I have used pngcrush, is there any reason to use Smush.it?

  3. Smushit is just pngcrush online. No reason to use both.

    You could however use ImageOptim, as it runs multiple tools.

  4. Smushit isn’t working for me on 2012-05-29

  5. Protip: Optimize those PNGs 2012/07/15 5:18 am

    You should use some optimizing software for all PNGs, such as PNGGauntlet that incorporates multiple compression algorithms to crush the file sizes as small as possible:

    http://pnggauntlet.com/

  6. leo rapirap 2012/09/09 9:11 pm

    both OptiPNG and Smush.it work for me.

  7. Siegfried 2013/04/14 1:30 pm

    Hi!
    I think you should add JPEGmini and TinyPNG – both are pretty good online image optimizers
    Best Regards!

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Digging Into WordPress: Take your WordPress skills to the next level.
Thoughts
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.