Transparency is a fourth channel of data riding beside red, green and blue — and each format treats it differently. This guide explains alpha values, premultiplication and edge halos, why JPEG deletes transparency, and how to keep cut-outs clean across backgrounds.
A transparent pixel is not an absence; it is an instruction: "when something sits behind me, let this much of it show through". That instruction is stored as a fourth channel — alpha — alongside the familiar red, green and blue, with a value per pixel (commonly 0 for fully transparent to 255 for fully opaque, or 0.0 to 1.0 in floating point). Logos, product cut-outs, icons, overlays and shadows all live or die by how faithfully that channel survives your toolchain.
The surprises are consistent: a PNG that looked perfect on white gains a grey fringe on a dark site; a JPEG of the same artwork has a white box baked around it; a resizing operation invents a halo from pixels that were supposed to be invisible. Each has a precise cause, and each is preventable once the alpha channel stops being invisible to you too.
Key takeaways
- Alpha is per-pixel data (0–255), not a property of the whole image: semi-transparency is where its power — and its artefacts — live.
- JPEG has no alpha channel at all. Converting a transparent image to JPEG composites it onto a background colour, permanently.
- PNG, WebP (both modes) and AVIF carry full alpha; GIF offers a single fully transparent 'colour' and hard edges only.
- Edge halos come from colour values hiding in transparent pixels. Premultiplied alpha and a deliberate matte are the cures.
What the fourth channel actually does
Displaying a semi-transparent pixel is arithmetic called compositing (the "over" operation): result = foreground colour × alpha + background colour × (1 − alpha). A pixel at 50% alpha shows an even blend of its own colour and whatever is behind it; at 25%, a whisper. Shadows in design files are usually just black at low alpha, which is why the same shadow PNG darkens a white page elegantly and disappears on a black one — the arithmetic guarantees both behaviours.
Two storage styles exist. Straight (unpremultiplied) alpha stores colour and alpha independently: a pixel can be bright red and fully transparent. Premultiplied alpha stores colour already multiplied by alpha, so fully transparent pixels are black by construction. Formats and tools differ in which they use internally, and conversions between the two are where edge artefacts are born — a fully transparent red pixel, expanded by a resize filter into its visible neighbours, tints the edge pink if the pipeline reads its colour, and leaves it clean if the pipeline respects premultiplication.
Formats and their alpha, precisely
| Format | Alpha support | Consequences |
|---|---|---|
| PNG | Full 8-bit alpha per pixel (16-bit in rare variants) | The reference format for cut-outs and logos; lossless, so edges stay exactly as authored |
| WebP lossy | Full alpha | Much smaller than PNG for photographic cut-outs; soft edges compress well |
| WebP lossless | Full alpha | Bit-exact like PNG, usually smaller — a strong default for graphics |
| AVIF | Full alpha | Excellent compression; encoding tool support is the constraint |
| GIF | 1-bit: one palette entry may be 'transparent' | Edges are either fully on or fully off — curves stair-step and semi-transparent shadows are impossible |
| JPEG | None | Transparent regions are filled (usually white, sometimes black) at export — irreversibly |
| SVG | Opacity per shape, resolution-independent | For drawn artwork, the best 'transparency' is a vector with no background shape at all |
The classic artefacts and their fixes
- The white box: a transparent image saved as JPEG, or placed where the alpha was stripped. Fix at the source: keep a real alpha format end to end, and check the export dialog — 'flatten' is the enemy word.
- The dark halo on dark backgrounds: the artwork was cut out against white, and anti-aliased edge pixels carry white in their colour values. Fix by re-exporting against the true background (a matte), or by defringing: replacing edge-pixel colours with the nearest fully opaque colour while keeping their alpha.
- The glowing edge on light backgrounds: the mirror image — an asset mastered on dark, with dark colour bleeding at low alpha. Same cure, opposite matte.
- Shadow that vanishes in dark mode: black-at-low-alpha shadows are invisible on dark surfaces by arithmetic. Dark designs need light-side techniques instead: borders, lighter surface steps, or a glow. Plan assets per theme rather than hoping one file serves both.
Working rules for clean transparency
- Keep a master with layers or vectors so mattes can be re-struck per background; a flattened PNG is a dead end.
- Decide the background story early: will this sit on one known colour, on any colour, or on photography? Each answer licences different edge quality — 'any colour' demands the cleanest alpha and defringed edges.
- Test on white, black and mid-grey (the checkerboard in editors is a fourth, misleading option — it is a UI convention, not a real background, and assets are never displayed on it).
- Watch file formats in the pipeline: one JPEG step, one careless 'optimiser' that flattens, and the channel is gone for good. Verify the delivered file actually reports an alpha channel before shipping.
Mistakes and pitfalls
Saving a logo as JPEG because the file is smaller
The saving is real and the loss is total: no alpha, plus JPEG artefacts around the letterforms. A logo wants SVG first, then PNG or lossless WebP — formats whose cost model suits sharp edges.
Trusting the editor's checkerboard preview
The checkerboard's mid-tone contrast hides both white and dark fringes that real backgrounds expose instantly. Always preview on the actual extremes — pure white and your site's dark surface at minimum.
Assuming semi-transparent pixels are 'basically fine' anywhere
Alpha composites against what is behind it — including, in emails and some apps, backgrounds you do not control. A signature graphic tuned for white can invert its legibility on a dark-mode mail client.
Common questions
Why does my PNG say it has transparency but show a background in some apps?
Because the viewer chose a background to composite against — often white, sometimes black. The file is fine; the stage differs. Well-behaved viewers let you pick the matte; test in one before blaming the export.
Can I recover transparency from a JPEG with a white box?
Not truly. Tools can re-key white to transparent, but anti-aliased edges have already blended artwork with white, so the recovered cut-out fringes on any non-white background. Go back to the master; re-keying is a salvage operation, not a workflow.
Is a fully transparent area 'free' in file size?
Mostly: large uniform transparent regions compress extremely well in PNG and WebP. Note that hidden colour data in transparent pixels (from sloppy exports) can inflate files and leak the un-cropped image — flatten colour in fully transparent areas when privacy matters.
To wrap up
Transparency is data, and like all data it needs a format that carries it, a pipeline that respects it, and tests against the backgrounds it will actually meet. Treat the alpha channel as a first-class part of the artwork — master it deliberately, matte it honestly, and the checkerboard will never lie to you again.
Try it yourself
The image converter preserves transparency when you choose PNG or WebP and shows you exactly what JPEG would do to it — convert a cut-out both ways and compare on a dark background.