PNG Transparency: How the Alpha Channel Works (and How to Get It Right)

What the alpha channel is in plain English

Every color image on screen is built from three channels: red, green and blue (RGB). Mixing them in different proportions lets a monitor show millions of shades. But those three channels only describe color — they say nothing about whether a pixel should be visible at all.

Visibility is the job of the alpha channel — a fourth channel that PNG adds to RGB (which is why a full-color PNG is called RGBA). For each pixel, alpha stores a single number — its opacity:

• 0 — the pixel is fully transparent, as if it weren't there;
• 255 — the pixel is fully opaque, a normal color;
• anything in between — partial transparency: the lower the number, the more the background shows through.

The easiest way to picture the alpha channel is as a separate black-and-white image laid over the color one: white means "keep as is", black means "erase to transparent", grey means "make semi-transparent". Those 256 levels are exactly what let PNG draw soft anti-aliased edges, drop shadows and frosted-glass effects — things a plain fill could never do.

Why the checkerboard is transparency

Open a transparent PNG in Photoshop, GIMP, Figma or any online editor, and you'll see grey-and-white squares beneath the image. It throws beginners off: "where did this grid come from and how do I get rid of it?"

Relax: it isn't in the file. A monitor physically cannot display "nothing" — it has to paint every dot some color. So editors agreed to draw a neutral checker texture wherever pixels are transparent: that way you can instantly see where the image has pixels and where it has holes. It's purely a visual cue, the same kind of helper as rulers or guides.

Put that PNG on a website, into a slide deck or onto a colored background, and there will be no checkerboard — through the transparent areas you'll see whatever lies behind the image: the page background, a photo, another layer.

PNG-8 vs PNG-32: jagged edges or smooth

PNG can store transparency in two very different ways, and the choice directly decides whether your object's edges look smooth or look like a staircase.

PNG-8 (indexed) holds at most 256 colors in a palette, and its transparency is usually 1-bit: a pixel can be either fully visible or fully transparent. No in-between. For sharp geometric icons without anti-aliasing that's enough, but on any diagonal or curve the edge turns into a staircase (aliasing): there's simply nowhere to store the smoothing semi-transparent pixels.

PNG-24/32 is a full-color image with a true 8-bit alpha channel: 256 levels of opacity per pixel. (PNG-24 is RGB without alpha; the moment you add an alpha channel, each pixel takes 32 bits — hence the name PNG-32.) This is what gives you smooth anti-aliased edges, soft shadows and clean partial transparency.

How to make a transparent background in PNG

The golden rule: remove the background first, then save as PNG. Saving as PNG does not make a background transparent on its own — it only preserves the transparency you created in the editor. If the background was white, it stays white in the PNG.

If your source is in a format without transparency (a JPG, say), you have to cut the background out by hand first: conversion alone won't invent transparency. But converting to PNG does create a container that can actually hold that transparency.

Dark halos, lost alpha and other woes

Most transparency problems come down to two things: what color is stored under the transparent pixels, and whether the software can handle alpha at all.

Fringing and a dark/light halo around the edges

The most common complaint is a thin dark (or white) rim around a cut-out object. It comes from the partly transparent edge pixels. Their color is a blend of the subject and whatever background it was cut from or composited against (that color is called the matte). Cut an object out of a white background, then place it on a dark one, and a light halo shows along the edge — and vice versa.

This is also where premultiplied alpha confusion lives. Premultiplied is a way of storing color already multiplied by its opacity. If one program saved the image as premultiplied and another reads it as straight (un-multiplied) alpha, you get that telltale dark halo around the edges. The fix: mask carefully, decontaminate the edge, and where you have the choice, export with straight alpha or set the matte to match the future background.

Alpha "fell off" during conversion

Sometimes transparency is lost not because of JPG, but because of a careless export: the image was accidentally saved as PNG-8 with 1-bit alpha, or the editor flattened the layers onto a white background. The tell-tale sign is a hard staircase instead of soft edges, or a sudden white box. The fix is simple: re-save from the source as PNG-32 without flattening the transparent layer.

How to check and convert transparency

Before you hand a PNG off, it pays to confirm the transparency is real and clean. It takes about a minute.

When you need to change format without losing transparency, online converters make it easy: WebP → PNG carries the alpha channel from the modern web format into universal PNG, and JPG → PNG prepares a container you can then add transparency to. The full list of conversions is always on the all formats page.

Where transparency is non-negotiable

The PNG alpha channel is an invisible but ubiquitous tool. Here's where it makes or breaks the result:

• Logos. One transparent PNG drops onto a white business card, a dark website, or over a photo — with no white box around it.
• Stickers, decals and emoji. An arbitrary shape with a smooth edge exists only thanks to the alpha channel.
• User interfaces (UI). Icons, buttons, shadows and rounded corners in apps all rest on PNG semi-transparency.
• Collages and overlays. Cut-out subjects, watermarks, frames — anything meant to sit on top of another image.

The logic is simple: the moment an image needs to sit on top of something you can't predict in advance, it needs transparency — and that means PNG (or WebP) with an honest alpha channel.

You can boil it all down to one line: PNG keeps transparency, JPG doesn't. The rest is detail — the alpha type and edge cleanliness, both of which you now know how to handle.