Transparency is a number, and it carries a colour with it

The fourth grey image

Add transparency to a file and you add a fourth channel beside red, green and blue. It holds one value per pixel, 0 to 255: 0 means this pixel shows nothing, 255 means it shows fully, and everything between is partial.

The checkerboard your editor draws behind a transparent area is not in the file. It is a display convention so you can tell transparent from white. Beginners export a PNG expecting the checkerboard to be there; it is not, because it never was.

The important thing about a partially transparent pixel is that it still has a colour. A pixel at alpha 128 is half-showing some specific RGB value. Which value that is turns out to be the source of most transparency problems.

Straight and premultiplied, and the fringe that tells you which

There are two conventions for what the RGB numbers mean when alpha is partial.

Straight (unassociated) alpha: RGB holds the pixel’s true colour, alpha holds coverage separately. PNG works this way, and so do most editors.

Premultiplied (associated) alpha: RGB has already been multiplied by alpha. A half-transparent pure red is stored as (128, 0, 0, 128) rather than (255, 0, 0, 128). Many video codecs, rendering engines and compositing applications use this because it makes blending a cheaper operation.

Mix them up and the symptom is immediate and diagnosable. Treat premultiplied data as straight and the edges of everything go dark, because the values were already reduced and you reduce them again. Treat straight data as premultiplied and the edges go bright or washed out. If a logo handed to you from a motion designer has a black halo on every edge, that is the bug, and the fix is a checkbox in the import dialogue rather than a mask.

The grey halo that is not a premultiply bug

There is a second, much commoner fringe, and it has a different cause. Cut a subject out of a photograph and the edge pixels are mixtures: the sensor averaged subject and background into one value. Those mixed pixels get partial alpha, and they keep the colour they had, which includes the old background.

Put that cut-out on white and you see a grey rim. Put a subject cut from a green wall onto a white page and you see a green rim. The alpha is correct. The colour underneath it is wrong, and no amount of contracting or feathering fixes it, because contracting just eats the edge and feathering smears the contamination further. Colour decontamination (rewriting those partial pixels’ RGB to match the subject while keeping their alpha) is the only control that addresses the cause, and it gets a full lesson later in the course.

What each format can actually carry

• PNG-32: 8-bit alpha, 256 levels. The dependable choice for a logo with soft edges.
• PNG-8: one index in the palette is “transparent” and nothing else. That is 1-bit alpha: fully on or fully off. Soft edges become jagged. This is why a logo exported as a small PNG suddenly has staircase edges; it was saved as PNG-8 to make the file smaller.
• GIF: the same 1-bit limitation, for the same reason.
• WebP and AVIF: full 8-bit alpha, and considerably smaller than PNG for the same image. For web delivery of a cut-out with soft edges, WebP is usually the right answer now.
• TIFF: full alpha, and also supports a clipping path, which is a vector outline stored alongside the pixels. Print workflows often want the path rather than the alpha, because a printer’s layout software uses it to flow text round the shape.
• JPEG: none. There is no such thing as a transparent JPEG. When a client’s logo arrives sitting on a white box, this is why. The only fix is to obtain a PNG, SVG or the original artwork.
• SVG and other vector formats: no pixels, so no alpha channel, but full opacity control on shapes. For a logo this is always the better delivery.

Matting: telling the file which background it is going to

If you already know the final background colour, you can bake it in. Export dialogues call this matte. Setting the matte to the page’s background makes the semi-transparent edge pixels blend towards that colour, so even a 1-bit PNG-8 or GIF looks acceptable against that one background, and visibly wrong against any other.

This is a good trick for a fixed-colour email header and a bad habit for a logo you will reuse. Deliver the untouched straight-alpha version as the master and matted copies as extras, clearly named.

Free tools throughout: GIMP has Layer > Transparency > Colour to Alpha and full alpha support, Photopea exports PNG-32 and WebP with alpha, and magick in.png -background white -alpha remove out.jpg does a matte from the command line in one line.

The limit built into a single number

Alpha is one value per pixel. It says how much of the pixel gets through, and it cannot say which wavelengths get through. Real coloured glass, smoke, tinted plastic and water do not attenuate all three channels equally: red glass passes red and blocks green and blue.

So a cut-out of a red wine bottle with a correct alpha channel, placed on a blue background, is wrong: the transmitted colour behind the glass should be filtered, and alpha cannot filter. The professional answer is not a better mask; it is to composite the transmissive parts with blend modes (Multiply for what absorbs light, Screen or Add for what emits it) so the background actually passes through the tint. Cut-outs of glass, flame, smoke and hair-thin highlights are a compositing problem dressed up as a selection problem, which is why they take so long.