Miscellaneous PNG Images using OBJECT

Miscellaneous Transparent PNG Images using OBJECT Tags

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:

Arena 0.3b screenshot (no support for HTML background color; older version of this page)
Acorn Browse 1.25 screenshot (perfect!)
Mac Internet Explorer 5.0 screenshot (perfect!)
iCab 1.9 beta screenshot (pretty good!)
OmniWeb 3.1rc2 screenshot (pretty good!)
Mozilla 2000-04-14 screenshot (pretty good!)
Mozilla 2000-04-14 screenshot (shows random-dither approach to PNG transparency)

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:

Navigator 4.04 (a.k.a. the browser portion of Communicator) is the first version to have native PNG support, but it invokes it only for the innermost IMG PNG, not for the outermost OBJECT PNG. This behavior can be seen in the PNG/GIF/PNG penguin above (which is displayed as a PNG) in combination with the PNG/JPEG/GIF icon below (which is displayed as a GIF, i.e., the innermost IMG). In addition, 4.04 has no support for transparency, but that's a separate issue. (All versions through 4.72 behave the same way.)
Navigator 4.0 through 4.03 work fine with the outer OBJECT PNG if they have the Siegel & Gale PNG plug-in (Windows 95/NT) installed, but they fail to revert to the inner OBJECT GIF or JPEG if they do not have a PNG plug-in. This is incorrect behavior according to section 13.3.1 (objects portion) of the W3C's HTML 4.0 Recommendation, which is the only version of HTML supporting WIDTH and HEIGHT attributes in the OBJECT tag (which in turn is what Netscape requires for plug-in support).
Navigator 3.x and earlier ignore all OBJECTs; their plug-ins only work with the proprietary EMBED tag.
MSIE 5.0 for Windows thinks it needs ActiveX controls enabled (Internet Options -> Run ActiveX controls and plug-ins) in order to render OBJECT images, but it will do so when given "permission." However, it will not do so for PNG images, only for JPEGs or GIFs; it provides no transparency support (images are rendered against a white background); and even worse, it adds a border and scrollbars to perfectly sized images. (And if ActiveX controls are not enabled, it will render the enclosed IMG as intended, but it will also pop up a warning box every time the page is displayed.)
MSIE 4.01 not only thinks it needs an ActiveX control to render OBJECT PNGs but also fails to render enclosed IMG GIFs. And in the penguin ``IMG within an OBJECT within another OBJECT'' example at the top of this page, MSIE 4.01 somehow thinks the nested objects should both be rendered, but it fails to do so for either one until the user clicks on them (and then only the GIF is rendered; clicking on the PNG once again pops up the ActiveX error box).
MSIE 4.0 pops up an error message about being ``unable to load plug-in'' and in some cases crashes entirely, particularly when scrolling down to the IceAlpha image below. Apparently the plug-in in question is the S&G version installed in Netscape's directory; MSIE co-opts it without permission.
MSIE 3.x and earlier have no native support for PNG and ignore images in OBJECT tags.

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:

PNG Images:
- Miscellaneous Transparent Images using IMG Tags
  - also with a background image
- Miscellaneous Transparent Images using OBJECT Tags
  - also with a background image
  - also strict HTML 4.0 version
- Photographic PNGs with Alpha Transparency:
- Miscellaneous 32-bit RGBA PNGs
- PNG VRML Texture Suite in 2D
- Willem van Schaik's Test Suite of PNG Icons
  - also without broken PNGs
Screenshots of Browsers and PNG Transparency:
PNG Home Page
Complete PNG Site Map

Last modified 14 March 2009.