Alpha Channel
A per-pixel transparency data channel. Enables semi-transparency and smooth cutouts in PNG and WebP.
An alpha channel stores per-pixel transparency as the fourth channel alongside RGB, corresponding to A in RGBA. Its theoretical foundation was established in Porter and Duff's 1984 alpha compositing paper.
Alpha values usually range 0-255 (8-bit); PNG also allows 16-bit precision (0-65535), and CSS rgba() uses a fraction from 0 to 1 (a percentage is also accepted). In 8-bit terms:
- 0: Fully transparent - background shows through
- 255: Fully opaque - pixel color displays as-is
- 1-254: Semi-transparent - blended with background via compositing
Supporting formats:
- PNG: 8-bit or 16-bit alpha, stored as straight (non-premultiplied) alpha. Widely used for transparency on the web
- WebP: Alpha in both lossy and lossless modes
- AVIF: Full alpha with high compression
- TIFF: Multiple alpha channels for print/DTP
- GIF: Binary transparency only (one palette color marked as transparent); no semi-transparency
JPEG lacks alpha support, so transparent images require PNG, WebP, or AVIF. Converting a transparent image to JPEG flattens the transparent areas onto a background color, so decide that color before converting.
A common pitfall in practice is the storage convention. Straight (non-premultiplied) alpha keeps color values as they are, while premultiplied alpha stores color values already multiplied by alpha; PNG uses the former. Mixing the two conventions when compositing produces unnaturally dark or bright fringes along semi-transparent edges.
In web development, alpha channels are essential for transparent logos, UI overlays, compositing, and effects. Unlike CSS opacity which uniformly controls entire elements, alpha channels specify transparency per-pixel, enabling complex cutouts and smooth anti-aliasing at boundaries.