[Valid HTML 4.0]

[PNG icon] Miscellaneous Transparent PNG Images using OBJECT Tags with a Background Image

[virtual-beer penguin, 8-bit interlaced PNG]

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 links point at reduced-size JPEG screenshots of this page; more specfically, the first two show the old version of this page (using OBJECTS), while the remaining four show the up-to-date but non-OBJECT version of this page:

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]">

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]">

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:

[Images are the spice of life:  get a real browser!]

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.

[toucan and shadow, 256-color/alpha palette image]   [toucan and shadow, 255-color/alpha palette image]   [toucan and shadow, full RGBA image]

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:

[pair of toucan images, one on top of the other]

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.)

[magnolia blossoms] [icicles on a branch]
[horned owl] [Ohia Lehua flower (Hawaiian)]

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:

[primary site hosted by SourceForge] Last modified 14 March 2009.

Copyright © 1997-2009 Greg Roelofs.