Four channels instead of three
A normal color image stores three values per pixel: red, green, blue (RGB). Transparency-capable formats add a fourth — the alpha channel. It describes the opacity of each pixel: 0 means fully transparent, the full value means fully opaque. And — this is the important part — every value in between means partial transparency. That's exactly what makes soft edges, gentle shadows and anti-aliasing possible.
Why JPG creates the white box
JPG only has the three color channels, no alpha channel. Save a transparent image as JPG, and the software has to replace the transparency with a solid color — usually white. The result: your cut-out logo suddenly sits in a white rectangle. Not a bug, just the logical consequence of the format. Transparency only survives in formats with an alpha channel. Which format fits when is covered in our JPG vs PNG article.
The formats and their transparency support
| Format | Transparency | Note |
|---|---|---|
| PNG | ✅ full alpha channel | standard for logos/graphics |
| WebP | ✅ alpha channel | smaller than PNG |
| AVIF | ✅ alpha channel | even smaller, newer |
| GIF | ⚠️ all-or-nothing | no soft edges |
| SVG | ✅ (vector) | transparency by definition |
| JPG | ❌ none | replaced by a solid color |
The GIF special case is instructive: it only knows "transparent" or "opaque", no in-between. That's why GIF logos often look jagged at the edges — the smooth transitions the alpha channel allows are missing.
The white halo problem
A tricky side effect of partial transparency: when an object is cut out against a white background, remnants of that white mix into the semi-transparent edge pixels. Place the image on a dark background afterward, and a light rim remains — the notorious "halo", especially visible in dark mode. The fix: cut out against transparent rather than against white.
Transparency and file size
The alpha channel costs storage — a transparent PNG is larger than an equally sized one without transparency. So the rule: only use transparency where it's needed. A photo that fills a full rectangle anyway needs no alpha channel and belongs in JPG or WebP. A logo meant to sit on any background needs one — then PNG, WebP, or best of all SVG.
In short
- Transparency = a fourth channel (alpha), stores opacity.
- JPG can't do it — hence the white box.
- PNG/WebP/SVG can — for logos and cut-outs.
- Cut out against transparent, not against white — or you get a halo.
💡 Tip: Need a transparent background gone or checked? Convert and inspect images with the browser-local converter — nothing is uploaded.