Once you sprite your images, the next step is to compress them as much as possible. PNG is a great format for this, but…

Does PNG work everywhere?

Yes, it does! No, it doesn’t! Which PNG?

Photoshop IE6 IE7-8 Safari Mobile Safari Firefox Opera
Paletted with 1-bit alpha
(like GIF)
Yes Yes Yes Yes Yes Yes Yes
24-bit without alpha Yes Yes Yes Yes Yes Yes Yes
Paletted with 8-bit alpha No No Yes Yes Yes Yes Yes
24-bit with 8-bit alpha Yes No Yes Yes Yes Yes Yes
8-bit alpha and CSS opacity
(filter:alpha in IE)
N/A No No Yes Yes Yes Yes
Gamma correction Sometimes sort-of works, but that makes things worse…
ICC color profiles Yes No No Yes No Yes No

PNG supports various combinations of color depth, transparency and color correction. Some combinations work perfectly with every piece of software produced in the last decade, and some more esoteric features are practically useless.

Palette with 1-bit transparency (like GIF)

IE6 IE7-8 Your browser
ok ok ok

GIF-like PNG images with simple transparency are supported in all browsers (even as old as IE4) without any hacks, so whenever you can use GIFdon’t. Use PNG instead.

You’ll get the same quality and compatibility as GIF, but a smaller file size.

24-bit without alpha channel

IE6 IE7-8 Your browser
ok ok ok

24-bit PNG files have perfect quality, but perfection costs a lot of bandwidth. Even though they work in all browsers, don’t use them.

When you need full color, but don’t need transparency, use JPEG instead.

24-bit with 8-bit alpha channel

IE6 IE7-8 Your browser
solid background ok ok

This type is often mistaken for one and only true PNG, and infamously fails in IE6. There are hacks that make it work, but they’re slow and don’t mix well with other CSS properties.

Aside from the IE6 problem, this type creates pretty large files. Avoid it. The silver bullet is below:

Palette with 8-bit alpha channel

Photoshop IE6 IE7-8 Your browser
binary transparency rounded to opaque binary transparency rounded to transparent ok ok

If you’ve only ever used Photoshop, you may believe that this type of PNG cannot exist. In reality it’s just Photoshop’s PNG support lacking.

With this type of PNG you get file sizes smaller than GIF, but retain ability to use several levels of transparency.

In paletted PNGs alpha is not a mask, but only an extra component in each palette entry. Thanks to this it gracefully degrades in IE6 — fully opaque pixels are displayed correctly and other pixels are completely transparent. Usually this means that IE6 will drop smooth edges and shadows, but the image will be good enough:

IE6 Your browser
flat trollface alpha trollface

Use this type of PNG whenever you want semi-transparency. You can create these files with (ex-Macromedia) Fireworks. If you’re stuck with Photoshop, you can convert 24-bit PNGs to 8-bit.

24-bit with 8-bit alpha channel and CSS opacity (filter:alpha in IE)

IE6 IE7-8 Your browser
solid background binary transparency rounded to opaque ok

There’s a combination of transparencies that doesn’t work even in IE8. If you apply filter:alpha(opacity=α) to an image that is transparent already, IE7-8 will revert to 1-bit transparency and apply alpha channel as a black mask.

If possible, instead of relying on CSS, just create an image that is bit more transparent itself. If you’re only using opacity for fade-in/fade-out, you can probably ignore this problem. If you need a workaround, it’s the same as for IE6.

PNG with ICC color profile

IE8, Chrome, Opera, Mobile Safari Firefox, Desktop Safari Your browser
sRGB assumed ok ok

How red is #FF0000? Answer to this nearly-philosophical question depends on the monitor you have, its settings, and even lighting conditions around you.

But what if you wanted colors in PNG to exactly match the color of your shoes? Color profiles are supposed to solve this oh-so-important problem.

In practice they’re not useful on the Web (even when they work right, and they rarely do.)

If anyone asks, images for the Web are expected to be in the sRGB color space with gamma 2.2.

Don’t enable color management in your software, don’t embed ICC profiles when saving for the Web, and use a PNG optimizer to get rid of any profiles that were embedded.

PNG with gamma correction

Matching Mismatched
ok ok

Color intensity goes from 0 to 255. What’s the value of color that looks half as bright as 255? When PNG was young, different systems agreed only on one thing: it was not between 127 and 128.

I’m serious. For monitors half of 255 is not 127.5. It’s 186! (or 173 if you have a previous version of Mac OS X.)

186 looks as bright as pattern of 0 and 255 pixels
If the color 186 doesn’t look almost like the 0/255 pattern, your monitor is miscalibrated or your browser’s scaling algorithm is buggy.

That crazy thing is called gamma correction and the formula for it is:

(color_sane_person_expects ÷ 255)1gamma × 255 = color_that’s_actually_used

It’s not a PNG quirk. The problem dates back to CRT monitors which didn’t display brightness evenly — applying ¾ of maximum voltage gave only ½ of maximum brightness. Some operating systems tried to compensate for this effect, others didn’t.

PNG had good intentions to fix this mess by encoding gamma value of system/monitor that was used to create the image, allowing other systems to adjust brightness accordigly.

This caused a silly problem: most browsers correct colors in PNGs, but nothing else. All colors in GIFs, JPEGs and CSS may be “incorrect”.

To get colors in PNG exactly as “incorrect” as all other colors in the system, you have to remove gamma information from the files, which prevents browsers from making PNGs holier than the pope.

PNG tools

Optimisation

Typical PNG-saving programs trade compression efficiency for speed and don’t refrain from embedding useless or even problematic metadata in the files.

PNG optimizers fix this. PNGOUT removes all junk and gives the best compression. You can also use OptiPNG + Pngcrush combo. They’re commandline tools. If you’d like to optimize images on a Linux server, this is a useful snippet:

find . -name '*.png' -print0 | xargs -P4 -0 -n1 pngout
                                       ↑ number of CPUs

For the mouse-loving people I wrote ImageOptim. It combines all the best image opti­misa­tion tools with drag’n’drop Mac GUI. Trimage is ImageOptim’s Linux cousin. Windows users might use PNGOUTWin or PNGGauntlet.

Whichever method you prefer, always optimize PNGs.

Quantisation

Since Photoshop doesn’t have a full support for PNG with alpha yet, to get small files and nice transparency, you’ll need pngnq or pngquant. I wrote a simple GUI for it: ImageAlpha.

pngnq uses a very cool algorithm based on neural networks. Side-effect of this is that results are a bit random. Sometimes an image with less colors looks better than an image with more colors (try 255, 254, 253 colors, and so on.)

Troubleshooting

Problem Solution
File is huge Use 256-color PNG instead of 24-bit (remember: 256-color type also supports full alpha channel)
File is larger than GIF Use a PNG optimizer
Colors in PNG have diff­erent bright­ness than same colors in CSS or HTML Remove gamma information. PNG optimizers usually do it, e.g.,
pngcrush -rem alla input.png output.png
Colors in PNG are still odd Make sure you use the sRGB color space (experiment with the Convert to the sRGB option in Photoshop when saving for Web)
Image has solid gray background in IE6 Use PNG8+alpha instead of 24-bit
Image is invisible in IE6 Make sure the image has some fully-opaque pixels. Use improved pngquant that supports the -iebug flag
Photoshop displays transparency wrong You’ve got PNG8 with alpha not supported by Photoshop. For editing, keep PNG in 24-bit, and convert to PNG8+alpha only when done. You can convert PNG8 to 24-bit by resaving it in Preview.app, Fireworks or with:
pngout -s1 -c6 -force file.png

Summary

You don’t have to read such a long article to use PNG properly. Quick version:

  • PNG works since IE4. If you’re still using GIF, you’re wasting bandwidth.
  • Use 256-color PNGs.
  • Avoid 24-bit PNGs. Use pngquant if you want to have a cake and eat it too.
  • Use a PNG optimizer. You’ll get smaller files and avoid some pitfalls.
ABOUT THE AUTHOR
Kornel Lesiński photo

(@pornelski). Web developer since “best viewed in AWeb in 640×256.” Creator of ImageOptim. London Standardista.

60 Responses to “PNG that works”

  1. porneL

    I forgot to mention in the article that the nifty icon used as example is based on Mozilla Prism.

  2. stoyan

    Thanks @porneL, it’s an awesome article. And these mouseover background changes really take the points home

  3. Tweets that mention Performance Calendar » PNG that works -- Topsy.com

    [...] This post was mentioned on Twitter by Mrinal Wadhwa, Stoyan Stefanov, JuwalBose, Jeroen van Duffelen, Jean Ximenes and others. Jean Ximenes said: Performance calendar day 16: PNG that works by @pornelski http://perfplanet.com/201016 [...]

  4. Kyle Simpson

    Really an excellent article. I learned a ton. Thanks so much for writing it!

    The only thing I’d say is, on your chart, the “paletted with 8-bit alpha” row, for IE6… I know technically IE6 doesn’t support the alpha, but saying “No” is also misleading in that IE6 does sorta support that format by at least gracefully dropping unrecognizable pixels. As you point out, this is a great choice with a somewhat reasonable fallback for IE6. I’d change the “No” to “Sorta” or something, to indicate that the option has pretty decent support, even if diminished in IE6.

  5. PNG 現況整理… | Gea-Suan Lin's BLOG

    [...] Opt-out 改成 Opt-inPNG 現況整理… Posted on December 18, 2010 by Gea-Suan Lin「Does PNG work everywhere?」這篇文章把 PNG [...]

  6. GreLI

    Great post! But for «Image has solid gray background in IE6» another one solution exists. You can set background property for PNG (bKGD) using TweakPNG e.g. white. And IE6 will use this color instead of gray. It’s handy for graceful degradation without losing beauty shadows, anti-aliasing e.t.c. All you need is a plain one color background. I think it’s ok for IE6 to achieve maximum quality with minimum cost (not involving filters and so on).

  7. GreLI

    Also in case of very small one or few color images such as small icons GIF can win PNG in size (I mean already optimized). So it’s hard to achieve PNG image less then 100 bytes, but the same GIF can have just about 50 bytes. It’s somewhat worth and noticeable when you encode such images as base64 data:uri (mhtml can be used in case of IE7−).

  8. Eric Lawrence

    Why not mention that native CSS Opacity and PNG Transparency get along just fine in IE9?

  9. porneL

    @Kyle: I thought about that, but OTOH Photoshop has similar bug, so it was hard to judge how many “Sortas” should be there. Hopefully detailed explanation later makes up for it.

    @GreLI: I haven’t expected bKGD to work. Thanks for that tip!

    @Eric: that’s sublty implied by “IE7-8” in the tables :)

  10. Mr. Fussyfont

    Superb article. BTW, Fireworks is an excellent tool for image optimization and supports more versions of PNG than Photoshop.

  11. Meanwhile in Gotham City ← pseudopost.org

    [...] Shared Performance Calendar » PNG that works. [...]

  12. ArtedeMagia.com

    How is the support for PNG by Gimp?

    I’ve played with it and it looks like it can save to Palette with alpha channel, but I didn’t found how to save more than one bit of alpha, just transparent or opaque.

    I would appreciate if you say explicitly that “Palette” is the same as “256 indexed color”.

    In the section about that, is said “Palette” and in the summary says just “256 color”.

  13. Advent Explosion :: Jasongraphix

    [...] PNG That Works by Kornel Lesiński [...]

  14. Miszka

    What’s up with IE9? All pngs work fine here

  15. PNG现状整理. - CssRain-前端技术 - 读者的进步速度远大于博客的进步速度。

    [...] PNG现状整理:http://calendar.perfplanet.com/2010/png-that-works/ [...]

  16. Today, is it still necessary to refrain from using the 24-bit PNG because of backward compatibility with older browsers? - Quora

    [...] "Avoid 24-bit PNGs. Use pngquant if you want to have a cake and eat it too." See http://calendar.perfplanet.com/2… . The main reason against 24-bit PNGs is mostly filesize. Many people accept this downside to get [...]

  17. Stu

    I’m gonna have all my bitches read this article so they can call themselves designers. Do we have a virus built yet that can erase all instances of ie across the globe? That would take care of so many problems.

  18. Μr.子灵 -很喜欢火狐,于是就有了 | 关于PNG【转】

    [...] PNG现状整理:http://calendar.perfplanet.com/2010/png-that-works/ [...]

  19. richtaur

    Yay, useful, thanks! Though internally I told IE to go F itself long ago ;)

  20. links for 2011-02-03 - Maven Services

    [...] PNG that works (tags: Image.PNG) // Uncategorized none [...]

  21. Peter Dunning

    who gives a fuck what ie6 supports? ie6 can go to hell forever.

  22. Alexander

    bookmarked. thank you!

  23. Ivan

    I’ve noticed problems with transparent PNGs on Windows Phone 7 (IE7 apparently). Sometimes the transparent parts display as black.

  24. balls

    Outdated even at the date of publishing: no IE9 beta nor Chrome. Also, state the versions of each browser you use!

  25. Kyle

    As useful as this article is, we don’t really need to see a giant picture of your face

  26. Visa to Offer Person-to-person Payments (to compete with PayPal) « V E X E D

    [...] approaches to mobile couponing Microsoft both embraces and shuns Google’s open video codec Full guide to PNG compatibility Google for Nonprofits, “You’re changing the world. We want to help.” Code Standards [...]

  27. ryan

    Great article but you should put your nice summary at the top.

  28. Brajeshwar

    This is a brilliant. Thanks a lot for such an insight.
    However, ImageOptim have been my tool for quite sometime and its brilliant.

  29. Renaud

    Excellent write-up and resource on PNG.
    The variations in PNG support are maddening but hopefully things are getting better.
    Thanks for taking the time to put this together.

  30. Compression de PNG « chto.fr

    [...] Alors que j’étais totalement coincé pour un problème de PNG qui se dégradait avec la fonction jquery.slow(). fvsch du forum AlsaCreation m’a orienté vers un site intéressant sur les PNG. [...]

  31. Web designer

    Except on the 8bit png part, I agree with your tips. Quite honestly, the bandwith gains you would expect by using 8 bit colour palletes won’t be that great, and they come at the cost of colour fidelity.
    Just as IE6 is dead, so should be 256 colour images. Really, the world has been 24+8 for almost 15 years

  32. PNG och alfakanaler « Teknikbloggen

    [...] En intressant artikel om PNG-filer och alfakanaler kan ni läsa här. [...]

  33. Abraão Coelho

    A little bit late but not too much to ask… Considering this possibility, why use PNG24 from Photoshop or PNG32 from Fireworks?

    I made a few tests and the exported PNG8 images are virtually the same as the ones exported as PNG24… And I tried it with complex textures and shadings…

    Maybe not exactly the same but the quality loss is almost none when showing up on a browser…

  34. PNG Compressor – сжимаем png-файлы парой кликов | Программы для Mac

    [...] и придет программа PNG Compressor использующая движок OptiPNG, которая заменит вам консольную команду pngcrush. Зеленым [...]

  35. Webguide for you

    I like the helpful information you provide in your articles. I’ll bookmark your blog and test again here frequently. I am moderately certain I will be told many new stuff right right here! Best of luck for the following!

  36. ImageOptim | Gaston Figueroa

    [...] like to know more about how this tool and PNG compression work I would highly recommend reading this post by ImageOptim’s developer Kornel Lesiński. This entry was posted in Apps, Tools and tagged [...]

  37. ImageAlpha — с 24 бит на 8 бит | Web-Grower.ru

    [...] изображения, способ сжатия (подробно объяснены в статье автора). К сожалению, программка пока что доступна только для [...]

  38. 合理处理图片的格式和大小

    [...] 当然对于一款要做到精致的新闻类应用,图片的Alpha通道是不能少的,像圆角啊,阴影啊这些效果在JPEG上就表现不出来,所以这一篇文章就专门分析了一下PNG图片。原文不长,也没有什么难理解的概念,故不做翻译,只是抽取其中一些比较有用的东西。这篇文章主要是针对Web开发者的,因此侧重于各大浏览器对PNG的表现形式,尤其是IE。这个我倒不怎么关心。我关注的主要在于: [...]

  39. Salem

    Hi I Just want To thank you for this amazing tool it was very helpful for me
    Reduce my site banner from 174KB To 71KB which is unbelievable specially when I try every Option with Photoshop No hob until I find your tool
    Thanks again .

  40. PNG现状整理 | 酷爱前端 | 沙拉酷儿

    [...] PNG现状整理:http://calendar.perfplanet.com/2010/png-that-works/ [...]

  41. QCK Team Reader – Front-end Code Standards & Best Practices

    [...] Detailed information on the PNG format, browser support, and the pros and cons of each can befound in this excellent article. [...]

  42. Reg

    Love this tool Kornel!

    A question though. Is there a wayto revert 8-bit images to their former 24-bit glory? I’ve cranked up the colours in ImageAlpha to 2^24, then saved the product, but it still opens as indexed colour in my image editor (Photoshop).

    Cheers, Reg

  43. Drawing Business » Blog Archive » PNG format fun

    [...] my previous post on ImageOptim (a free Mac application for reducing PNG file size), I came across a fascinating article about the PNG format, written by Kornel Lesinski, the author of [...]

  44. Saving the world with image optimization. | Tune Development

    [...] If you’re a designer, you’re probably on a Mac.  There are tons of apps and websites that offer this type of optimization but there’s one app in particular that I’d like to recommend.  It’s called ImageOptim and it can be downloaded from http://imageoptim.com/.  If you’d like more information about how this program can make PNG files so small, see the developer’s fantastic post PNG that works. [...]

  45. Noticias 07-08-2012 - La Web de Programación

    [...] Tabla de compatibilidad de PNG y los distintos navegadores. [...]

  46. Third Post - Tune Development

    [...] about how this program can make PNG files so small, see the developer’s fantastic post PNG that Works.Here are the three main reasons I love this app.I never have to worry about the appearance of an [...]

  47. ImageAlpha — с 24 бит на 8 бит - Web-Grower.ru

    [...] изображения, способ сжатия (подробно объяснены в статье автора). К сожалению, программка пока что доступна только для [...]

  48. Web Development

    [...] Performance Calendar » PNG that works [...]

  49. Uuhm Woynhs

    Hey I am seeing a JScript alert sometimes when I first come to your web-page but only when I use IE9. I thought you may want to know. Best wishes

  50. Front End Code Standards and Best Practices | Design To Web

    [...] Detailed information on the PNG format, browser support, and the pros and cons of each can be found in this excellent article. [...]

  51. i am ian wright | YogCraft and Server Texture Packs

    [...] to optimize PNG files which might help reduce the file size. A guy called Kornel Lesiński (who knows a lot about PNGs) has made them more user friendly by making a free drag and drop PNG optimiser called ImageOptim. I [...]

  52. YogCraft and Server Texture Packs | i am ian wright

    [...] to optimize PNG files which might help reduce the file size. A guy called Kornel Lesiński (who knows a lot about PNGs) has made them more user friendly by making a free drag and drop PNG optimiser called ImageOptim. I [...]

  53. Piotr Grochowski

    Photoshop does not work correctly with paletted with 1-bit alpha
    (like GIF). (dead) html link: http://realpng.manifo.com/ (displayed in polish)

  54. Front-End Development Guidelines | inSegment Knowledgebase

    […] Detailed information on the PNG format, browser support, and the pros and cons of each is covered in this article. […]

  55. Ignacio Garnica

    Perfect evaluation, png is the king

  56. 20 Excellent Tools for Optimizing Your Images | SKiL | Official Web Site | My Wordpress Blog

    […] alpha transparency. Generated images are compatible with all modern web browsers, and have better fallback inIE6 than […]

  57. Deathcore

    thanks Kornel, now I’m working my png images :D

  58. Image Compression for the Rest of Us | Thoughts from a Robot | Design, Automation, and Marketing

    […] images at reasonable file sizes.  If you’re curious about how PNGs are supported, check out PNG that works by @pornelski maker of […]

  59. Saving the world with image optimization. - Tune Development

    […] I’ve been singing the praises of ImageOptim for some time now and figured it was my turn to tell the world about it. If you’d like more information about how this program can make PNG files so small, see the developer’s fantastic post PNG that Works. […]

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