[end of final pass: 360x240 PNG-balls logo]

How PNG's Two-Dimensional Interlacing Works
(PNG Version with MNG and MPEG Animations)

Thousands of people ask Greg every day, "Just how does two-dimensional interlacing work in the Portable Network Graphics specification, and what does it mean to my sex life?" Fortunately Greg is in a unique position (so to speak) to answer this question once and for all; it can now be laid (as it were) to rest.

To demonstrate the stupendously complicated procedure known as Adam7 interlacing in a manner that even the tiniest brain cell can comprehend, Greg has produced a set of accordingly tiny images demonstrating the concept. Oliver Fromme, another PNG author and also the developer of the QPV viewer for DOS (formerly QPEG), is to be congratulated for the hard work in creating the original shelf+balls logo that was the basis for this demonstration. Thanks also to Alexander Lehmann for the MPEG animation (101k) of the process and to Glenn Randers-Pehrson for the MNG animation (214k).

All of the images on this page, with the exception of the tiny 'PNG' icons near the bottom, are actual interlaced PNG images. As of May 1997, the PNG images are inlined both via the old IMG tag and also via the newer OBJECT tag; new versions of Navigator respect the latter but not the former when loading plugins. As of December 1999, all OBJECT tags have been removed except on the image above; most browsers still don't support the tag correctly.

Note that, although the inlined PNG images are either the same size as or smaller than their GIF counterparts (even taking into account the more complex interlacing scheme), the linked PNG images are much larger than the corresponding JPEG versions. Lossy compression really does make a huge difference -- between 5x and 6x for the small images and anywhere from a factor of three to a factor of eight for the four large ones. The sizes are indicated here and there on this page; unless you really want the huge PNG versions, go visit the JPEG version of this page to pick up the convenient, byte-sized JPEGs.

And a big thanks to Dan Pape of UIUC for hosting the large PNG images for so many years (from 1995 to 1999, about 4.5MB total). Dan also did most of the work in adding PNG support to the once mighty X Mosaic browser.

We begin with a plain wooden shelf representing the image that is to be interlaced. It contains an 8x8 array of indentations representing one unit of interlacing; the full image would contain many of these blocks, tiling the entire picture. Next we add a clear, three-dimensional "PNG" overlay (just because we can) and the first "pixel" in the upper lefthand corner:

[PNG Adam7 interlacing, pass '-1': the shelf] [Adam7 pass '0': shelf + 'PNG'] [Adam7 pass 1: first ball]

Pass 2 breaks the square symmetry (like all of the even-numbered passes) by adding another pixel; pass 3 restores the symmetry by adding two more pixels; and pass 4 breaks it again by adding four pixels:

[Adam7 pass 2: second ball] [Adam7 pass 3: balls 3 and 4] [Adam7 pass 4: balls 5 through 8]

Pass 5 again restores the symmetry (do you sense a pattern here?), pass 6 breaks it, and finally pass 7 completes the image with 32 new pixels:

[Adam7 pass 5: balls 9 through 16] [Adam7 pass 6: balls 17 through 32] [Adam7 pass 7: balls 33 through 64]

Note that the first pass transmits only 1/64 of the data; in other words, one gets a rough overall view of the image 8 times faster than the corresponding GIF one-dimensional interlacing scheme. Both schemes transmit half of the image data in the final pass. And in some informal tests Greg performed recently, medium-size text became readable twice as quickly with PNG interlacing as with GIF (on PNG's fifth pass of seven; on GIF's third pass of four).

Note also that each of the little images above may be clicked to retrieve the corresponding 24-bit 320x240 PNG image; all of the PNGs are interlaced and are between 120k and 155k in size. (For comparison, the JPEG versions accessible from the other page are all less than 30k.) The larger images will look something like the one at the top of this page, only much nicer for those of you with high-color or true-color displays. The title image is itself a link to the full 1024x768, 1.4MB PNG version (as opposed to the lossy 1024x768 JPEG version that is only 172k, or the original uncompressed 1024x768 TGA that's 2.3MB).

All of these images were generated with POV-Ray 2.2 under Linux 1.2.1. The 320x240 images averaged about 40 minutes each on a 486-33; the 1024x768 monster required over 12 hours. The POV-Ray source files for all nine images are also available (74k zipfile).

Finally, here are a couple of gratuitous PNG collages of the little images, both with links to the full 1024x768 PNG versions (about 680k and 750k, respectively; the JPEG versions are about 200k each):

[all nine passes in a 3x3 layout] [passes 0 through 8 in a border around a central 3D 'PNG' logo]

The second one seems to be the more popular of the two. (The central image in the second collage is a small, inverted version of a raytraced logo by Neal Kettler.) Oops, here's another gratuitous PNG picture:

[end of final pass: 256x192 PNG-balls logo on black background]

This one should make a dandy black concert t-shirt. The 1024x768 PNG version is 515k (the JPEG is only 76k) and makes a stupendously cool screen background.

UPDATE 2020-08-08: As you will have noticed by now, everything written above is incredibly dated with respect to browser support, file sizes, and especially rendering times. Let's hear it for a quarter-century of progress, eh?

With that said, Greg recently updated and re-rendered the black model using POV-Ray 3.7 on a NUC (dual-core, 4-hyperthread, 1.3 GHz Core i5) running Linux 4.4.0. (Actually, most of the update happened in 2002 using POV-Ray 3.5-beta, but then the project stalled for a couple of decades. Whoopsie!) It now renders PNGs with full alpha-transparency, and the object colors and transparencies have been tweaked to look pretty good against any background, from black to white. Here's what the 800x600 version looks like:

[new (2020) RGBA version of the logo, 800x600 resolution]

Here are a bunch of resolutions, timings, and the new POV-Ray source files:

UPDATE 2021-04-25: Greg decided he likes the purple balls better than the green balls, so now there are 32 of the former and 4 of the latter (i.e., inverse of the 2020 model above). Here are the new links:

Here are the other PNG-related resources at this site:

[primary site hosted by SourceForge] Last modified 25 April 2021.

Greg was just kidding about the sex-life part. No, really. There is no evidence whatsoever that use of PNG interlacing can lead to better sex, although Greg is certainly working hard at it. So to speak.

Copyright © 1995-2021 Greg Roelofs.