(This article in Japanese)

People are often afraid to use PNG because they think that:
a/ it doesn’t work in all browsers, or
b/ filesizes are bigger than GIF

While these have some grain of truth to them, they are mostly misconceptions. Before addressing them, one quick background point – what’s PNG8 and why it’s cool.


There are several types of PNG files, which can be grouped into those main kinds:

  • Truecolor PNGs with or without alpha transparency channel, also known as PNG24 and/or PNG32 (the one with alpha)
  • Grayscale PNGs with or without alpha
  • Indexed PNG, aka palette PNG, aka PNG8

PNG8 is like a GIF – it has a palette of 256 colors and supports transparency. While GIF supports true/false transparency (a pixel is either transparent or it isn’t), PNG8 supports variable alpha transparency. Right there you see – PNG8 can do anything that GIF can, plus more.

There’s a little glitch in IE6 where a semi-transparent pixels in PNG8 are seen as fully transparent, just like a GIF. So here’s an option for progressive enhancement – you use the same image and IE6 gets a degraded GIF-like experience, while modern browsers get the full experience.

Here’s an example, taken from this excellent article – modern browsers get the light bulb with the glow:

IE6 and under get the gracefully degraded experience and no glow:

Another pain point is that Photoshop doesn’t produce semi-transparent PNG8 (although they came up with the name “png8″ instead of saying palette or indexed PNG). Only Fireworks does export alpha transparent PNG8, which makes it a bit of a challenge. You also need a good designer to undertake this tricky task of making sure the image looks OK in both experiences. One way is to assume you’re working with a GIF and then upgrade the experience with the carefully selected semi-transparent pixels. It could also help you keep the gif-like version in a layer and use other layers for the semi-transparent stuff, so you can quickly preview what the image will look like in IE6.

In any event – the important thing to remember is that in the worst case (IE6) PNG8 is as good as a GIF.

PNG doesn’t work in browsers?

PNG works in browsers since forever with the exception of two edge cases:

  • the glitch where PNG8′s semi-transparency is gone in IE6 (see above), but here GIF can’t help you either
  • transparency in truecolor PNGs is shown as a solid (usually grey) color in IE6. But again – GIF can’t help here either, because it doesn’t support alpha (variable) transparency to begin with. People often use GIF to “solve” this problem (moving to GIF will mean potentially losing colors), but if you can solve with a GIF, you can solve it even better (and with smaller filesize) with PNG8

Another solution to the second problem is to use IE’s AlphaImageLoader CSS filter (and there’s a number of scripts to do so automatically), but this filter has serious performance drawbacks and should only be used as a last resort. Three things to try before resorting to AlphaImageLoader:

  1. Try PNG8 for progressively enhanced experience
  2. Try without transparency – if the background is a solid color, convert the image to use the solid color. In imagemagick you can use -flatten for this purpose:
    $ convert source.png -flatten -background yellow result.png
  3. Forget about IE6 :)

If you end up using AlphaImageLoader, make sure you use the underscore hack so that only IE6 users experience the performance degradation.

#some-element {
    background: url(image.png);
    _background: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');

PNGs are bigger than GIFs?

This misconception comes from the fact that people compare truecolor PNG with GIF which is not a fair comparison because you often compare image with thousands of colors (the PNG24) with an image with 256 colors (GIF). Often people work on an image in Photoshop or another program and when they decide to export for the web, they try PNG24, see that it’s bigger and switch to GIF. But in this step GIF may strip a lot of colors. And if you’re going to strip colors, well, PNG8 will give you the same colors and smaller filesize. (Another thing is that sometimes Photoshop does a poor job exporting the PNG8. If the PNG8 looks crappy, but the GIF is OK, then export as a GIF but then convert to PNG with another utility, such as optipng)

Again – PNG8 is the file format comparable to GIF and it’s almost always smaller in filesize than GIF.

Comparing GIF vs. PNG filesizes

(This and the next experiment is something I did over an year ago, bored to death in the middle of the ocean on the board of a Carnival cruise ship, but since then I never really looked at the data. So here’s my chance to flush some old data and clean up 20 Gigs of lets-keep-just-in-case test images :) )

Using Yahoo! image search web service I downloaded some GIFs (matching the queries “logo”, “mail” and “graph”), ended up a little over 1700 images. Then I used optipng to convert them all to PNG and see the results.

I used OptiPNG simply with no special options:

$ optipng *.gif

As the next experiment will show, optipng can do better, so can pngout for example. So consider these results the least you can do to make GIFs smaller (by turning them to PNG)

So some stats from the experiment:

  • The average, median actually, GIF image on the web (last year, judging from this small sample) is 525×388 and has 139 colors (I just love semi-useless stats ;) )
  • The median GIF is 24K
  • After conversion to PNG, the median becomes 18K
  • The median savings from converting all GIFs to PNG is about 23%

Interestingly enough 4% of the images were smaller as GIFs – utter disappointment (and don’t tell anyone!). So I had to try just a little harder. I didn’t run OptiPNG with its best -o7 option, but ran PNGOut instead. The results is that now only 4 of the 1706 images were smaller as GIF. I’m pretty sure that trying a little harder (with PNGSlim, see yesterday’s post) would’ve probably fixed it, but 4 out of 1700 is something I could live with. BTW, the images where OptiPNG failed to produce smaller PNG, then PNGOut converted with the ratio of 21% median savings. Not bad for taming the few shrew GIFs.

BTW, some GIFs lost over 100K of filesize, the max was over almost 600K savings! So, you never know.

If you like to look at numbers, here’s a csv dump – the optipng results and the selected few that ran through PNGout.

So, take-home message: turn your GIFs into PNGs and win at minimum 20% fewer bytes over the network.

Comparing PNG optimizers

For this experiment I downloaded over 12000 images (again, Yahoo! search API) and ran them through a bunch of optimizers, sometimes with different options. In retrospect, it’s probably not that useful of an experiment, because (see previous post) different optimizers specialize in different areas – compression, pre-compression filtering, chunks removal, etc, and your best bet is to run several tools. But still it’s at least some data points (the cvs dump is here)

The images were 1000 matches for each of the searches for “baby”, “background”, “bkg”, “flower”, “graph”, “graphic”, “icon”, “illustration”, “kittens” (of course), “logo”, “monkeys”, “png”, “transparency”. After removing 4xxs, 5xxs and other mishaps and cleaning up a bit, I ended with over 10000 images. I ran them thorough:

  • pngcrush – pngcrush -rem alla -reduce before.png after.png
  • pngcrush-none – to keep all chunks pngcrush -rem none -reduce before.png after.png
  • pngcrush-brute – more filter attempts – pngcrush -rem alla -brute -reduce before.png after.png
  • pngout – pngout /q /y /force before.png after.png. default compression level in PNGOut is “extreme”, so I tried two less extreme below
  • pngout-match – pngout /s2 /q /y /force before.png after.png
  • pngout-intense – pngout /s1 /q /y /force before.png after.png
  • pngrewrite – pngrewrite before.png after.png PNGRewrite only works with PNG8, it also converts truecolor to PNG8 whenever the truecolor happens to be under 256 colors,
  • optipng – optipng before.png -force -out after.png. OptiPNG’s default level is 2 (of 7) so I had to try below and above the default:
  • optipng1 – optipng before.png -o1 -force -out after.png
  • optipng3 – optipng before.png -o3 -force -out after.png
  • optipng7 – optipng before.png -o7 -force -out after.png
  • advpng – cp before.png after.png; advpng -z -f -q after.png
  • advpng-insane – with the “insane” 4th level of compression cp before.png after.png; advpng -z4 -f -q after.png
  • deflopt – cp before.png after.png; deflopt -s -f after.png
  • pngoptimizercl -cp before.png after.png; pngoptimizercl -file:"after.png"

And the results:

Tool Median time to run Median savings Success rate
pngcrush 0.25s 6.06% 93.85%
pngcrush-none 0.23s 5.58% 90.22%
pngcrush-brute 3.08s 8.10% 96.31%
pngout 1.89s 12.21% 94.35%
pngout-match 0.22s 13.89% 44.57%
pngout-intense 1.63s 12.10% 94.22%
pngrewrite 0.07s 29.84% 22.37%
optipng 0.23s 7.32% 93.21%
optipng1 0.10s 4.24% 85.16%
optipng3 0.66s 7.10% 94.26%
optipng7 4.13s 7.57% 94.81%
advpng 0.34s 11.55% 52.47%
advpng-insane 0.76s 15.64% 56.09%
deflopt 0.34s 0.44% 96.94%
pngoptimizercl 0.48s 9.71% 97.99%

“Success rate” is how often the tool managed to produce a smaller result than the original. For example PNGRewrite’s success rate is pretty low, because it only works with up to 256 colors. Median time to run is the median value that the tool takes to optimize one image.

And now, madames et monsieurs, introducing…

Give PNG a chance (.com)

I hope you’ll find this as funny as I do, I thought it was pretty funny, at least in my head :)

My secret goal was that everybody who hears the song or watches the video, will think twice the next time when doing “Save for the Web…” in Photoshop.


Music: Drums from GarageBand, I play two guitars, also bass (a guitar with effect actually) and vocals. If you think you hear a woman’s voice, it’s still me, with “Helium” effect. The MP3 is here. If you want to experiment with the song yourself, here’s a zip with each channel as an MP3.

Video: It may be lousy, but it’s all web dev :) It’s all JavaScript and CSS. The video is a screen capture of the Safari window. Also there are no images, only HTML entities. Heavy use of -webkit-* animations and transitions. The source and a live version you can play in Safari is here. The StarWars-like effect is borrowed from here.

The http://givepngachance.com URL is currently pretty blank, but I intend to add more PNG-related stuff there. Oh, and the lyrics.


Thanks for reading. And watching. And listening. Peace. And give PNG a chance :)


Stoyan (@stoyanstefanov) is a frontend engineer, writer ("JavaScript Patterns", "Object-Oriented JavaScript"), speaker (JSConf, Velocity, Fronteers), toolmaker (Smush.it, YSlow 2.0) and a guitar hero wannabe.

14 Responses to “Give PNG a chance”

  1. The Peach

    great article, especially for the “benchmarks” at the end, I always wanted to write down an article like yours. Do you mind if I translate it (quoting you, of course) in ita and publish in my website?

  2. The Peach

    Almost forgot: the only thing left out by your article seems to be the gamma problem with browsers that interpret it (aka safari) causing web colors to be wrongly seen and causing a lot of stress…

  3. Peter Kamenov

    Extraordinary! :-D

    All the best!

  4. Bennie Mosher

    Awesome article. I greatly appreciate the break down in PNG formats. Thank you so much for this!

  5. Thomas J Bradley

    There is actually another way to make PNG8 files with alpha transparency, not just Fireworks.

    I just found the app the other week, ImageAlpha, by the same guy who creates ImageOptim. It is still in a beta state and only available for Mac, but I have been using it and it works like a charm.


  6. Zack

    Do you have any numbers on how frequently GIF is still used compared to PNG these days?

  7. FPiat

    I use punypng on http://www.gracepointafterfive.com/punypng and it seems have better (a little) results than pngrewrite.

  8. Jay Robinson

    Thanks for the informative article. The video was very cool too. However, I have a concern: The whole song is about images, yet doesn’t use images. Not sure I get the reasoning here.

    If anything, perhaps use amazing images to showcase the motion graphics, then release the source code and source files so everyone could analyze file sizes.

    Or create a webpage version of your video. When someone in Safari visits, the whole “video” experience plays.

  9. jdbartlett

    Stoyan: thanks for the great article, especially the comparison of PNG optimizers! In your testing, have you found that any of them cause problems with 8-bit alpha PNG’s like the ones Fireworks exports?

    Thomas J Bradley: thanks for the link to ImageAlpha.

    Jay: The webpage version of the video is here: http://www.phpied.com/files/pngchance/vid.html – but you’ll need the latest webkit nightly, not Safari.

  10. Stoyan

    @Zack – I don;t have numbers comparing the usage of GIF vs PNG, but it would be interesting to see. I guess an easy way would be to open Fiddler, filter out anything but gif/png and then load all Alexa top 500 sites. At the end there should even be a graph :)

    @Jay Robinson – good point, that was a bit of a concern for me too, the lack of images in the video

    @Thomas J Bradley – ImageAlpha looks good, thanks for sharing. It looks like a GUI on top of PNGNQ and PNGQuant, which is cool, I use pngquant all the time to strip colors from screenshots and convert to png8 and see if the result looks ok. The thing is that the progressive enhancement with PNG8 is hard to do with an automated tool like this. For example a pixel that is 90% transparent and another one that is 10% transparent will be supposed to look very differently. The conversion to PNG8 will keep the transparency, but IE6 will then make both pixels 100% transparent and the image may look ugly. That’s why you need a designer to select with pixels are OK to be gone.

  11. Stoyan

    @The Peach – good point.

    Stripping all extra chunks with pngcrush or any of the other tools removes the gamma chunk as well, so no correction takes place and this solves the problem (by removing a solution :) )

  12. Stoyan

    @The Peach – sure, I’ll be honored if you want to translate the article.

  13. The Peach

    @Stoyan: here it is http://smartart.it/2009/12/20/give-png-chance
    added a couple of more links that appeared here on the comments. Thanks again for your articles ;)

  14. Tim Branyen

    I would love to give PNG a chance, if Microsoft Internet Explorer would give developers a chance. Internet Explorer 8 has a really obnoxious render bug when applying the alpha filter to a PNG that contains alpha transparency. The transparent section will become solid black.

    Only solution I have found is to use belatedpng, but thats hardly a solution since it converts the PNG to VML. Any thoughts on this?

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
And here's a tool to convert HTML entities