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

How PNG's Two-Dimensional Interlacing Works
(JPEG Version with Inlined GIF Animation)

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 Windows (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 John Cristy and Glenn Randers-Pehrson, whose ImageMagick was used to create both the non-LZW GIF animation above and the corresponding MNG version on the other page.

There is another version of this page that uses PNG images instead of JPEGs. See Greg's list of PNG-supporting browsers if your browser doesn't support inlined PNGs.

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 JPEG 360x240 image; all of the JPEGs are less than 30k in size. 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 JPEG version [171k]. For those of you reading this with a Netscapish browser -- i.e., one capable of doing GIF animations -- the title image is a looping, animated version of the image sequence displayed immediately above. For now that represents the chief technical advantage GIF has over PNG, but a multiple-image variant of PNG is under development.)

All of these images were generated with POV-Ray 2.2 under Linux 1.2.1. The 360x240 images averaged about 45 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 JPEG versions (about 200k each):

[all nine passes in a 3x3 layout] [passes 0 through 7 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 JPEG version is 76k and makes a stupendously cool screen background.

[Update 2020-08-08: The PNG version of this page now has updated, partially transparent versions of the logo in dimensions up to 3840x2160 (as well as the POV-Ray 3.7 sources for those who want to experiment), all of which look pretty good against any background or t-shirt color—assuming the printer knows how to handle the transparency properly. Oh, and not one of them took more than three minutes to render. Yay for modern hardware and ray-tracing algorithms!]

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

[primary site hosted by SourceForge] Last modified 8 August 2020.

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-2020 Greg Roelofs.