5-Minute PNG Image Optimization

Updated August 8, 2024 • 55 comments

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 ¹
-rem allb — remove all extraneous data ²
-brute — attempt all optimization methods ³
-reduce — eliminate unused colors and reduce bit-depth ⁴
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 ⁵
-o7 — optimize the image at the highest possible level ⁶
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

¹ Using the specified parameters
² Except transparency and gamma; to remove everything except transparency, try -rem alla
³ Requires more processing and may not improve optimization by much
⁴ If possible
⁵ Using the specified parameters
⁶ 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 = Web Developer. Security Specialist. WordPress Buff.

55 responses to “5-Minute PNG Image Optimization”

Dan Craggs 2010/02/01 12:23 pm

The ‘-o 7’ parameter isn’t the most intensive for optipng. If you want to try all possibilities you need this:

optipng -zc1-9 -zm1-9 -zs0-3 -f0-5 filename.png

Shane 2010/02/01 12:33 pm

For the more lazy among us, I just use ImageOptim for the Mac.

http://imageoptim.pornel.net/

Works great at compressing PNGs and JPGs.

Jeff Starr 2010/02/01 2:27 pm • Post Author

@Dan Craggs: That looks like some powerful stuff. Do you have a favorite reference that covers more of that same level of technique? Much of what I managed to find was mostly just the basics.

@Shane: I consider myself lazy, so thanks for the tip.

@Vincent RABAH: “Most impressive.” pngquant (404 link removed 2015/07/21) is incredible.

@Stephen Bell: Sweet tip. Why didn’t I think of posterizing first. It makes so much sense. What is generally a range that is useful when trading between quality and file size? Less than 256? 128? (completely guessing here)

Stephen Bell 2010/02/01 1:30 pm

If you really want smaller PNGs, make this your first step:

1. Posterize in Photoshop (Image > Adjust > Posterize). Start at worst quality, then bump it up until it looks acceptable.

This will make things a lot smaller, then you can continue through your PNG optimizers of choice.

More complicated tips in the same vein here:
http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

I would also put in a plug for PunyPNG because of this:
http://www.gracepointafterfive.com/punypng-now-supports-dirty-transparency

Javier Mateos 2010/02/01 3:31 pm

Wow! This looks amazing, just tryed this out and saved around 19% using PNG Crush, thanks for this nice post! Just Stumbled it! :)

Dan Craggs 2010/02/01 2:31 pm

Jeff: Just had a browse through optipng’s documentation one day, and that detail was there along with a notice saying, essentially, ‘you’re probably not gonna want to do this in most cases…’

On most images, pngout tends to struggle to improve on the exhaustive optipng search. Messing around with its block sizes tends to work on occasion though.

Stephen Bell 2010/02/01 2:39 pm

@Jeff Starr: I recently did a website with a LOT of transparent PNGs (admittedly, this made for a fairly heavy site):

http://www.okcadclub.com/addy2010

I’m sure it would be different if you’re doing photos, but on textured, cartoony characters like these, my range on Posterize was between 17 and 25, with almost no discernible difference from the originals. I don’t think the “Levels” on the Posterize dialog corresponds to the number of colors shown (setting it at 2 gives me 6 or 7 distinct colors).

Sean T Allen 2010/02/01 3:26 pm

We run all our pngs through pngcrush with the following options and it results in images that smush it can’t compress any further:

pngcrush -q -rem alla -brute -reduce ORIGFILE CRUSHED FILE

For gif and jpegs, you can also use…

gifsicle and jpegtran

this simple ruby script will do all 3 for you if handed a directory:

#!/usr/bin/ruby

require 'find'

Find.find( ARGV[0] ) do | file |
     if file.match( '.gif$' )
          command = sprintf( 'gifsicle --batch -O2 %s', file )
          puts command
          system( command )
     end
     if file.match( '.jpe?g$' )
          command = sprintf( 'jpegtran -copy none -optimize -outfile %s %s', file, file )
          puts command
          system( command )
     end
     if file.match( '.png$' )
          new_file = "#{file}-crushed"
          command = sprintf( 'pngcrush -q -rem alla -brute -reduce %s %s', file, new_file )
          puts command
          system( command )
          if File.exists?( new_file )
               if File.size( new_file) < File.size( file )
                    command = "mv #{new_file} #{file}"
               else
                    command = "rm #{new_file}"
               end
               puts command
               system( command )
          end
     end
end

Cricket La Chica 2010/02/01 6:38 pm

Hi, thanks for this post. Very useful stuff! Although I do have a question: how do you use OptiPNG on a Mac?

Jeff Starr 2010/02/02 5:48 pm • Post Author

@Stephen Bell: Thanks. That’s good to know and a great site design btw. Loaded very quickly. I think it will be interesting to experiment with posterization for photos next time I’m in Photoshop. Could be a great optimization tool to have available.

@Sean T Allen: That’s a little over my head, but thanks for sharing for others to benefit from. Looks like some powerful stuff there.

@Javier Mateos: Thanks for the stumble :)

@Cricket La Chica: Not sure, I have only used it with PC, but I did see some Mac stuff on the OptiPNG home page (404 link removed 2015/07/21).

Shane 2010/02/20 2:46 pm

Great tips here, i’ve just got my hands on RIOT, and what a dream.
My sites full of jpegs, so it’s perfect.
Reduces files sizes from 14kb to 2kb without too much loss of image quality. Acceptable for “adverts” and smaller images.
My dream come true,
thanks

Brad 2011/02/19 2:05 pm

Great post. I love every bit of weight I can save off my pages. Thanks!

Comments are closed for this post. Something to add? Let me know.

Dan Craggs 2010/02/01 12:23 pm

The ‘-o 7’ parameter isn’t the most intensive for optipng. If you want to try all possibilities you need this:

optipng -zc1-9 -zm1-9 -zs0-3 -f0-5 filename.png
Shane 2010/02/01 12:33 pm

For the more lazy among us, I just use ImageOptim for the Mac.

http://imageoptim.pornel.net/

Works great at compressing PNGs and JPGs.
Jeff Starr 2010/02/01 2:27 pm • Post Author

@Dan Craggs: That looks like some powerful stuff. Do you have a favorite reference that covers more of that same level of technique? Much of what I managed to find was mostly just the basics.

@Shane: I consider myself lazy, so thanks for the tip.

@Vincent RABAH: “Most impressive.” pngquant (404 link removed 2015/07/21) is incredible.

@Stephen Bell: Sweet tip. Why didn’t I think of posterizing first. It makes so much sense. What is generally a range that is useful when trading between quality and file size? Less than 256? 128? (completely guessing here)
Stephen Bell 2010/02/01 1:30 pm

If you really want smaller PNGs, make this your first step:

1. Posterize in Photoshop (Image > Adjust > Posterize). Start at worst quality, then bump it up until it looks acceptable.

This will make things a lot smaller, then you can continue through your PNG optimizers of choice.

More complicated tips in the same vein here:
http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

I would also put in a plug for PunyPNG because of this:
http://www.gracepointafterfive.com/punypng-now-supports-dirty-transparency
Javier Mateos 2010/02/01 3:31 pm

Wow! This looks amazing, just tryed this out and saved around 19% using PNG Crush, thanks for this nice post! Just Stumbled it! :)
Dan Craggs 2010/02/01 2:31 pm

Jeff: Just had a browse through optipng’s documentation one day, and that detail was there along with a notice saying, essentially, ‘you’re probably not gonna want to do this in most cases…’

On most images, pngout tends to struggle to improve on the exhaustive optipng search. Messing around with its block sizes tends to work on occasion though.
Stephen Bell 2010/02/01 2:39 pm

@Jeff Starr: I recently did a website with a LOT of transparent PNGs (admittedly, this made for a fairly heavy site):

http://www.okcadclub.com/addy2010

I’m sure it would be different if you’re doing photos, but on textured, cartoony characters like these, my range on Posterize was between 17 and 25, with almost no discernible difference from the originals. I don’t think the “Levels” on the Posterize dialog corresponds to the number of colors shown (setting it at 2 gives me 6 or 7 distinct colors).
Sean T Allen 2010/02/01 3:26 pm

We run all our pngs through pngcrush with the following options and it results in images that smush it can’t compress any further:

pngcrush -q -rem alla -brute -reduce ORIGFILE CRUSHED FILE

For gif and jpegs, you can also use…

gifsicle and jpegtran

this simple ruby script will do all 3 for you if handed a directory:

#!/usr/bin/ruby

require 'find'

Find.find( ARGV[0] ) do | file |
     if file.match( '.gif$' )
          command = sprintf( 'gifsicle --batch -O2 %s', file )
          puts command
          system( command )
     end
     if file.match( '.jpe?g$' )
          command = sprintf( 'jpegtran -copy none -optimize -outfile %s %s', file, file )
          puts command
          system( command )
     end
     if file.match( '.png$' )
          new_file = "#{file}-crushed"
          command = sprintf( 'pngcrush -q -rem alla -brute -reduce %s %s', file, new_file )
          puts command
          system( command )
          if File.exists?( new_file )
               if File.size( new_file) < File.size( file )
                    command = "mv #{new_file} #{file}"
               else
                    command = "rm #{new_file}"
               end
               puts command
               system( command )
          end
     end
end
Cricket La Chica 2010/02/01 6:38 pm

Hi, thanks for this post. Very useful stuff! Although I do have a question: how do you use OptiPNG on a Mac?
Jeff Starr 2010/02/02 5:48 pm • Post Author

@Stephen Bell: Thanks. That’s good to know and a great site design btw. Loaded very quickly. I think it will be interesting to experiment with posterization for photos next time I’m in Photoshop. Could be a great optimization tool to have available.

@Sean T Allen: That’s a little over my head, but thanks for sharing for others to benefit from. Looks like some powerful stuff there.

@Javier Mateos: Thanks for the stumble :)

@Cricket La Chica: Not sure, I have only used it with PC, but I did see some Mac stuff on the OptiPNG home page (404 link removed 2015/07/21).
Shane 2010/02/20 2:46 pm

Great tips here, i’ve just got my hands on RIOT, and what a dream.
My sites full of jpegs, so it’s perfect.
Reduces files sizes from 14kb to 2kb without too much loss of image quality. Acceptable for “adverts” and smaller images.
My dream come true,
thanks
Brad 2011/02/19 2:05 pm

Great post. I love every bit of weight I can save off my pages. Thanks!

« Previous Comments • 12345 • Newer Comments »