Web Design Handbook « PNG

PNG is a new graphic format that unlike jpg is lossless and unlike gif provides for more than 256 colors. Although new features are much more interesting; it supports a alpha channel with variable transparency. Note the PNG logo from libpng.org with the transparent lettering. This image can be created with Coral Draw but a graphic with variable transparency that can be used on a dynamic (dHTML), animated page can not be created with gif or jpeg.

For those who pay attention to detail, shadows need to have transparency. To create what you can create in one png image you would need to use two graphics both gif (256 colors) and on rendered in the broswer one with 100% opacity and the shadow rendered with less than 100%. Then rely on the browser to move the graphic on the page togeather, one image moving first would destroy the shadow effect, and the shadow should be nearly completely transparent at its edge (can not do that with gif).

I would of course like to have a blur filter for what exists behind the transparency. That filter does exsist in SVG which can use PNG as a source graphic. SVG can indeed be captured into flash; allowing for rich collections of combined effects.

Animated PNG is an emerging technology which still lacks support in most of the browsers currently in use. The animation is not interactive but the quality is much better than gif. An ideal use for Animated PNG would be the effect of a light or graphic lines moving or being draw on company logos, like what is common in video renderings.