The alpha channel is the fourth value stored in a pixel that controls how transparent it is, sitting alongside the red, green, and blue values that set its colour. Alpha runs across a range from fully invisible to fully solid, with every level of partial transparency in between. It is the single reason a PNG logo can float cleanly over any background while a JPG cannot, because JPG has no alpha channel at all. Transparency is not a trick of the eye or a property of the whole image; it is data attached to each individual pixel. This guide explains what the alpha channel is, how it stores hundreds of transparency levels, the compositing math that blends transparent layers together, which formats support it, and what happens to it when you convert an image from one format to another.

What the alpha channel actually is

Every digital image is a grid of pixels, and every pixel stores numbers that describe it. In a standard colour image, each pixel holds three numbers for red, green, and blue. The alpha channel adds a fourth number that answers a different question: not what colour is this pixel, but how much of it should you see. A pixel can be bright red and fully solid, bright red and half see-through, or bright red and completely invisible. The colour stays the same in all three cases; only the alpha changes. This separation of colour from opacity is what makes flexible transparency possible.

The term comes from the alpha compositing work published by Thomas Porter and Tom Duff in 1984, which formalised how to combine images with transparency. Their model is still the foundation of every modern graphics program, web browser, and game engine. So the alpha channel is not a recent convenience bolted onto image formats; it is a decades-old idea that quietly powers almost everything you see layered on a screen.

RGBA: the fourth value in every transparent pixel

When a pixel carries transparency, it is described with four values instead of three, written as RGBA: red, green, blue, and alpha. You see this notation everywhere in design and web work. In CSS, a colour like rgba(255, 0, 0, 0.5) means pure red at 50 percent opacity. In an image editor, the same idea appears as an opacity slider on a layer. The A is always the opacity value, layered on top of the colour rather than mixed into it.

Keeping alpha separate from colour matters. If transparency were baked into the colour values, a semi-transparent red would have to be stored as a lighter pink, and you could never recover the original red or place it cleanly over a dark background. By storing opacity as its own channel, the format keeps the true colour intact and lets the software decide how to blend it against whatever sits behind it. That flexibility is exactly why designers export assets with an alpha channel rather than pre-mixing them onto a background.

How alpha stores levels of transparency

The alpha channel does not just store on or off. In a standard 8-bit image, alpha holds 256 distinct levels, from 0 to 255. A value of 0 means the pixel is fully transparent and invisible, 255 means it is fully solid and opaque, and every number in between produces partial transparency. A value of 128 makes the pixel roughly half see-through, letting the background show through at 50 percent strength.

These 256 levels are what make transparency look smooth rather than harsh. A drop shadow fades gradually because its pixels carry decreasing alpha values toward the edge. A glass or smoke effect works because different pixels are see-through by different amounts. Higher-end formats push further: 16-bit alpha channels offer 65,536 levels for professional compositing, though 8-bit is standard for web images and covers everything the eye needs.

Alpha compositing: the math that blends layers

When a transparent pixel sits over a background, the software has to work out the final colour you see. It does this with a simple blending formula. The visible result equals the foreground colour times its alpha, plus the background colour times one minus that alpha. In plain terms, a pixel that is 70 percent opaque contributes 70 percent of its own colour and lets 30 percent of the background through.

Run that calculation across every pixel and you get a clean composite: a logo blended onto a photo, a caption faded over a video, a menu drawn over a webpage. This is happening constantly. Every time a browser draws a semi-transparent element or a game renders a puff of smoke, it is performing alpha compositing millions of times per second. The alpha channel supplies the opacity value the formula needs for each pixel.

Anti-aliasing: why alpha makes edges smooth

One of the most important jobs of the alpha channel is producing clean, anti-aliased edges. Consider the curved edge of a circular logo. Without transparency, the curve would have to be built from hard square pixels, giving it a jagged, stair-stepped look. With an alpha channel, the pixels along the edge are set to partial transparency, blending the shape gradually into whatever is behind it.

This is why a well-made PNG logo looks crisp on a white page, a dark page, or a photo. The edge pixels are not painted white or any single colour; they are partly transparent, so they blend correctly against every background. Flatten that logo onto white, and those same edge pixels become part-white. Place the flattened version on a dark background and you see an ugly pale halo, because the smooth blend was locked to the wrong colour. The alpha channel is what keeps the edge adaptable.

Straight vs premultiplied alpha

There are two ways to store colour and alpha together, and knowing the difference prevents a class of frustrating bugs. In straight alpha, the colour values stay untouched and the alpha is kept entirely separate, which is how PNG stores transparency. In premultiplied alpha, the colour values are multiplied by the alpha ahead of time, so a 50 percent transparent red is stored as a darker red already.

Premultiplied alpha is common in video, film compositing, and real-time rendering because it makes certain blending operations faster and avoids dark fringing at edges. Straight alpha is more common for still images and web assets because it keeps the original colour recoverable. Problems appear when software expects one and receives the other, producing edges that look too dark or oddly bright. For everyday image work with PNG and web graphics, you are dealing with straight alpha, and the software handles it for you.

Which image formats support an alpha channel

Not every format can store transparency, and this is the practical detail that trips people up during conversion:

PNG: a full 8-bit alpha channel with 256 levels, the standard for transparent web graphics.
WebP: a full alpha channel in both its lossless and lossy modes, while producing smaller files than PNG.
AVIF: a modern format with alpha support and strong compression, growing in browser support.
GIF: only simple on-or-off transparency, with no partial levels, so edges look rough.
TIFF and SVG: both support transparency, used in print and vector work respectively.
JPG and BMP: no alpha channel at all, so they cannot store any transparency.

The takeaway is that PNG and WebP are your reliable choices when transparency must survive, GIF works only for hard-edged cutouts, and JPG is off the table for anything see-through.

The alpha channel on the web and in CSS

On the web, the alpha channel appears in two places: inside image files and inside CSS colour values. A transparent PNG or WebP carries its alpha in the file itself, so it layers over any page background. CSS then adds a second layer of control with rgba() and hsla() colours and the opacity property, letting you fade elements, tint overlays, and build glass effects without editing the images at all.

This combination is why modern interfaces look layered and soft. A hero section might stack a semi-transparent dark overlay over a photo to make white text readable, using CSS alpha, while the logo on top uses image alpha to sit cleanly on either. Both rely on the same underlying idea: each pixel carries its own opacity, and the browser composites everything together in real time.

What happens to alpha when you convert to JPG

Because JPG has no alpha channel, converting a transparent image to JPG forces a decision: the transparency has to be replaced with something solid. The converter flattens the alpha, filling every transparent or semi-transparent pixel with a background colour, most often white. The see-through areas become solid, and the smooth edges that relied on partial alpha get locked to that fill colour.

This is exactly why a logo can end up sitting in a white or black box after conversion, or show a faint halo around its edges. The information needed to blend it against a new background is gone, because JPG had nowhere to store it. If you need transparency to survive, the answer is to keep the PNG or convert to WebP instead. When you genuinely want a flat image, choosing the right fill colour matters. Our converter lets you pick white, black, or a custom colour for the fill, or export WebP to keep the alpha channel entirely, which the transparent background guide walks through.

Common transparency problems and how to avoid them

Most transparency headaches trace back to the alpha channel being flattened against the wrong colour, a step called matting. Here are the usual culprits:

White or black box: a transparent PNG converted to JPG fills its background with a solid colour. Match the fill to the destination, or keep transparency.
Edge halo or fringe: a logo matted onto white then placed on a dark background shows a pale outline. Re-export from the original transparent file matted to the correct colour, or keep it transparent.
Dark fringing: often a straight versus premultiplied alpha mismatch. Re-exporting with the correct alpha type fixes it.
Lost transparency after editing: flattening layers or saving as JPG discards the alpha. Keep a layered or PNG master.

The rule that prevents nearly all of these: decide the background before you flatten, and keep an original file that still has its alpha channel so you can re-export cleanly.

Frequently asked questions

What is an alpha channel?

The alpha channel is a per-pixel value that controls transparency, from fully invisible to fully solid, stored alongside the red, green, and blue that set a pixel's colour.

What does RGBA mean?

RGBA stands for red, green, blue, and alpha. The alpha value sets the pixel's opacity on top of its colour, so rgba(255, 0, 0, 0.5) is red at 50 percent.

Why does PNG have transparency but JPG does not?

Because PNG includes an alpha channel and JPG does not. Without a place to store per-pixel opacity, JPG cannot hold any transparency at all.

How many levels of transparency can an alpha channel store?

256 levels in a standard 8-bit image, from 0 for invisible to 255 for solid. Professional 16-bit alpha offers 65,536 levels for fine compositing.

What happens to the alpha channel when I convert to JPG?

It is flattened. Transparent areas fill with a solid colour, usually white, because JPG has no way to store the opacity data.

Which image formats support an alpha channel?

PNG, WebP, AVIF, TIFF, and SVG support alpha, with PNG and WebP offering smooth partial transparency. GIF has only on-or-off transparency, and JPG has none.

Is straight alpha or premultiplied alpha better?

Neither is universally better; they suit different jobs. Straight alpha keeps colours recoverable and suits still images, while premultiplied alpha speeds up blending in video and real-time rendering.

How do I keep transparency when reducing file size?

Convert to WebP instead of JPG. WebP keeps the alpha channel while cutting size by 25 to 35 percent, so the background stays see-through and the file gets lighter.