Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

A PNG Review

June 09, 2003

Eleven days from now, the patent on LZW compression forming the basis of the GIF file format is set to expire, according to C|Net. They question whether this means the death of the PNG file format.

Not hardly.

PNG and GIF are not two competing file formats in a situation where you have to choose one or the other. They’re not black and white; they’re regular and extra strength.

PNG was created in reaction to the draconian licensing scheme Unisys imposed: creators of any software supporting GIF had to cough up a $5,000 surcharge whether their software was free or otherwise. This from a previously–open file format that was theoretically free to use. PNG was built in part to provide a free alternative, but also to better meet the needs of designers.

Now the licensing bait has been pulled out of PNG’s arsenal, so the only reason to adapt is technical. As we are all well aware, Microsoft’s Internet Explorer is the only modern browser that doesn’t support the alpha transparency that PNG offers. This, however, is not a reason to shun PNG until the situation improves. In a bout of ‘the grass is always greener’, I believe we’ve forgotten what it can and can’t do today. A brief summary is in order.

PNG, pronounced ‘ping’, is available in 3 flavours: true colour, grayscale, and palette–based. The former is better known as PNG–24, the latter as PNG–8 (24 and 8 bits per pixel, respectively) and these are the two that will concern us for now. 1–bit transparency means every pixel is either completely transparent, or completely opaque. 8–bit transparency means every pixel has an opacity value from 0 to 255, where 0 is completely transparent and 255 is completely opaque. Also see the accompanying PNG test suite.

PNG–8

PNG–8 is the GIF replacement. Allowing for custom–palette images ranging from 2– to 256–colour, it also offers a 1–bit transparency. This is exactly what GIF does, minus any hint of animation. File sizes are smaller, and support is consistent amongst all modern browsers. If you are using GIFs, there is absolutely no reason not to consider using PNG–8.

However, after considering it, there are still reasons why you may not want to actually use it. If you are exporting your images from Photoshop, you will consistently notice that your file sizes for equal PNGs are larger than the comparable GIF. This is a limitation of Photoshop, and highlights weak PNG support rather than any problem with the format itself. Work–arounds are possible by exporting from another more capable program like Fireworks, but that adds an extra step to the process.

See the first couple of comments to this article for plug–ins and third–party applications that get around Photoshop’s flaw.

PNG–24

Now we come to the heart of the matter. PNG–24 is the one we all want to use. Internet Explorer doesn’t support alpha transparency properly as we’re aware, which renders the main reason we wish to use it null and void. Such a great loss, we lament.

Except that we forget to consider also that PNG–24 is a lossless compression format, and in most cases we wouldn’t be able to accomplish what we’re dreaming anyway. Why? File sizes, my friend. If you compress a 400x200 image into a 25k JPG, you’re reasonably happy. That same image as a PNG with an alpha channel might hit 150k if you’re lucky, while 200k is more likely. A lossy PNG–24 will never exist either, because an alpha channel with compression artifacts would lead to randomly transparent pixels – something that is definitely not desirable.

PNG–24 is certainly great for some effects, and allows for amazing visual eye candy. But you will never build whole sites with it, not while bandwidth is a concern. It will remain a niche format even when widely supported, to be used only in situations when the 1–bit transparency of PNG–8 or GIF won’t quite suit the bill.

Other PNG Features

PNG offers plenty of extra features including gamma correction, lossless compression, 48–bit colour, alpha transparency, and even multi–image files (animations, anyone?) via the MNG extension to the format.

48–bit colour is absolutely useless on–screen. Your monitor displays 256 levels in each red, green, and blue channel per pixel. Each channel is represented as a single byte, hence 8 bits (1 byte) times 3 channels equals 24 bit colour. The next jump up to 48–bit colour involves doubling the bits per channel. A 16 bit red channel does not mean 512 levels of red though, it actually means 65,536. No monitor on earth displays that many levels per channel, and any advantages of having the extra colour are only realized when working in different colour models (which does us no good on the web).

I question the need for per–image gamma adjustment (as opposed to per-page) but I can see some practical applications of it, when considered outside of the context of the web page. Not every application of a graphic file is web–oriented. You may never use some of these features, but other graphics professionals may be hard–pressed to ignore them.

Conclusions

So we’re in a funny spot. We can use PNG on the web, but not fully. With a bit of elbow grease we can start using PNG–8 as the GIF replacement it was always meant to become. But that bit of extra work means it’s almost a sure bet that most professionals will avoid the challenge for now. A valuable addendum to the alpha transparency pressure on Microsoft might be found in calling on Adobe to work better optimization techniques into their software for PNG–8. Both issues are equal hindrances for PNG adoption.

PNG may gain dominance sooner or later, but despite it all, the 16 year old GIF file format is going strong. And while the patent news is good for the Free Web, it doesn’t mean PNG is going anywhere.

Comments are open on the Second Edition of the PNG specification until June 23rd, 2003.


Reader Comments

1
Lach says:
June 10, 01h

With regards to the lousy Photoshop compression issue, a utility like PNG-crush can always come in handy.

2
Mike says:
June 10, 07h

WRT to the size issue, SuperPNG is a free Photoshop plugin that does a much better job of compression.

Internet Explorer can do alpha PNGs as well using some ugly hacks. My personal favorite is this PNG behaviour, which is fairly easy to implement - the downside being that it only works on images specified in the HTML document (foreground images). A List Apart also featured an extensive PNG hacking article - which frankly turned my feeble brain to cheese. :)

I’m a fan of PNG and have been experimenting with it for awhile now, and using it where possible. With any luck bandwidth and browser support will come together in the near future to make using them possible.

3
June 11, 02h

Maybe widespread PNG support would happed sooner if the WaSP took up the issue, like they did with other standards. – Minh Nguyễn

4
Mike says:
June 11, 03h

An interesting little tidbit. Due to bloat and poor coding, MNG (the format that allows animated PNG’s) was removed from Mozilla’s trunk. I believe that MNG is still in for 1.4, so that means that Netscape’s and AOL’s (assuming…) next version should be able to use it. Since Camino doesn’t build from the tree, they should still have it until next time they grab the tree. However, new versions Mozilla Firebird and future versions of Mozilla won’t have that.

Basically, they said that nobody uses MNG, and the MNG decoder was the size of all the other image decoders combined (it statically used the JPEG decoder for instance).

5
Dave S. says:
June 11, 07h

I downloaded SuperPNG to see what it could do, but it only seems to spit out true-colour PNGs. So that doesn’t do much about PNG-8, which is a shame cause I’d rather have a plug-in than a third-party app. And PNG-crush is just plain silly — a command-line interface for an imaging tool? No thanks. The quest continues.

Minh - possibly. But the difference between solid CSS support and solid PNG support is that I can theoretically do my job well without the latter. Between XHTML, CSS, DOM, and PNG, I’d easily throw out PNG as the least important. WaSP had enough of a battle with the other three, let’s not fault them for that.

Mike - So I’ve heard. Sad, but true. You can’t fault their reasoning, I have yet to see a single MNG in the wild, but it strikes me as poor planning to just discard working code.

6
June 11, 08h

There are quite a few problems with PNGCrush. For one, you have to start with a bitmap: it only converts BMP files into PNG. Second, since it’s a command line tool, the interface is atrocious. You’re kind of expected to know the different kinds of compression (up, average, subsample, etc.) and somehow have the time to fiddle with these settings endlessly until you get something that works.

I decided to use PNGCrush to compress a 24-bit-color BMP file to a 24-bit-color PNG. The resulting file size was bigger than with Photoshop 7, even with maximum compression enabled. Heck I tried every setting possible, and Photoshop’s file size is still smaller. Same was true with an 8-bit-color PNG. In addition, PNGCrush can only convert BMPs using 24-bit or 8-bit color.

I think PNGCrush is primarily designed for research settings where students and researchers will be converting large sets of test images into PNG files.

7
June 11, 08h

Hmmm. I just did another test with Photoshop 7, this time comparing file sizes when saving as an 8-bit color PNG versus saving as a GIF. There doesn’t seem to be any appreciable difference. Sometimes the PNG is smaller by a wee bit (a couple of hundred bytes), sometimes the GIF is smaller by the same amount. Maybe Photoshop 7’s PNG engine has been redesigned.

8
Dave S. says:
June 11, 09h

After having used it myself 0 times and evaluating it solely on lack of features and hearsay, I’m going to save everyone a lot of time and declare PNGCrush useless for my workflow, and probably most other people’s as well.

Anyone wanna step up with another option?

9
Sander says:
June 12, 01h

I discovered that SuperPNG does work as 8-bit PNG, by first converting your image file to indexed color and then saving as PNG. It’s too cubersome though, I wish it replaced the Save for web PNG8/24 instead, since now I can’t remove similar colors to gain better compression myself, which is one of the best features of save for web imho.

It’s unbelievable that so many years after PNG is a standard it’s still not supported well in web browsers, but the fact it isn’t well supported in capable imaging applications is just unreal. If the support in the latter apps would be better, support in webbrowsers wold just be a question of time.

Makes you think what other echnologies nowadays aren’t used to their full potential (perhaps as a strategic / marketing decision). bleh.

10
Jan Söderback says:
June 12, 02h

Some quick testing shows that pngcrush (version 1.5.10-MMX) reduces the size of a Photoshop 6-saved PNG by 10-20% in most cases.

The program is invoked as

pngcrush infile.png outfile.png

to crush one file or

pngcrush -d output_directory <filelist>

to process a batch of files. (There are a bunch of other options, but they usually aren’t necessary.)

(Why can’t I use <kbd> or <code>?)

11
Mike says:
June 12, 04h

I downloaded SuperPNG to see what it could do, but it only seems to spit out true-colour PNGs.

I’ve been using Photoshop’s Save for Web for 8-bit PNGs, and like Sherif, see little difference between them and GIFs WRT file sizes.

I guess the only real reason to use them anyway is to promote an open format, are there real advantages to 8-bit PNGs over GIFs?

I find pngcrush to be useless for me too, because I need to use it on the command line in OS X. So in short, use Save for Web for 8-bit PNGs and SuperPNG for true-color PNGs.

BTW one thing I’ve noticed is that SuperPNG true-color files often appear larger in the Finder because PS saves a preview with them as well. This may only occur in OS X, but they shrink when I upload them to an FTP server.

12
Dave S. says:
June 12, 06h

I guess the only real reason to use them anyway is to promote an open format, are there real advantages to 8-bit PNGs over GIFs?

Theoretically, they’re smaller, If you have a program that exports them properly a PNG-8 should be x% smaller than the same GIF. I don’t know what x is, but 20% feels safe, 40 or 50% in extreme cases perhaps.

13
Dave S. says:
June 12, 06h

Jan — because that’s what Movable Type defaults to. I haven’t felt up to mucking around with it and figuring out what it does and doesn’t strip by default. One day.

14
Mitchell says:
June 13, 03h

Dave stated that png-8 has 1bit transparency. I’m not sure how it works, but when you select png-8 export form Fireworks, you can choose alpha transparency and have multiple shades of transparency. So it would seem that it offers more than 1 bit transparency?

15
Dave S. says:
June 13, 03h

Mitchell - wow, you’re absolutely right! I had no idea.

PNG features, straight from the PNG home page:

8- and 16-bit-per-sample (that is, 24- and 48-bit) truecolor support
full alpha transparency in 8- and 16-bit modes, not just simple on-off transparency like GIF


So that would mean that we can have both on-off transparency, and full alpha, whether we’re using 4 colours in our image or millions. Smooth…

Why, oh why, Microsoft?

(and I’m noticing that I’m eating a lot of crow in response to this post… good. Learning’s always good.)

16
cybarber says:
June 13, 04h

NEW way to Express PNG-ALPHA in IE.

Apart from the AlphaImageLoaderFilter there is one other very easy and usefull way to have Alpha-PNG expressed in Internet Explorer, that is using Vector Markup Language (VML).

I discovered last year that the VML Fill element expresses Alpha-PNG natively, hardly anyone seems to know this.
I have made some demonstration compositions in the DHTML newsgroups.

Tomorrow June 14 I will place some examples of XHTML-VML-SMIL animations (in FullscreenPopup aswell) on my webpage.I will place a link to PNG’s on http://cybarber.ath.cx/index.htm.
On my LivingActor demo/test page I am using already some cool PNG’s in VML containers. http://cybarber.ath.cx/CantocheIEOnly.htm


(by the way I am looking for stunning PNG alpha images. links?)

Cybarber

17
Dave S. says:
June 13, 04h

Give this a shot. Just some cheesy layer effects courtesy of Photoshop, but it has a transparency window in the middle that might look interesting over some text.

I’m interested in seeing what you’ll come up with. I’m assuming you mean SVG, instead of VML though…?

18
cybarber says:
June 13, 05h

No I mean VML as I prefere VML above SVG as it is natively supported by IE. Apart from the stunning filter effects of SVG (Although very slow to render) VML can do about the same. (Used Adobe’s Behavior class version of its renderer a while for embedded inline SVG in IE but that version of SVG3.0 is buggy as confirmed by Adobe.)

Anyway. Have to saleep now but I have one example of a PNG in a VML rect. The page uses SAPI4 and TTS engine on top of that so be prepaired. Tomorrow I’ ll post some others. Including some JScript-SMIl animations in Fullscreen)

http://cybarber.ath.cx/PNG-IE-VML-SAPI4.htm

Cybarber

19
cybarber says:
June 13, 05h

You will see now your article (read aloud in english by SAPI4 TTS) with the image you recommended under that link. I will let the image animate over the page. in some ellips like path.

cybarber

20
cybarber says:
June 13, 06h

Okay your article ad the PNG is online.
I will post my changes in my RSS feed tomorrow.

http://cybarber.ath.cx/RSSCybarber.xml

Cybarber

21
Dave S. says:
June 13, 08h

Well, I’ve been screwing around with your code for the past hour, and doing a bit of Googling to support what I’ve found. My simpler test, without the vocalization (what’s up with that, anyway?)

Problem being that VML was a Microsoft-dominated submission to the W3 for consideration, and never went any further. So it’s supported in IE, but it’s about as non-standard as you can get.

It’s actually an application of XML though. Which leads me to think there might be some way to rig it into a valid XHTML page. I have no confidence that any other browser would support it, but who knows - maybe with a bit of scripting it could become a more standards-based PNG solution than Michael Lovitt’s IE Filter hack.

Interesting possibility, William, thanks for bringing it up. I can’t go any futher with it given my complete lack of knowledge of XML, but here’s hoping someone else can take this discussion and run with it.

22
Dave S. says:
June 13, 10h

Noting here for the archives: I found a similar article by Mark Pilgrim that links a few resources.

It seems that I may have written off PNGcrush a bit early. Rather than use it to build my PNGs, I have the option of batch-compressing, say, all PNGs in a directory. You know, that’s not such a difficult step to take: Export from Photoshop as PNG, then crunch further before launching.

23
Jan! says:
June 13, 11h

PNG and GIF are not two competing file formats in a situation where you have to choose one or the other. They’re not black and white; they’re regular and extra strength.

Yikes, for a minute I thought you were talking about them respectively, with PNG being the regular and GIF the extra strength. :-)

24
cybarber says:
June 14, 01h

Dave,
Reading Back feature is unrelated to the PNG issue, but that was the first sample I dug up from my archives yeserday. (If you install the Sapi4 runtimes (not installed on XP by default) from www.microsoft.com/msagent ) and you have the truvoice TTS installed , you will hear your text read back and the word spoken highlighted, it is so Coool).

VML is abit of amother/elder Sister of SVG and it didn’t make in W3C circles all the way while SVG did, however as over 90% of browser usage is IE5 to IE6 , I and the rest of the 90% web surfers are not concerned with other browsers. (In secret I have fallen in love with Firebird though these last two weeks).

As you can see from your simplified test page , it is very easy to use in IE, check back to my RSS feed today or the links at http://cybarber.ath.cx/index.htm for some other PNG-VML_SMIL compositions.

Cybarber

25
cybarber says:
June 15, 05h

http://cybarber.ath.cx/PNGQueryXpath.htm

As promissed I made a pretty cool demo of things PNG, VML, XML, Xpath, XSLT, RSS and a nifty drag and drop for a VML container to the greater glory of Internet Explorer.

If it is just for simply browsing of css styled text and images without too much fancy stuff, I go for Firebird now as with all its extensions it is a real userfriendly browsers. But for the real multimodal Dynamic adventure on the edge there is only IE6, but its good to have some competition again.

Cybarber

26
Trollhunter says:
June 16, 02h

> For one, you have to start with a bitmap: it only converts BMP files into PNG. […]
> In addition, PNGCrush can only convert BMPs using 24-bit or 8-bit color.

No, it doesn’t convert bitmaps. It reads only PNGs. If you try to feed it bitmaps, it won’t work and aborts.

| While reading test.bmp pngcrush caught libpng error:
| Not a PNG file..

> Second, since it’s a command line tool, the interface is atrocious.

Command line tool also means: it builds quickly and without problems on a whole number of platforms, it is easily scriptable, and as a extension of that, graphical frontends are possible (cf. tidy and tidygui).

> You’re kind of expected to know the different kinds of compression (up, average, subsample, etc.) and somehow have the time to fiddle with these settings endlessly until you get something that works.

That’s not true. If you just feed it one image without any further options, it tries the five statistically best methods, and within seconds, you have a smaller filesize.

> I decided to use PNGCrush to compress a 24-bit-color BMP file to a 24-bit-color PNG. The resulting file size was bigger than with Photoshop 7, even with maximum compression enabled. Heck I tried every setting possible, and Photoshop’s file size is still smaller. Same was true with an 8-bit-color PNG.

I imply that cannot be true. If you have tried every setting possible, you must have found the -brute switch, which tries 114 different methods, at the expense of time. I challenge you to publish your images. Else, thanks for playing, but lies fly away in the face of fact-checking.

27
Devin Chalmers says:
June 18, 05h

Well this article seems to be dead, but I feel obliged to point out that OSX users can set up an Applescript folder action on a directory to automatically compress .pngs saved there with PNGCrush. A lot easier than doing them by hand.

28
Dave S. says:
June 19, 09h

One more point to add to the fray - my first few test with Photoshop gave me the results I quoted above. Further testing says that for larger images, PNG actually saves rather well straight from PS. I’ve achieved 40% reductions for 300x200 images, no fancy tricks. Still only one-bit transparency, but the situation is looking better.

29
June 21, 08h

Ahhh, I goofed. I used the wrong software when testing pngcrush. I downloaded the png2bmp utility instead of the pngcrush executable. Thanks to Trollhunter for setting me straight. One of these days I’ll learn to think before I fire off replies to bulletin boards.

Dave, is there any way to have my earlier post deleted? Hope you have another seat at that crow dinner :-)

30
Kerry says:
August 30, 02h

Thank you for a very well presented overview. I’d like to comment on two issues. First, alpha transparency for Windows MSIE.

I’ve had a PNG section on my site since February 2003. I haven’t linked to any of the well known JavaScript fixes for two reasons: (1) they seem so darned complicated, and (2) a significant proportion of non-tech internet users surf the net with JavaScript disabled to avoid pop-up windows and other annoying tricks. Tech-savvy surfers know how to install applications which protect them from malevolent JavaScript, so the JS statistics for sites which they frequent can be misleading.

In my own tests with JavaScript alpha transparency hacks I’ve found that they don’t work on every system. I uploaded two test pages to my site and accessed them with IE6 on Windows98 and Windows 2000. One test page used the ‘strict’ doctype and the other one was ‘transitional’. The results were not the same on both systems. On Windows 2000 the PNGs disappeared on the ‘strict’ page but showed up OK on the ‘transitional’ page. On Windows98 the PNGs disappeared on both pages. With IE5.5 for Windows95, both pages worked fine.

One possible explanation is that once the AlphaImageLoader filter has crashed, due to incorrect coding or markup, it stays resident and may not be able to render correct pages either. It looks like thorough testing could be very time consuming.

I’ve come across many misconceptions about PNG transparency in design forums. I need to find a discussion forum dedicated to AlphaImageLoader hacks, where the participants have done thorough testing. I would really appreciate it if anyone knows of one and could post a link.

The second issue is SuperPNG, the free Photoshop plug-in for compressing PNGs. On the SuperPNG samples page there’s an image called “pnggrad8rgb.png”.

http://www.fnordware.com/superpng/samples.html

The original aim of my PNG site was to encourage non-tech visitors to adopt PNG format as a GIF replacement. One of the pages gives a brief review of three PNG image tools for MS Windows:

http://www.webcolors.freeserve.co.uk/png/review.htm

When I ran the SuperPNG sample image through two of them, it turned out that SuperPNG is not the ultimate PNG optimizer:

976 bytes – SuperPNG
790 bytes – IrfanView (adaptive filtering)
757 bytes – Web Image Guru (Paeth filter)

However, SuperPNG is available as a Photoshop plug-in, and it’s free. Web Image Guru is designed to be used as a PhotoShop plug-in or as a standalone application, but it costs $39. IrfanView is free, but it’s not available as a plug-in. Web Image Guru offers filtering options (usually unecessary), while IrfanView uses adaptive filtering, which is the standard method for most applications.

Web Image Guru compression can match pngcrush for 8_bit paletted PNGs. It also has some features that pngcrush doesn’t have – palette editing and the option to reduce the number of colors. It does batch processing too. Buying it was the best $39 I ever spent.

31
MikeyC says:
August 30, 03h

“a significant proportion of non-tech internet users surf the net with JavaScript disabled to avoid pop-up windows and other annoying tricks.”

Based on personal observation I find this a bit hard to believe. Non-tech internet users (that i’ve encountered) not only are incapable/unwilling to change browser default settings, but really don’t know enough about JavaScript to make the connection that disabling scripting in the browser would prevent pop-ups from spawning. I think if you’ve made that connection all on your own, then you aren’t quite a “non tech internet user”.

32
Kerry says:
August 30, 03h

I didn’t make the the observation about non-tech users surfing the net with JavaScript disabled on my own. Every national newspaper in the UK includes an internet section at least once a week (both quality newspapers and tabloids). I regularly see tips about how to stop pop-ups, how to remove ISP branding from Internet Explorer, and other common annoyances. Readers write in with these kinds of questions all the time. From among my own aquaintances several non-tech internet users have asked me how to stop pop-ups, but then baulk at the idea of having to install a special application program. Global statistics on JavaScript usage are available from: http://thecounter.com/stats/2003/May/javas.php