Alpha Channels and Transparency 3 (Back to the Basics series)

By Alex on August 20, 2008 2:03 PM | Permalink | TrackBacks (0)

Masks vs. Alphas

Alpha channels are our most sophisticated way to handle transparency, but they're by no means the only way. We commonly use the term "Mask" to refer to something similar to the alpha channel above - that is to say, a full range of "see-through-ness" for each point. Photoshop, for example, uses the term "Mask" to mean just that. But more primitive incarnations of "image masks" in applications like DVDs and some still image files like GIFs use a different approach.

In these image masks, every individual point on our image's "quilt" is either a color or completely, 100% transparent. Ever wondered why your funny-shaped DVD buttons have jagged edges on their highlights? Well, this is why.

Consider these same two images with transparency. Both are just a black square, with an alpha channel that ranges from opaque (0%) to completely transparent (100%), but one uses a web format that has a full alpha channel (PNG-24) and the other uses a web format with only the on/off image mask (GIF). Remember that your browser is compositing each image with the white background of this page - so the image should show a nice, clean fade from black to white.

Wow - a stark difference. Notice especially how jagged the diagonal is in the GIF. This is probably the most important difference between formats with full alpha channels and ones with on/off image masks: on/off image masks cannot accommodate antialiasing. I'll write up a bit about antialiasing in another series, but for now, let's just say that's the process that makes jagged edges smooth on screen.

For your convenience, here's a quick list of which formats and software use which kind of transparency:

Full Alpha Channel:

Final Cut suite
Marquee
Photoshop
PNG-24
Flash Video (for an example, see Ms. Dewey)
TIFF
TGA
Video codecs with "Millions Of Colors +" listed as an option - the "+" is important.

Limited, On/Off Image Masking: