Skip to content

How transparent backgrounds actually work

5 min read Formats Updated July 2026

Transparency is the source of more confusion than any other image concept. A cut-out looks perfect in one program and has a white halo in another. A logo saved as JPG mysteriously gains a black background. A PNG with a transparent background prints as a solid white rectangle.

All of these have the same underlying explanation, and it is worth understanding, because the fixes are simple once you know what is happening.

The fourth channel

A normal colour image stores three numbers per pixel: red, green and blue. An image with transparency stores a fourth, the alpha channel, which records how opaque that pixel is — 0 for fully transparent, 255 for fully opaque, and everything between for partial.

Partial transparency is the important part and the part people forget. A cut-out is not a binary mask where each pixel is either subject or background. Around every edge there is a band of pixels that are genuinely part-subject and part-background, because a single sensor pixel covering the boundary captured light from both. Hair, fur, motion blur and out-of-focus edges can be dozens of pixels wide in this in-between state.

Quality in a cut-out is almost entirely a question of how well that transitional band is handled. A hard binary mask produces the jagged, cut-with-scissors look. A well-estimated alpha channel produces edges that composite convincingly onto any background.

Where fringes come from

The white or dark halo around a cut-out is the single most common transparency problem, and it comes from colour contamination in those semi-transparent edge pixels.

Consider a dark object photographed against a white background. A pixel exactly on the boundary captured some object and some background, so its stored colour is a blend — a light grey. When the alpha channel marks that pixel as 50% opaque and you composite onto a new dark background, you get 50% of a light grey pixel showing. Multiply that across the whole outline and you get a visible light fringe.

The fix is to estimate what the object's colour would have been without the background contribution and store that, rather than the observed blend. Good background removal does this — it is called colour decontamination, and it is why a well-processed cut-out composites cleanly onto black as well as white.

This is also why you should always check a cut-out against a background very different from the original. A subject cut from a white background will look flawless composited onto white, and reveal every flaw composited onto dark blue. If you are producing cut-outs for other people to use, check against both.

Straight vs premultiplied alpha

There are two conventions for storing the colour of a semi-transparent pixel, and mixing them up produces predictable, recognisable errors.

Straight (or unassociated) alpha stores the colour as if the pixel were fully opaque, with transparency recorded separately. Premultiplied (or associated) alpha stores the colour already multiplied by the alpha value, so a 50%-opaque red pixel is stored as a darker red.

Premultiplied is faster to composite and avoids some interpolation artefacts, which is why video and compositing software often prefers it. PNG uses straight alpha. When software assumes the wrong convention, you get a distinctive result: an image interpreted as premultiplied when it is actually straight develops dark fringes; the reverse produces bright, washed-out edges.

If you have ever seen a logo that looks fine in one application and has a grey outline in another, this is usually the cause, and it is a software mismatch rather than anything wrong with your file.

Which formats can carry transparency

Not many, and this trips people up constantly.

  • PNG: full 8-bit alpha, lossless. The universal safe choice.
  • WebP: full alpha in both lossy and lossless modes. The best option for the web, because lossy-with-alpha did not exist before it.
  • AVIF: full alpha, best compression, slower to encode.
  • GIF: one single colour marked fully transparent — no partial transparency at all, which is why GIF cut-outs have hard, jagged edges.
  • TIFF and PSD: full alpha, for print and editing workflows.
  • SVG: transparency is native, since it is vector rather than pixels.
  • JPG: none whatsoever. This is the one that catches people.

Why your transparent image turned black or white

JPEG has no alpha channel and no way to represent one. When you export a transparent image to JPG, the transparency has to be resolved against something, and different software picks differently — most commonly white, sometimes black.

That is the whole explanation for the most-reported transparency bug there is: a cut-out saved as JPG and reopened with a solid background. Nothing is broken and nothing can be recovered; the alpha channel was discarded at export. Re-export from the original as PNG or WebP.

The related case is printing. Print is a physical process with no concept of transparency — ink either goes on the paper or it does not, and where it does not, you get paper. A transparent PNG sent to a printer produces whatever colour the paper is. If you need a specific background in print, composite it explicitly before sending.

Practical rules

Condensed to the decisions you actually make:

  • Keep your master cut-out as PNG, which is lossless and universally supported.
  • Export lossy WebP for the web — same transparency, a fraction of the size.
  • Never save a cut-out as JPG unless you have deliberately composited a background first.
  • Always preview a cut-out against a background very different from the original before you ship it.
  • For print, composite the background yourself rather than relying on the printer.
  • If edges look wrong in one program only, suspect a straight/premultiplied mismatch rather than a bad file.

Frequently asked questions

Why does my transparent PNG have a white background when I open it?
Either it was converted to JPG at some point, which discards the alpha channel entirely, or the program you are viewing it in composites transparency onto white for display. Check the file format first.
Can a JPG have a transparent background?
No. JPEG has no alpha channel and no mechanism to add one. Any transparency is resolved to a solid colour — usually white — when the file is written. Use PNG or WebP instead.
Why does my cut-out have a white outline?
The semi-transparent pixels around the edge still contain colour from the original background. Removal that only builds a mask leaves this contamination; removal that also decontaminates the edge colour composites cleanly onto any background.
What is the best format for a transparent image on a website?
Lossy WebP. It carries a full alpha channel at a fraction of PNG's size, and is supported by every current browser. Keep a PNG master for anything you will edit or hand to someone else.

Tools mentioned in this guide

Keep reading