How to compress images and keep transparency

This is the single most common transparency problem, and its cause is simple. JPEG has no alpha channel, so when a transparent PNG is converted every transparent pixel must become an actual colour — and many tools fill them with black without mentioning it.

The result is a logo inside an unwanted dark rectangle. It is not a bug in your file; it is JPEG doing the only thing it can with data it cannot represent.

The fix is either not to convert to JPEG, or to flatten deliberately onto a colour you have chosen. The PNG to JPG tool on this site defaults to white and gives you the switch, because that choice belongs to you rather than to an encoder's default.

A softly anti-aliased edge is stored as partially transparent pixels — a logo's outline might be 70% opaque black fading to 0%. Those pixels also carry a colour, and what that colour is matters when the image is composited.

If a graphic was created against a white background, its semi-transparent edge pixels carry white. Place it on a dark background and that white shows through as a pale halo. The reverse produces a dark fringe on light backgrounds.

Two fixes. Export from your editor with a matte colour matching where the image will actually sit. Or, better, work with genuinely unmatted transparency so the edge pixels carry the subject's own colour rather than a background you assumed.

GIF supports only binary transparency: each pixel is either fully opaque or fully invisible. There is no partial opacity, so there is no way to represent a smooth anti-aliased edge.

The result is the stair-stepped outline familiar from 1990s web graphics, and it is unavoidable in that format. PNG's 8-bit alpha exists precisely to solve it, and WebP inherits the same capability.

PNG-8 has the same limitation for the same reason — reducing to a palette usually reduces transparency to binary as well. If a "PNG optimiser" makes your soft edges jagged, it converted to PNG-8.

Because PNG is lossless, the quality slider does nothing for it. What does work:

• Reduce the dimensions. The single biggest lever. Logos are routinely five times larger than they are displayed.
• Convert to WebP. Same alpha channel, typically 25% smaller losslessly, and smaller again in lossy mode.
• Strip metadata. Small, but meaningful on small files.
• Consider SVG. For logos and icons made of shapes rather than photographs, vector is smaller and sharp at every size.

A great many transparent PNGs on the web sit permanently on a plain white background, where they could be JPEGs at a fraction of the size and look identical.

Transparency is only worth its cost when the backdrop behind the image can change — a logo used on multiple background colours, a product cut-out over varying page sections, an overlay above a photograph. If the background is fixed and known, flatten it and use a lossy format.