Getting the Most Out of PNG

When it comes to image formats on the internet, it's generally a three-way tie between JPEG, GIF, and PNG. Deciding which image format to use is relatively straightforward; you choose lossy JPEG when you're saving continuous-tone photographic images, and you choose between lossless GIF or lossless PNG when you're saving images with large blocks of the same or similar colors. See my comparison of GIF/PNG and JPEG if you're not clear on what the difference is. But the choice between GIF and PNG is no contest. PNG is a more modern and vastly improved version of GIF that (almost) completely obsoletes it. You should always choose PNG over GIF, except in the following two circumstances:


This is a companion discussion topic for the original blog entry at: http://www.codinghorror.com/blog/2007/03/getting-the-most-out-of-png.html

Note some problems with colour profiles embedded in PNGs on Safari:
http://blogs.smugmug.com/onethumb/2007/02/14/this-is-your-mac-on-drugs/

Great article! pngout sounds very useful.
Cheers,
Tim

You should check out PNGGauntlet (http://brh.numbera.com/software/pnggauntlet/ ) - it’s a GUI wrapper for PNGOUT. I’ll be releasing a .NET 2.0 version soon.

There’s one little thing with pngout that might bite you. It removes gamma correction by default - so the images that uses gamma correction will look differently than the originals. You can tell it to keep the gamma correction for PNGs that needs it.

Irfanview provides a GUI for PNGOUT.

How does PNGOUT compare to PNGCrush (http://pmt.sourceforge.net/pngcrush/ )? I’ve always used the latter, and it seems to offer pretty good results.

/b/: This is from the PNGOUT tutorial:

“If you are already be familiar with the pngcrush utility, you may be interested to know that PNGOUT can produce even smaller files than pngcrush -brute. With PNGOUT, however, you will need to find the right options yourself.”

The options are listed here:
http://advsys.net/ken/util/pngout.htm

One negative aspect of PNG is it is not 100% compatible with all versions of IE on windows. This is such a large issue I would say it’s mostly why it is not used more.

Kurt, why would anyone care about any version of IE prior to 6? They’re ancient, nobody uses them, they’re statistical noise in weblogs.

The only PNG issue with current versions of IE is that IE6 does not support PNG transparency:

http://homepage.ntlworld.com/bobosola/pngtest.htm

… whereas IE7 does.

Jeff, which screen capture software do you use? Thanks.

I’m so glad you talked about PNGOUT, most people never even consider it when discussing shrinking PNG’s.

Ken also has his own program PNGOUTWin that gives a GUI for PNGOUT. It costs a little bit of money, but for someone who compresses hundreds of image files it is very helpful.

I think we should stop saying “Major browsers don’t support PNG alpha”, because browsers is plural and the only browser not to support it is Internet Explorer (excluding of course 7).

So now that your listed on the Google Portal Technology section, is every post from now on going to be about shaving bytes from bandwidth?

Here’s another thought, use ASCII art. That’s a huge bandwidth saving. :wink:

You use Vista?!?!? WHY?

For a site with the name Coding Horror… maybe you deserve to use it :wink: Just kidding…

There’s also PNGCRUSH and a fork of PNGCRUSH called OptiPNG. Be interesting to see how these compare with PNGOUT.

There’s another annoying bug with PNG files within MSIE : colors are not correctly rendered. Example : body{background:#ddeffa} and body{background:url(bg.png)} (where bg.png is a plain one color image with color #ddeffa) are not the same with MSIE.

Typically, mixing PNG and JPG images with MSIE in a layout where you need background to blend correctly is a no-no.

For being such a graphics wiz I would think that Ken Silverman would have gotten out of the '90s style background. That is hideous!
Well, at least it is a 423 byte PNG file (utilback.png). He likes his PNG. :slight_smile:

Wow. I never knew about PNG file size optimization. I’ll be converting Penny Arcade’s existing png’s ASAP.

If someone has any brilliant ideas about image compression in webcomic strips I’d love to hear about it. Take the image http://www.penny-arcade.com/images/2007/20070307.jpg for example. When I run pngout on a strip the result is often several times larger.

16:30 erik@spekkio % ./pngout-darwin -c2 -f5 -s0 20070307.jpg
 In:  104908 bytes               20070307.jpg /c2    
Out:  386332 bytes               20070307.png /c2 /f5
Chg: +281424 bytes (368% of original)

Time spent in user mode   (CPU seconds) : 12.472s
Time spent in kernel mode (CPU seconds) : 0.030s
Total time                              : 0:14.48s
CPU utilisation (percentage)            : 86.3%
Times the process was swapped           : 0
Times of major page faults              : 0
Times of minor page faults              : 0

Any ideas?

Don’t forget JPEG’s progressive rendering feature which does pretty much the same thing as PNG’s “2D interlacing” but with less comparative overhead. I remember in the late 90s most JPEGs used to load like this.

Hi Eric. My guess would be it’s because your input file is a JPG. That means it will have JPEG artifacts, messing up the whole “large areas of the same colors and hard transitions between them” thing.

I suspect you’d need to work off uncompressed or lossless image formats to see an improvement.

1 Like

Begin pedantry:

Contra Eamon, and your implication, GIF is not Istrictly/i limited to 256 colors:

http://phil.ipal.org/tc.html

In practice, of course, you’d never want to try and use true-color GIF, because of slow rendering times, and because GIF is a horrible dead-end.

End pedantry.

Hi Erik. My guess would be it’s because your input file is a JPG. That means it will have JPEG artifacts, messing up the whole “large areas of the same colors and hard transitions between them” thing.

I suspect you’d need to work off uncompressed or lossless image formats to see an improvement.