Grow your CSS skills. Land your dream job.

Misconceptions about PNG

Published by Chris Coyier

misconceptionsaboutpng.png

1. PNG is great, but I can't use them because they don't work in Internet Explorer.

This is one is almost entirely false. PNGs of any flavor will display in Internet Explorer, even back to some pretty old versions. The problem here is the alpha transparency of PNG-24's doesn't work in IE 6. That's it. if you don't need alpha transparency, you can do anything with PNG in IE that you could in any other browser. If you DO need alpha transparency, even that isn't too big of a deal as there are lots of ways to deal with it.

2. PNG has the smallest file sizes.

When comparing GIF to PNG-8, PNG-8 often has better compression. Not always, but often. But if you are talking about PNG-24 (The ones with alpha transparency), they never have the smallest file sizes. In fact, they are often nasty large and huge culprits for slow loading pages.

3. PNG has better color

Again, this is an attribute of PNG-24 only. PNG-24's have great color. PNG-24 even has lossless compression, meaning you can save it over and over and never lose quality! But of course it comes at the expense of file size. PNG-8's use the same color-indexing and have the same color limitations GIF does.

4. PNG is the all-around best format.

Completely false. Each of the three major image formats, JPG, GIF and PNG, all still have their place as the best format for the job. For photographic images JPG still cannot be beat in terms of file size. PNG-24 can replicate the quality, but at several times the file size. PNG-8 beats GIF almost all the time, but PNG can't do animation at all, so any time that is needed GIF is your format.

For more information on when to use which format, check out this post from the archives. Also, here is a pretty great article on creative uses for PNG.

Comments

  1. Permalink to comment#

    We have got apng for animated pngs, (http://en.wikipedia.org/wiki/Apng). It’s implemented in Firefox 3.

  2. Permalink to comment#

    Opera 9.5 will support the aPNG on web pages and in skins, too.

  3. “But if you are talking about PNG-24 (The ones with alpha transparency), they never have the smallest file sizes.”
    Wrong. http://phoenity.com/newtedge/gradient_effect/

  4. Permalink to comment#

    Ok that was useful! I wasn’t beware that the trasparency problem is solved, nice :o)

  5. Permalink to comment#

    Everyone is experiancing it Just like you, a part of a designers life the .png and its compatability

  6. Amit
    Permalink to comment#

    I dont think this is right…PNG IS actually the best image format…..there is always some image loss in JPG. Incase you want to keep the JPG (purely loss-less), the image size will be really huge (if not as big as ING). Although PNG images are huge in size, they still give you the best quality (by far)….

    Who uses PNG-8???? Never heard any one using it….

  7. Anonymous
    Permalink to comment#

    APNG will be supported in Firefox and Opera, but that is no guarantee that the format will gain a foothold. The official PNG group has already rejected it as the official animation extension and is evaluating several other formats.

    Binary transparency has been supported in IE6 and alpha transparency has been supported in IE7. There is a problem with getting the right color consistency across all browsers because of gamma correction. Internet Explorer applies gamma correction to the image while the other browsers don’t. While Microsoft technically isn’t doing anything wrong, it deviates from what other browsers do. The solution right now is to save PNGs without any gamma correction information, or save files as GIFs if you don’t need more than 8 bits of color.

    Amit, JPG is better for photographs while GIF/PNG are better for images with large areas of solid color. For photographs, JPG will drastically reduce the sizes of files. PNG-8 is not a special format. Rather it is a PNG saved with 8 bits of color (which is the maximum that GIF can hold) rather than the usual 24 bits. Of course files with more colors will be larger than those with fewer colors. Your comment illustrates why the myth that PNGs are larger than GIFs persists.

  8. she
    Permalink to comment#

    i think you are too harsh. overall, i would say png is still the best format by a fair margin. (and i talk mostly about quality vs. size in most use cases as a trade off)

  9. I didn’t even know about that APNG thing, seems like a good thing. I like that is is backwards compatible so that non supporting browsers will still get the “first frame” image. I’m all about forward-enhancement.

    @Lim Chee Aun: That’s pretty interesting! I guess there is a very isolated instance where PNG-24 is the smallest file size (as well as highest quality). Still, in general, PNG-24 are monsters in file size.

    @Amit: PNG-8 is probably the most heavily used PNG out there right now. When you hear people say that PNG has “smaller file sizes than GIF”, they are talking about PNG-8.

  10. Nice article Chris.

    However, straying away from the topic to make a point, when I develop flash movies, I always tend to use PNGs for graphics. They just seem to render faster even though the original GIF file size is almost the same. True enough, then again, it might just be the file size. But it’s fast.

    If you’re really not into PNG though you think it’s waste saving the graphic in GIF format which usually uses 24-bits, you can always optimize it. Reduce the colors to the ones that are in use. I usually use Photoshop’s “Save for Web” feature for this. It can drastically reduce the file size of a GIF or a JPEG. But the case with JPEG is, it usually plays around with the quality of the image. Not with GIF. You can reduce the colors in use and reduce the file size while keeping the quality intact.

  11. John Johansson
    Permalink to comment#

    I’m surprised that items 2-4 are still discussed and that it’s properties doesn’t seem to be common knowledge. I just mean, PNG is more than 10 years old and has been used in browser for nearly all that time. Regarding item 1, Internet Explorer 6 could have been better…
    I’m still waiting for jpeg2000 to take of with it’s superb compression and versatility. :-)

  12. As a web developer, I’m always trying to get the best quality image at the smallest size.

    For images that don’t have many colours, PNG-8 is the way to go. I use Adobe/Macromedia’s Fireworks for my web images and it consistenly creates PNG-8 files that are smaller than GIFs. The only time I’d use GIF anymore would be for animation.

    Of course, as mentioned above, for images with lots of colours (like photographs) jpegs are the way to go, as PNG-24 or 32 are much too big.

    Mindblogger, Fireworks only saves the colours in use as well (or you can reduce it even further and try it with less colours than it actually uses). It can do this for both GIF and PNG-8. With JPEGs you can’t just remove colours, you have to specify a quality using percent. Anyway, Photoshop and Fireworks are from the same company, but if you create a lot of Web Graphics, Fireworks is better than Photoshop in my opinion.

    Lim Chee Aun, The Gradient Effect contest is a little bit of a cheat, because the images don’t actually contain that many colours. Saving the winning image as PNG-8 with an Exact palette shows that there are actually 256 colours in the image, so even though it it’s saved as PNG-24, it not actually making use of all those colours it could store. Interestingly, saving it as PNG-8 results in a file that’s slightly larger than PNG-24, which is surprising… Anyway, I totally agree that PNG is the best format for images without many colours.

  13. @Chris: It is not quite isolated though. Somehow, for images especially with simple gradients/lines/stripes, PNG-24 can produce very small file sizes. Such visual decorations are very common in web sites nowadays, so they could actually use PNG-24 if they realise this.

  14. @Chris : You said that the only problem with png 24 was ie 6 having problems with the transparency, but that’s not the only problem.

    Internet Explorer has a delta with color rendering, see for example :
    >> http://untitled-document.info/tests/ie_png/
    If you see a little square, there’s a problem since the image and the background are the same color.

  15. I thought I read somewhere that photoshop notoriously makes large PNG-24 files because it embeds a whole bunch of stuff you don’t need.

  16. Mike
    Permalink to comment#

    you can view some of solutions for png on http://stylizedweb.com/2007/12/30/png-transparency-issues/

  17. Great header for this post!

  18. Lim Chee Aun is right about 24-bit PNGs sometimes being smaller than their 8-bit counterparts. This is because 8-bit files have to save a palette as well as the bitmap image data, where as in a 24-bit file, the colour and bitmap data is combined. For images with only a few colours, 24-bit is often smaller. I just wrote an article about optimizing PNGs for the web and include this observation:

    http://www.friskdesign.com/blog/2008/03/19/optimizing-png-for-the-web/

  19. Great article, thanks for sharing that Matthew.

  20. Twiny
    Permalink to comment#

    Just so there is no mistake, PNG-24 can be used WITH or WITHOUT alpha channel (transparency), if choose to do opacity levels in your PNG image, it is written, for each pixel, with 24 bits for color (3×8) and 8 bits for transparency > so you have a 32 bits PNG with 255 levels of transparency.

    Please stop “talking about PNG-24 (The ones with alpha transparency)”, it is wrong…

    PNG-8 transparency exists too… (no alpha levels, complete transparency or complete opacity)

    Best regards.

  21. Wow, and I thought *I* was pedantic. :-) You’re right of course, Twiny, though I think most people discussing PNG know these differences by now.

  22. Permalink to comment#

    it’s really great. thanks

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".