png : Java Glossary

png

*.png PNG (Portable Network Graphics) files are a replacement for *.gif files when you don’t need animation. JPEG (Joint Photographic Experts Group) files have better compression for photographs but don’t handle line art as well as *.gif and PNG formats. *.png have been one of the standard image formats in Netscape and Internet Explorer since 1997, though IE (Internet Explorer) support is still only partial. Opera started native support with version 3.51. Apple’s Quicktime supports the format. Firefox and Mozilla, which are derived from Netscape, also properly support *.png. Unlike *.gif files, there were never any patent restrictions, and the file format is maintained in an open source environment. One big advantage is that fades to transparent background and antialiasing look good no matter what the background colour. With *.gifs, fades only work for one colour of background, usually white or black. *.pngs use varying degrees of alpha channel transparency to get this effect.

feature	*.gif	*.jpg	*.png
colour resolution	8 bits	24 bits	8, 24, or 48 bits
grey resolution	8 bits	8 bits	8 or 16 bits
transparency	1 level	none	256 levels
lossy compression	no	yes	no
lossless compression	yes	unused	yes
patent restrictions	expired	no	no
animation	yes	no	no (see MNG (Mixed Network Graphics))

GIF flower without variable transparency

PNG flower with variable transparency

You might use browsershots to check out PNG support in various browsers by looking at the renderings of this page http://mindprod.com/jgloss/png.html at http://browsershots.org.

*.png compression uses zlib, same as the gnu GZIP and Java jar utilities. On most 8-bit images, the *.png form will be about 11% smaller than the *.gif form. Java 1.4.1+ supports *.png officially in the Advanced Imaging Kit. You can use *.png images with Toolkit.getImage.

Unfortunately Java Web Start in Java version 1.5 and earlier does not support *.png files for the jnlp <icon image, just *.gif and *.jpg. Support for arrived with JDK (Java Development Kit) 1.6.

You can test your browser’s *.png support. You should see an image of a huge spiky red flower to the right of the table above, with proper fades into the transparent background, with no white halos. IE 5.5 and 6.0 do not show it at all. IE can handle some transparent backgrounds but not others. Netscape 4.79 shows it with a purple background. Netscape 8.0+ shows it correctly. Opera, Mozilla, SeaMonkey and Firefox display it correctly. See Masker for details. You can also click here and here for more tests.

The *.png file header looks like this:

PNG Header Format
Field	Contents	Size
signature	\211PNG\r\n\032\n i.e. hex 89504E470D0A1A0A	8-bytes
chunksize	0x0000000D	4 bytes big-endian binary
chunkid	IHDR i.e. hex 0x49484452	4 bytes
width		4 bytes big-endian binary
height		4 bytes big-endian binary

The ImageInfo class will give you the width and height of *.png images (also *.gif and *.jpg) without loading them. It just read the first few bytes of the file.

Transparency Woes

When you produce ImageIO png images with transparency, Internet Explorer 5 and 6 do not render them properly, (though Internet Explorer 7+ will) however, I have heard that rendering them with palette mode creates images that IE will render correctly. PNG supports two different schemes for doing transparency.

Proper: aka alpha-channel, aka translucent, aka undoctored. It uses with an 8-bit alpha channel. Each pixel can then have 256 different degrees of transparency.
Mickey Mouse: aka binary transparency, aka indexed, aka doctored. It mimics the way gif handles transparency. It steals one colour from the palette map to be the transparent colour. So either a pixel is 100% transparent or 100% opaque.

IE 5 and 6 do not support the proper format, only the Mickey Mouse one. The doctoring process described in the Masker utility documentation, converts a properly formed png to a Mickey Mouse format.

You can see if your browser displays both styles of PNG image correctly:

Proper alpha channel (png undoctored):

Mickey Mouse (png doctored):

gif doctored:

You might use browsershots to check out PNG transparency support in various browsers by looking at the renderings of this page http://mindprod.com/jgloss/png.html at http://browsershots.org.

Generating PNG Images Programmatically

Here is the code for a program to draw a simple image, then save it as a *.png file.

There are also animated PNGs (Portable Network Graphics) that work much like animated GIFs (Graphic Interchange Formats) called Animated PNG, or APNG (Animated Portable Network Graphics). It supports 24-bit colour and 8-bit alpha transparency. Opera 9.5+ and Firefox 3.0+ support it. IE, Safari, Flock and Sea Monkey do not support it. They just display the first frame.

Learning More

recommend book⇒PNG: The Definitive Guide

Greg Roelofs

978-1-56592-542-7

paperback

publisher

O’Reilly

published

1999-06-01

Out of print. More than you wanted to know about *.png image format. Available to browse free as an eBook.

Greyed out stores probably do not have the item in stock. Try looking for it with a bookfinder.

	available on the web at:	http://mindprod.com/jgloss/png.html
	optional Replicator mirror of mindprod.com on local hard disk J:	J:\mindprod\jgloss\png.html
	Please email your feedback for publication, letters to the editor, errors, omissions, typos, formatting errors, ambiguities, unclear wording, broken/redirected link reports, suggestions to improve this page or comments to Roedy Green : . If you want your message, your name or email kept confidential, not considered for public posting, please explicitly specify that. Unless you state otherwise, I will treat your message as a letter to the editor that I may or may not publish in the feedback section. After that, it will be too late to retract it. If you disagree with something I said, especially when sending an ad-hominem attack, a rant composed mainly of obscenities or a death threat, please quote the offending passage and cite the web page where you found it, tell me why you think it is wrong, and, if possible, provide some supporting evidence. I can’t very well fix erroneous or ambiguous text if I can’t find it.
Blog	Canadian Mind Products IP:[65.110.21.43] Your face IP:[107.21.156.140]
Feedback	You are visitor number 33,824.