What is Alpha Channel? (Transparency Explained)

You’ve seen images with transparent backgrounds — logos that sit cleanly on any color, icons that don’t have white boxes around them, PNG files that overlay perfectly. The technology behind this is the alpha channel.

Here’s what it actually is and why some image formats support it while others don’t.

RGB and RGBA

A “regular” color image stores three values per pixel: Red, Green, Blue. Each value (typically 0-255) represents how much of that color contributes to the final pixel color. RGB gives you about 16.8 million possible colors per pixel.

An image with transparency adds a fourth value: Alpha. This represents how transparent (or opaque) the pixel is.

Alpha = 0: completely transparent — the pixel doesn’t display; whatever is behind shows through
Alpha = 255 (or 1.0): completely opaque — solid pixel like normal
Alpha = 128 (or 0.5): half-transparent — the pixel partially obscures what’s behind

So RGBA is 4 values per pixel: red, green, blue, alpha. Each value is one byte (0-255), so an RGBA pixel is 4 bytes vs RGB’s 3 bytes. Files are about 33% bigger.

How transparent display actually works

When a graphics system draws a transparent image, for each pixel:

Read the alpha value of the source image
If alpha = 0: skip this pixel; show what’s behind
If alpha = 255: show this pixel; ignore what’s behind
If alpha is partial (1-254): blend this pixel’s color with the background

The blending uses a formula:

final_color = (alpha × source_color) + ((1 - alpha) × background_color)

So at alpha 128 (half-transparent), the final pixel is half from the source image and half from the background. The result is a smooth blend.

What soft edges look like

Sharp transparent edges (alpha is either 0 or 255 for every pixel) produce jagged lines that look “pixelated” or computer-generated.

Soft edges use anti-aliasing — pixels at the edge have partial alpha values (50, 100, 150, 200, etc.). The result is a smooth fade from fully opaque to fully transparent at the boundary.

Compare:

Hard edge: 1 pixel opaque, next pixel transparent — staircase look at curves
Soft edge: 5+ pixels gradient from opaque to transparent — clean, smooth visual

Most modern image software produces soft edges by default. AI background removal tools (like Remove.bg) handle this well. Manual selection in image editors usually requires explicit feathering settings to get soft edges.

Formats that support alpha

PNG (any flavor): standard transparency support
WebP (lossless or lossy): supports alpha
TIFF (in some configurations): supports alpha
GIF: very limited — alpha is either fully on or fully off, no smooth blending
SVG: vectors inherently support transparency
PSD, AI: design files with alpha support
HEIC: supports alpha (used for iPhone Live Photos and some other features)

Formats that don’t support alpha

JPG / JPEG: no alpha. Period.
BMP: technically supports alpha but most software ignores it
Some older formats: very limited

When you save a JPG, any transparency in the source becomes a solid color — usually white by default. This is the #1 reason for “transparency issues” — saving an image with transparent areas as JPG loses the transparency permanently.

Why JPG doesn’t support alpha

JPEG was designed in 1992 specifically for compressing photographs. Photographs don’t have transparent areas — they’re solid images of the world. The format optimizes for continuous-tone color and doesn’t include alpha.

JPEG 2000 (later format) and JPEG XL (newest) both support alpha, but practically nobody uses those formats. The standard 1992 JPG everyone uses is alpha-less.

The “save as JPG, lose transparency” gotcha

The most common transparency-related mistake:

You have a logo as PNG with transparent background
You “compress” or “convert” it to JPG to save space
The transparency becomes white (or some default color)
Now the logo has a visible white box around it

To preserve transparency, keep the file as PNG (or convert to WebP for smaller files with transparency intact).

Use PNG to WebP for size savings without losing alpha. Use JPG to PNG only when you’re going the other direction (you started with JPG, no transparency to preserve, you just want PNG for some other reason).

Common use cases for alpha

Logos: must sit cleanly on any background color (light theme, dark theme, colored hero section, photo).

Product photos with white background removed: e-commerce uses alpha so products visually float without a white rectangle around them.

Icons: UI icons with transparency lay over different button colors and themes.

Photo composites: layering multiple images on top of each other requires transparency in the upper layers.

Watermarks: semi-transparent watermarks (alpha around 50-100) appear faintly over images.

Stickers and overlays: floating decorative elements with transparent surroundings.

Profile picture frames: shaped frames that show the underlying photo through their gaps.

Premultiplied vs straight alpha

A technical distinction that comes up in graphics:

Straight alpha: RGB values represent the color, alpha represents transparency separately. Most common in still images (PNG).

Premultiplied alpha: RGB values have already been multiplied by alpha. Common in video, 3D rendering, real-time graphics.

For most still-image work, straight alpha is the default and you don’t think about it. For people working with video compositing or game graphics, the distinction matters.

File size with alpha

Adding alpha to an image:

PNG: same compression algorithm, just one more channel of data. About 25-33% larger files.
WebP: handles alpha very efficiently. Often only 10-15% bigger than non-alpha version.

For typical web use, the size overhead is acceptable for the visual benefit.

When semi-transparent matters

Beyond simple on/off transparency, partial alpha enables effects:

Smooth shadows: shadow under an object fades from dark (low alpha = visible) at the center to invisible (alpha 0) at the edges.

Glow effects: light “haloing” around a subject uses gradient alpha.

Glass and water: glass-like transparency uses partial alpha values for the realistic “you can almost see through but not quite” look.

Smoke and clouds: wispy, irregular alpha patterns simulate atmospheric effects.

UI overlays: dimmed background when a modal opens uses partial alpha (about 0.5) to darken what’s behind without hiding it completely.

Working with alpha in different tools

Photoshop: layers have inherent alpha; transparency is the default. RGB channels visible in the Channels panel.

Figma / Sketch: design tools designed for transparency; everything supports alpha by default.

CSS: opacity: 0.5 makes an element half-transparent. rgba(255, 0, 0, 0.5) gives a red color with 50% alpha.

Code/programming: most image libraries (PIL, ImageMagick, sharp) handle RGBA explicitly. Operations like “place this image over that background” use alpha automatically.

Converting alpha to non-alpha

Sometimes you need to convert a transparent image to a solid-background version:

Open in image editor
Add a solid-color background layer behind the transparent layer
Flatten the image
Save as JPG (or any format)

The transparency is replaced by the background color. The resulting file has no alpha but looks like the image floating on that specific background.

TL;DR

Alpha channel = fourth pixel value (after R, G, B) controlling transparency
RGBA = RGB + Alpha = 4 bytes per pixel instead of 3
Supported by: PNG, WebP, GIF (limited), SVG, TIFF
NOT supported by: JPG/JPEG, most older formats
Saving transparent images as JPG loses the transparency permanently
Soft edges (anti-aliasing) use partial alpha for smooth blending
For size savings with transparency: use PNG to WebP instead of converting to JPG
For solid backgrounds where alpha doesn’t matter: JPG and other non-alpha formats are fine