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 = Fullstack Developer. Book Author. Teacher. Human Being.

55 responses to “5-Minute PNG Image Optimization”

hK 2009/05/18 9:32 am

Irfanview has the RIOT plugin, which can reduce jpg, png and gif. But it doesn’t just optimize blindly, but gives a side-by-side comparison view. It has worked well for my uses.. :)

Louis 2009/05/18 11:59 am

@hK: that plugin sounds awesome. Do you know of any mac equivalent?

Monkey 2009/05/18 1:18 pm

WOW Definitely a great article. While I’ve yet to test it, I’m excited about it!

All I use are PNG’s, and any sort of optimization, let-alone lossless?! optimization, is crazy!

Thanks, as always!

-Monkey

Jeff Starr 2009/05/18 3:23 pm • Post Author

@Patternhead: Good point — I should have mentioned that I do that step as well: all of my PNG images are “Saved for Web” in Photoshop. Even without that step, however, I think that OptiPNG and Smush.it would collectively remove any of the extraneous information not otherwise eliminated via Photoshop.

@Louis: As always, thanks for sharing your expertise. I will be checking out Ping very soon.

@Jessi Hance: Glad to hear you appreciate the article. Likewise, I am grateful for you taking the time to share your thoughts and feedback.

@Austin Dworaczyk Wiltshire: Thanks for the tip! I had not heard of PNGOUT but will be trying it soon. I also use Irfanview so that’s a total bonus. :)

@Jonathan Ellse: Awesome! That’s great to hear :)

@hK: Another new plugin to experiment with! It’s like Christmas all over again. Thanks for the tip on RIOT — looking forward to trying it out.

@Monkey: My pleasure — thank you for the great feedback! :)

Permana Jayanta 2009/05/18 8:40 pm

Same with patternhead, I just save for web in PNG format. This is great information for me. I’m going to try it to optimize PNG image with transparency

Derek Tonn 2009/05/19 10:51 pm

Good work, Jeff! I blogged about your article tonight, and would highly recommend giving PNGSlim a try: http://people.bath.ac.uk/ea2aced/tech/png/pngslim.zip A free tool that has literally changed the way I optimize .png files forever! A bit slow related to processing large images, but incredibly easy to use…and you’ll be hard-pressed to achieve better resulting file size reductions using any other tool. Hope that helps! – Derek

Jacob Rask 2009/05/25 10:34 am

Nice article! OptiPNG was much more effective than both smush.it and PNGcrush for me, btw. As much as 50% size decrease with -o7 on some files. Running both PNGcrush and OptiPNG on the same file simply gave the same result as only running OptiPNG. Didn’t try smushing them afterwards though, since smush.it’s uploader didn’t work for me.

Nihar 2009/05/27 2:37 am

Great, i will use these tools to optimize the images that i am using for my blog.

Thanks for sharing this..

Jeff Starr 2009/05/27 6:59 am • Post Author

@Derek Tonn: Thank you kindly for the information, Derek. I am all over PNGSlim and will be experimenting with it during my next design project (currently in progress). If it works as good as demonstrated in your post, then I will certainly be integrating it into my image-optimization routine. Many thanks! :)

@Jacob Rask: Yes, I find the same thing — OptiPNG seems to always outperform the others (although I am now anxious to try PNGSlim on Derek’s recommendation). Even with the great optimization from OptiPNG, however, running my files through Smush.it usually bangs out an additional few bytes. Any ideas why the uploader may not be working for you?

@Nihar: My pleasure — thanks for the feedback! :)

Taimar 2009/06/06 4:16 pm

http://psydk.org/PngOptimizer.php

Jeff Starr 2009/06/07 5:40 pm • Post Author

@Taimar: Normally I delete one-word comments or comments that provide only a link, but since that URL seems absolutely relevant and possibly may be a great PNG optimization app, I will let it slide. Although, next time you should take the time to type a few words about the link to let readers know why you are leaving it or what you think about it. In any case, thanks.

Taimar 2009/06/08 12:51 am

OK, sorry about that. I’m adding this info now:

PngOptimizer is in my opinion the best PNG optimizing tool for Windows out there. It’s easy (has GUI, isn’t command line), fast and efficient. And it’s free. :)

Version 1.8 works also with 64bit Vista.

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

hK 2009/05/18 9:32 am

Irfanview has the RIOT plugin, which can reduce jpg, png and gif. But it doesn’t just optimize blindly, but gives a side-by-side comparison view. It has worked well for my uses.. :)
Louis 2009/05/18 11:59 am

@hK: that plugin sounds awesome. Do you know of any mac equivalent?
Monkey 2009/05/18 1:18 pm

WOW Definitely a great article. While I’ve yet to test it, I’m excited about it!

All I use are PNG’s, and any sort of optimization, let-alone lossless?! optimization, is crazy!

Thanks, as always!

-Monkey
Jeff Starr 2009/05/18 3:23 pm • Post Author

@Patternhead: Good point — I should have mentioned that I do that step as well: all of my PNG images are “Saved for Web” in Photoshop. Even without that step, however, I think that OptiPNG and Smush.it would collectively remove any of the extraneous information not otherwise eliminated via Photoshop.

@Louis: As always, thanks for sharing your expertise. I will be checking out Ping very soon.

@Jessi Hance: Glad to hear you appreciate the article. Likewise, I am grateful for you taking the time to share your thoughts and feedback.

@Austin Dworaczyk Wiltshire: Thanks for the tip! I had not heard of PNGOUT but will be trying it soon. I also use Irfanview so that’s a total bonus. :)

@Jonathan Ellse: Awesome! That’s great to hear :)

@hK: Another new plugin to experiment with! It’s like Christmas all over again. Thanks for the tip on RIOT — looking forward to trying it out.

@Monkey: My pleasure — thank you for the great feedback! :)
Permana Jayanta 2009/05/18 8:40 pm

Same with patternhead, I just save for web in PNG format. This is great information for me. I’m going to try it to optimize PNG image with transparency
Derek Tonn 2009/05/19 10:51 pm

Good work, Jeff! I blogged about your article tonight, and would highly recommend giving PNGSlim a try: http://people.bath.ac.uk/ea2aced/tech/png/pngslim.zip A free tool that has literally changed the way I optimize .png files forever! A bit slow related to processing large images, but incredibly easy to use…and you’ll be hard-pressed to achieve better resulting file size reductions using any other tool. Hope that helps! – Derek
Jacob Rask 2009/05/25 10:34 am

Nice article! OptiPNG was much more effective than both smush.it and PNGcrush for me, btw. As much as 50% size decrease with -o7 on some files. Running both PNGcrush and OptiPNG on the same file simply gave the same result as only running OptiPNG. Didn’t try smushing them afterwards though, since smush.it’s uploader didn’t work for me.
Nihar 2009/05/27 2:37 am

Great, i will use these tools to optimize the images that i am using for my blog.

Thanks for sharing this..
Jeff Starr 2009/05/27 6:59 am • Post Author

@Derek Tonn: Thank you kindly for the information, Derek. I am all over PNGSlim and will be experimenting with it during my next design project (currently in progress). If it works as good as demonstrated in your post, then I will certainly be integrating it into my image-optimization routine. Many thanks! :)

@Jacob Rask: Yes, I find the same thing — OptiPNG seems to always outperform the others (although I am now anxious to try PNGSlim on Derek’s recommendation). Even with the great optimization from OptiPNG, however, running my files through Smush.it usually bangs out an additional few bytes. Any ideas why the uploader may not be working for you?

@Nihar: My pleasure — thanks for the feedback! :)
Taimar 2009/06/06 4:16 pm

http://psydk.org/PngOptimizer.php
Jeff Starr 2009/06/07 5:40 pm • Post Author

@Taimar: Normally I delete one-word comments or comments that provide only a link, but since that URL seems absolutely relevant and possibly may be a great PNG optimization app, I will let it slide. Although, next time you should take the time to type a few words about the link to let readers know why you are leaving it or what you think about it. In any case, thanks.
Taimar 2009/06/08 12:51 am

OK, sorry about that. I’m adding this info now:

PngOptimizer is in my opinion the best PNG optimizing tool for Windows out there. It’s easy (has GUI, isn’t command line), fast and efficient. And it’s free. :)

Version 1.8 works also with 64bit Vista.

« Previous Comments • 12345 • Newer Comments »