All of these images (except where otherwise noted) are displayed via PNGs in IMG tags, embedded in OBJECT containers that reference the same PNGs. They should therefore show up both in browsers with native PNG support and in newer Netscape-like browsers with PNG plug-ins. The following two links point at reduced-size JPEG screenshots of this entire page, so you can see what it should look like:
However...regardless of what this page should look like, support for OBJECT tags appears to be broken in all recent versions of the Big Two browsers (that is, Netscape Navigator and Microsoft Internet Explorer). In particular:
See the PNG-Supporting Browsers page for links to these and other browsers and plug-ins.
Here's some sample HTML code to show how to do this nesting trick:
<OBJECT WIDTH="162" HEIGHT="150" DATA="foo.png" TYPE="image/png"> <IMG WIDTH="162" HEIGHT="150" SRC="foo.png" ALT="[image of a foo]"> </OBJECT>
Note that the WIDTH and HEIGHT attributes of the OBJECT tag are required in order for Netscape Navigator 4.x to invoke the appropriate PNG plug-in. Omitting either attribute in one OBJECT PNG will cause Navigator to ignore it and all subsequent OBJECT PNGs as well.
Also note that OBJECTs are containers and can contain other OBJECTs, so one can play tricks like sandwiching an OBJECT JPEG between the OBJECT PNG and the IMG PNG. This should allow an OBJECT-sensitive browser without any PNG support (e.g., Navigator without a PNG plug-in) to display the JPEG version of the image instead, while still allowing browsers with either native PNG support or PNG plug-in support to use the PNG. (Note the key word `should'; as noted above, Navigator 4.x fails to do so.) The penguin image at the top of this page uses a trick similar to the following:
<OBJECT WIDTH="162" HEIGHT="150" DATA="foo.png" TYPE="image/png"> <OBJECT WIDTH="162" HEIGHT="150" DATA="foo.jpg" TYPE="image/jpeg"> <IMG WIDTH="162" HEIGHT="150" SRC="foo.png" ALT="[image of a foo]"> </OBJECT> </OBJECT>
The following test is similar, except that the innermost IMG is a GIF. OBJECT-aware browsers like Navigator 4.x and MSIE 4.x should display either the outer PNG or the middle JPEG, and the image should be centered regardless:
This set is provided courtesy of Stefan Schneider. If the two images on the right are transparent but the one on the left has a black background, the browser was probably compiled with a buggy version of libpng. The bug is fixed in libpng 0.96 and later, and a trivial patch is available (for browser implementors, that is) for earlier versions of libpng.
The image on the right is a full 32-bit RGBA image (that is, truecolor with a full alpha channel). The two on the left are 8-bit palette images with full transparency chunks--in other words, their palettes are effectively RGBA values instead of the normal RGB. The one on the left has a 256-entry palette, while the one in the center has 255 entries; both were created with Stefan's LatinByrd application.
As a nice demonstration of the power of the palette-alpha images, here's a composite JPEG image of the toucan on top of his twin, provided by Glenn Randers-Pehrson. Note how the shadow of the toucan in front falls across his buddy:
The following set is provided by Greg's colleague, Pieter van der Meulen. All of these images are interlaced, have transparency, and should be rendered with the same green background as the page. If the images have obvious rectangular borders (due to the color specified in the bKGD chunk), the browser is broken. (The images should use their respective bKGD colors when viewed in a stand-alone image viewer with no default background of its own, however.)
These images are quarter-scale, interlaced, RGBA-palette (8-bit) versions of the original 32-bit RGBA images; each is between 35k and 70k. Click on any of them to bring up a page with the corresponding half-scale version of the image (also 8-bit), which in turn is linked to the full-size, 32-bit version. The conversion to 8-bit palette mode was accomplished by means of modified versions of some of the NetPBM tools.
[gratuitous link to Willem's test page with a large, interlaced image]
Here are some related PNG pages at this site: