Welcome to the new design! Please report any bugs or issues, thanks :)
Web Dev + WordPress + Security
eBook: WordPress Themes In Depth
WP Themes In Depth: Deep dive into WP theme development.

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

Jeff Starr
About the Author
Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.
USP Pro: Unlimited front-end forms for user-submitted posts and more.

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 »
The Tao of WordPress: Become your own WordPress guru.
Thoughts
2 things I hate to see in stylesheets: _ and #
Love VLC media player but it fails miserably when it comes to randomizing large collections of mp3 and other files.
Dashlane redesigned, stating proudly they "removed all filigree". Should have kept it; the app now looks generic and boring. Killed your identity.
Working on integration for setaPDF + EDD on the new books subdomain. Good times.
Toggle visibility of hidden files on Mac: Cmd + Shift + .
Great tool for checking browser caching for web pages and all included files.
The new minimalist design styled by 14KB of CSS (uncompressed and un-minified). That covers 850+ posts and pages spanning 15 years of diverse content.