Welcome to the new design! Please report any bugs or issues, thanks :)
Web Dev + WordPress + Security
USP Pro: User Submitted Posts
USP Pro: Unlimited front-end forms for user-submitted posts and more.

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 = Web Developer. Book Author. Secretly Important.
USP Pro: Unlimited front-end forms for user-submitted posts and more.

55 responses to “5-Minute PNG Image Optimization”

  1. @Taimar: mac users need love too! :(

  2. @Taimar: well, thank you very much! You sir are quite a gentleman. I didn’t know about these apps, and God, they look awesome!

  3. Phil Nelson 2009/06/08 7:45 pm

    Thanks for the PNGPress shout-out, Taimar!

  4. You’re Welcome :)

  5. Narayan @ contenta converter 2009/06/13 5:22 am

    Great post. Thanks for the information and link to optiPNG.

  6. In Linux:

    find -type f -name "*.png" -exec optipng -o9 '{}' ;
    find -type f -name "*.gif" -exec gifsicle -O2 -b '{}' ;

    :-)

  7. Conrad Chu 2009/06/30 1:12 am

    I’ve been working on a service similar to smush.it called punypng.

    It’s free and just another contribution towards making the web more puny.
    http://www.gracepointafterfive.com/punypng

  8. Nicholas Storman 2009/07/18 12:40 pm

    Just curious which settings do you use in save for web in Photoshop?

  9. Jeff Starr
    Jeff Starr 2009/07/19 8:39 pm

    Hi Nicholas, it really all depends on the purpose of the image. For JPEG files, I like to find the right balance between smaller file size and quality, which generally happens for me in the 66% – 88% range. For PNG files, I use 8-bit for GIF-like images and 32-bit when alpha transparency is required. GIF files are usually set with 128 – 256 color pallets, unless the image is suitable for fewer colors. Other settings vary, depending on the project, etc.

  10. Sunny Senevirathne 2009/10/20 12:09 am

    I am trying to find a technique for optimize character searching mechanism for Unicode characters..If any of you know any method to efficiently search Unicode characters please let me know. Thanks!

  11. Vincent RABAH 2010/02/01 1:20 pm

    93K vincent-round-full.png the original (a picture of me)

    pngquant 256 vincent-round-full.png :
    33K vincent-round-full-quant-256Colors.png

    pngquant 128 vincent-round-full.png :
    26K vincent-round-full-quant-128Colors.png

    The result is quite impressive :)

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 »
.htaccess made easy: Improve site performance and security.
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.