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. Book Author. Secretly Important.

55 responses to “5-Minute PNG Image Optimization”

Louis 2009/05/17 11:09 am

I think it’s worth mentioning that Smush.it has been integrated into Yslow :)

Louis 2009/05/17 11:15 am

Oh also, on the mac, there’s Ping which is basically an interface for OptiPNG. Here’s the description from the developper:

Unlike similar utilities, Ping is a Universal Binary. Not only that, but we’ve optimized OptiPNG (the underlying tech. that powers Ping) for the latest Intel chips — taking advantage of all the cool (at least to us geeks) features that’re at the heart of Apple’s latest and greatest computers.

I found that Photoshop provides extreme compression for JPG, but not for PNG. Ping comes in handy there.

Patternhead 2009/05/17 11:09 am

Excellent article Jeff. I must admit that I normally just “save for web” in Photoshop and haven’t tried OptiPNG or Pngcrush. I’ll give them a try on my next project though :)

Jessi Hance 2009/05/17 12:20 pm

Thanks! I’ve been using smush.it but didn’t know about the other programs. Do you think it makes a difference whether you smush.it after or before the other optimizations?

Austin Dworaczyk Wiltshire 2009/05/17 12:27 pm

In all honesty, through some of my own tests, I have found that PNGOUT provides a better size reduction then both OptiPNG or pngcrush. It also has a nice plugin for Irfanview.

Louis 2009/05/17 12:29 pm

@Jessi: I think that Smush.it is a convenient solution for people who do not want to spend extra time optimizing, but want performance. If you want to have the best results, you should tune each and every image by hand, using Photoshop, and then other tools.

Smush.it is like brute force. It takes all the images and processes them. It works but do not provide the fine tuning you get by hand.

Jessi Hance 2009/05/17 12:48 pm

Thanks Louis, nice to know that the pros can do it even better. Since I don’t even do image editing myself and have never owned or used Photoshop, I’ll keep using smush.it, and one of the other programs mentioned here, on the images I’ve been provided.

I don’t know why, but every time I post here, seems like someone is telling me I’m not doing things right! I really appreciate the article.

Louis 2009/05/17 12:52 pm

@Austin: I’d love to see the numbers, and the graphs that confirm you results!

@Jessi: Smash.it does a hell of a job for most people. The two cases where it doesn’t fit are (a) you are perfectionnist and want fine tunning, and (b) you need to have a tool that optimize your images on-the-fly, server-side. You do not want to depend on a tird-party solution there.

Jessi Hance 2009/05/17 1:14 pm

@louis: Whatever. I don’t know why you chose to address me when you said the methods in this article weren’t good enough for perfectionists. I never said I was one. Please leave me out of it.

My first comment was mostly intended to communicate my appreciation to the article’s author. (I will find out the answer to my question with my own experimentation.) Jeff, please keep doing what you do. Your articles are terrific!

Louis 2009/05/17 4:03 pm

@Jessi: when I first read your answer to my comment, I missed this line:

I don’t know why, but every time I post here, seems like someone is telling me I’m not doing things right!

I didn’t realize I had offended you. It has never been my intention to be aggressive with you. I like to think that this place is for sharing knowledge, and since you didn’t seem familiar with image optimization, I though I would write a little about the different solutions I know, and what I think about them. I tried to be descriptive/factual but obviously I failed, and you thought I was being contemptuous.

So, again, sorry for that misunderstanding. I was only trying to be helpful here Jessi.

Jessi Hance 2009/05/17 4:07 pm

@Louis: apology accepted. I absolutely believe you had good intentions. However, I’d appreciate it so much if in future, you only answer questions I actually ask. If you have criticism or qualifications of the article, great, but they should be addressed to the author, or everyone in general, not me! Thanks Louis, I do wish you the best.

Jonathan Ellse 2009/05/18 8:25 am

Thanks for this. It has knocked about 10% of most of my PNGs.

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

Louis 2009/05/17 11:09 am

I think it’s worth mentioning that Smush.it has been integrated into Yslow :)
Louis 2009/05/17 11:15 am

Oh also, on the mac, there’s Ping which is basically an interface for OptiPNG. Here’s the description from the developper:

Unlike similar utilities, Ping is a Universal Binary. Not only that, but we’ve optimized OptiPNG (the underlying tech. that powers Ping) for the latest Intel chips — taking advantage of all the cool (at least to us geeks) features that’re at the heart of Apple’s latest and greatest computers.

I found that Photoshop provides extreme compression for JPG, but not for PNG. Ping comes in handy there.
Patternhead 2009/05/17 11:09 am

Excellent article Jeff. I must admit that I normally just “save for web” in Photoshop and haven’t tried OptiPNG or Pngcrush. I’ll give them a try on my next project though :)
Jessi Hance 2009/05/17 12:20 pm

Thanks! I’ve been using smush.it but didn’t know about the other programs. Do you think it makes a difference whether you smush.it after or before the other optimizations?
Austin Dworaczyk Wiltshire 2009/05/17 12:27 pm

In all honesty, through some of my own tests, I have found that PNGOUT provides a better size reduction then both OptiPNG or pngcrush. It also has a nice plugin for Irfanview.
Louis 2009/05/17 12:29 pm

@Jessi: I think that Smush.it is a convenient solution for people who do not want to spend extra time optimizing, but want performance. If you want to have the best results, you should tune each and every image by hand, using Photoshop, and then other tools.

Smush.it is like brute force. It takes all the images and processes them. It works but do not provide the fine tuning you get by hand.
Jessi Hance 2009/05/17 12:48 pm

Thanks Louis, nice to know that the pros can do it even better. Since I don’t even do image editing myself and have never owned or used Photoshop, I’ll keep using smush.it, and one of the other programs mentioned here, on the images I’ve been provided.

I don’t know why, but every time I post here, seems like someone is telling me I’m not doing things right! I really appreciate the article.
Louis 2009/05/17 12:52 pm

@Austin: I’d love to see the numbers, and the graphs that confirm you results!

@Jessi: Smash.it does a hell of a job for most people. The two cases where it doesn’t fit are (a) you are perfectionnist and want fine tunning, and (b) you need to have a tool that optimize your images on-the-fly, server-side. You do not want to depend on a tird-party solution there.
Jessi Hance 2009/05/17 1:14 pm

@louis: Whatever. I don’t know why you chose to address me when you said the methods in this article weren’t good enough for perfectionists. I never said I was one. Please leave me out of it.

My first comment was mostly intended to communicate my appreciation to the article’s author. (I will find out the answer to my question with my own experimentation.) Jeff, please keep doing what you do. Your articles are terrific!
Louis 2009/05/17 4:03 pm

@Jessi: when I first read your answer to my comment, I missed this line:

I don’t know why, but every time I post here, seems like someone is telling me I’m not doing things right!

I didn’t realize I had offended you. It has never been my intention to be aggressive with you. I like to think that this place is for sharing knowledge, and since you didn’t seem familiar with image optimization, I though I would write a little about the different solutions I know, and what I think about them. I tried to be descriptive/factual but obviously I failed, and you thought I was being contemptuous.

So, again, sorry for that misunderstanding. I was only trying to be helpful here Jessi.
Jessi Hance 2009/05/17 4:07 pm

@Louis: apology accepted. I absolutely believe you had good intentions. However, I’d appreciate it so much if in future, you only answer questions I actually ask. If you have criticism or qualifications of the article, great, but they should be addressed to the author, or everyone in general, not me! Thanks Louis, I do wish you the best.
Jonathan Ellse 2009/05/18 8:25 am

Thanks for this. It has knocked about 10% of most of my PNGs.

123…5 • Newer Comments »