The Complete Guide to Transparent PNGs

"Transparent PNG" is one of those phrases everyone uses and few people examine. Once you understand what makes a PNG transparent (and where transparency breaks down) you'll pick the right format every time and stop shipping images with grey boxes around them.

What the alpha channel actually is

A normal photo stores three numbers per pixel: red, green and blue. A transparent image adds a fourth (alpha) which records how opaque that pixel is, from 0 (fully see-through) to 255 (fully solid). That extra channel is why a logo can sit on any background without a rectangle around it. PNG stores alpha losslessly. That's its superpower.

Crucially, values between 0 and 255 give you soft, semi-transparent edges. Good cut-outs use this: instead of a hard on/off cut, edge pixels fade out gradually, which is what makes a cut-out look natural rather than pasted.

When a transparent PNG is the right call

Reach for PNG when transparency is the point:

• Logos and icons that must sit on many different backgrounds.
• Product cut-outs for storefronts, mockups and slide decks.
• UI assets: badges, illustrations, sticker packs.
• Overlays you'll composite onto photos or video.

When it's the wrong call

PNG is lossless, which is wonderful for crisp graphics and terrible for photographs. A full-colour photo saved as PNG can be several times larger than the same image as JPEG or WebP, with no visible benefit. So:

• Photos without transparency → JPEG or WebP. Run them through the Image Compressor.
• Photos that need transparency → PNG for compatibility, or lossless WebP if every target browser supports it (the WebP Converter handles the switch).
• Flat graphics with few colours → PNG is perfect and stays small.

How to make a clean transparent PNG

The fastest route from a plain-background image to a transparent PNG is a colour key: an image editor samples the backdrop colour and turns every matching pixel see-through, leaving your subject on a real alpha channel. Aim for a single tolerance setting that makes the backdrop disappear cleanly without eating into the subject's edges, the result should be a 32-bit PNG with no flattening and no hidden white box.

To be clear about who does what here: we build the format side of this, not the cutout side. Our JPG to PNG converter gives your image a real alpha channel and runs the output through OxiPNG, a lossless optimiser, so the file is as small as a lossless PNG can be: all in your browser. Deciding which pixels should become transparent is a job for an editor with a selection tool, or a dedicated background remover. I'd rather send you to something that does that well than bolt on a colour-key trick that falls apart on the first photo with hair in it.

Avoiding the three classic mistakes

1. The grey halo. A faint ring of old background clinging to the subject usually means tolerance was set too low. Raise it slightly to catch those in-between pixels.
2. The chewed edge. If the subject shares colours with the background, a high tolerance eats into it. Lower the tolerance and accept a little fringe, or reshoot with more contrast.
3. The bloated file. People export a photographic PNG and wonder why it's 8 MB. If the image doesn't actually need transparency, it shouldn't be a PNG at all. If it does, compress or resize it before publishing.

Checking transparency worked

Never trust a white page, a white box on a white page is invisible. Preview the file on a coloured or checkerboard background before you ship it. Our workspace paints a checkerboard behind any PNG result for exactly this reason: what you see erased is what's actually erased. It's a small piece of UI that has saved me from shipping a logo with a white slab behind it more than once.

One last trap: transparency that survives everywhere except where you need it

A PNG's alpha channel is universally supported, but the places you put it aren't equally kind:

• Email clients are the worst offenders. Several render transparent PNGs against a dark background in dark mode, so a black logo on transparency becomes a black logo on black. Ship email logos with a solid background, or a light-coloured version.
• Printing flattens everything. There's no transparent ink. Whatever is behind the image in your document becomes the background, and if nothing is, it's paper white.
• Older Office documents occasionally composite transparency onto white when exporting to certain formats. Check the exported PDF, not the slide.

None of these are PNG's fault. They're just the difference between an image that has transparency and a destination that honours it.

Transparency lives in the alpha channel, PNG is the safe home for it, and the whole game is choosing PNG only when you actually need see-through pixels, then checking the result somewhere that isn't a white page. Get those two habits and the grey boxes stop appearing.

Next: from JPG to a transparent PNG walks the specific two-step conversion, why PNG files get so large tackles the bloat problem, and PNG vs JPG vs WebP vs AVIF is the full format comparison.

Sources

• PNG Specification (Third Edition) (W3C), the alpha channel and colour types
• Alpha compositing (Wikipedia)
• WebP image format support (caniuse.com): for the lossless-WebP-with-alpha alternative
• OxiPNG: the lossless optimiser behind our PNG output