5-Minute PNG Image Optimization

Louis – #1

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

Patternhead – #2

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 :)

Louis – #3

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.

Jessi Hance – #4

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 – #5

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 – #6

@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 – #7

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 – #8

@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 – #9

@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 – #10

@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 – #11

@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 – #12

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

hK – #13

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 – #14

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

Monkey – #15

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

Permana Jayanta – #17

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 – #18

Good work, Jeff! I blogged about your article tonight (http://graphicsoptimization.com/blog/?p=693), 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 – #19

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 – #20

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

Thanks for sharing this..

Taimar – #22

http://psydk.org/PngOptimizer.php

Taimar – #24

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.

Louis – #25

@Taimar: mac users need love too! :(

Taimar – #26

for Mac:

PngThing
http://www.leveltendesign.com/blog/nickc/pngthing-v11-previously-pngoptimizer

PNGPress
http://extrafuture.com/code/pngpress/

ImageOptim
http://pornel.net/imageoptim/en

Enough love? :)

Louis – #27

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

Phil Nelson – #28

Thanks for the PNGPress shout-out, Taimar!

Taimar – #29

You’re Welcome :)

Narayan @ contenta converter – #30

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

Vladimir – #31

In Linux:

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

:-)

Conrad Chu – #32

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

Nicholas Storman – #33

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

Sunny Senevirathne – #35

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!

Dan Craggs – #36

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 – #37

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

http://imageoptim.pornel.net/

Works great at compressing PNGs and JPGs.

Vincent RABAH – #38

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 :)

Stephen Bell – #39

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

Dan Craggs – #41

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 – #42

@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 – #43

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

Javier Mateos – #44

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

Cricket La Chica – #45

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

Shane – #47

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