Why a transparent PNG turns black (or white) when you convert it
You have a logo on a transparent background. You convert it to JPG, or paste it into a program, or upload it somewhere, and suddenly it sits in a solid black box. Or a white one, with a grubby pale outline around the letters that you never saw before.
Neither is a bug in the usual sense. Both come from how transparency is stored, and once you know that, they are easy to avoid.
Transparency is a fourth number
Every pixel in a normal colour image has three numbers: red, green and blue. An image with transparency adds a fourth, called alpha, which says how opaque the pixel is. Alpha 255 is solid. Alpha 0 is completely invisible. Values in between are partly see-through, which is how soft shadows and smooth edges work.
Here is the important part. A fully transparent pixel still has red, green and blue values. They are not shown, because alpha says the pixel is invisible, but they are stored. Many programs fill them with zeros, which is black. Some fill them with white, and some leave behind whatever colour was there before the background was deleted.
Where the black box comes from
JPG has no alpha channel. When an image with transparency is converted to JPG, the converter has to decide what to do with the transparent pixels. A careful one paints a background colour underneath first, then draws the image on top. A careless one simply throws away the alpha number, and the hidden colour values suddenly become visible. If they were zeros, you get black.
The same thing can happen when uploading to a site that converts images on its servers, or when pasting into software that does not understand alpha.
The fix is to choose the background yourself. Converters like the PNG to JPG tool ask what colour the transparent areas should become, and paint it in before converting. White is the safe default for documents and most web pages.
Where the pale halo comes from
The halo is subtler. Look closely at the edge of a well-made logo on a transparent background and you will find a thin band of partly transparent pixels. They smooth the curve so it does not look jagged, a technique called anti-aliasing.
Those edge pixels are a blend. When the logo was originally drawn on white, the edge pixels are part logo colour and part white. If the image is then placed on a dark background, the white part of the blend shows up as a light fringe.
The same happens in reverse. Remove a background automatically and the edge pixels still contain a little of the old background colour. That is why a logo cut out from a white page, dropped onto navy blue, often has a faint pale outline.
Two ways to deal with it:
- When flattening (converting to JPG), choose a background that matches where the image will be used. A logo headed for a dark green footer should be flattened onto that dark green, not white. The edge blends then look natural.
- When removing a background, use a slightly higher tolerance and soft edges, so the most contaminated edge pixels are faded out rather than kept. The transparent background tool has both settings.
Why GIF edges look jagged
GIF supports transparency, but only as on or off. There are no partly transparent pixels, so there is no smooth edge. Designers used to work around this by giving GIFs a “matte” colour, pre-blending the edges with the colour of the page the image would sit on. It worked on that one page and looked terrible anywhere else. If you have old GIF logos, converting them to PNG will not restore smooth edges that were never there, but it will stop the problem getting worse.
Formats that keep transparency
| Format | Transparency |
|---|---|
| PNG | Full, smooth |
| WebP | Full, smooth, even with lossy compression |
| AVIF | Full, smooth |
| GIF | On or off only |
| ICO | Full (in modern icons) |
| SVG | Full, and it is vector anyway |
| JPG, BMP (usually) | None |
For a website, lossy WebP is often the best of both worlds: a product cut-out that would be a 2 MB PNG can be a 150 KB WebP with its transparent background intact. PNG to WebP handles that.
A quick checklist
- Need transparency? Keep it PNG, WebP or AVIF. Never JPG.
- Must be JPG? Pick the background colour yourself, matching where it will be shown.
- See a pale fringe? The edges were blended with a light colour. Re-cut with soft edges, or flatten onto the target colour.
- Test on the real background before sending a logo anywhere important.