Alpha Channel
An additional channel in an image that stores per-pixel transparency information, enabling backgrounds to show through.
Last updated
What Is an Alpha Channel?
An alpha channel is an additional data channel stored alongside the Red, Green, and Blue (RGB) colour channels in an image. It stores a transparency value for each pixel — from 0 (fully transparent) to 255 (fully opaque) in 8-bit images.
How It Works
A standard JPG image stores 3 values per pixel: R, G, B. A PNG image with transparency stores 4 values per pixel: R, G, B, A (alpha).
When displayed over a background, the compositing engine uses the alpha value to blend the image pixel with the background pixel:
result = (image_pixel × alpha) + (background_pixel × (1 − alpha))
At alpha = 255 (opaque), only the image pixel is shown. At alpha = 0 (transparent), only the background shows through. At alpha = 128 (semi-transparent), the image and background are blended 50/50.
Format Support
| Format | Transparency | Type |
|---|---|---|
| PNG | ✅ Full 8-bit alpha | Per-pixel, any opacity level |
| WebP | ✅ Full 8-bit alpha | Per-pixel, any opacity level |
| GIF | ⚠️ 1-bit only | Pixel is either fully transparent or fully opaque |
| JPG | ❌ None | No transparency support |
| SVG | ✅ Full | Via CSS opacity or fill-opacity |
The JPG Transparency Problem
JPG has no alpha channel. When you convert a PNG with a transparent background to JPG, the transparent pixels must be filled with a solid colour — typically white. The transparency information is permanently lost.
Fix: Keep logos, icons, and composited images as PNG or WebP whenever transparency is needed.