Enlarging a transparent PNG without a dark fringe

A transparent PNG that comes back from an upscaler with a grey or black halo around every edge has not been badly upscaled. It has been damaged in a step before the upscaling, and once you know which step, the whole problem is easy to avoid. Processing that keeps the transparency intact is mostly about not discarding the colour information that lives underneath the transparent pixels.

Where the dark fringe comes from

A PNG stores four channels: red, green, blue, and alpha. The alpha channel says how opaque each pixel is. What surprises people is that fully transparent pixels still hold colour values — you just cannot see them.

Many image pipelines throw that hidden colour away. When an image is loaded into a canvas and read back, the colour under any fully transparent pixel is commonly reset to zero, which is black. Nothing looks wrong yet, because those pixels are still invisible.

The damage appears at the next step. An upscaling model works on colour, and it works on neighbourhoods of pixels rather than one pixel at a time. Along the edge of your artwork there is a band of partly transparent pixels — that band is what makes the outline look smooth instead of jagged. When the model reconstructs those pixels, it mixes in the black that was just written into the transparent region next door. The black is now inside partly opaque pixels, so it is visible, and you get a dark fringe tracing every edge in the image.

It is worst exactly where transparency matters most: antialiased outlines, soft drop shadows, glows, and hair or fur cut out of a photograph.

What has to happen instead

Three things, and all three have to be true at once:

That is how Pixmend handles it, so a transparent PNG stays transparent and the edges stay clean. There is no setting to turn on for this; it is simply what happens.

What you should do

Start from the PNG, not from a copy. If the file has already been flattened onto a white background, or saved as JPEG at any point, the transparency is gone and no processing can bring it back. Go and find the original.

Do not flatten it "to be safe" first. This is a common habit for people who have been burned by the fringe before. It solves the fringe by giving up the thing you wanted.

Watch out for chat apps and messaging clients. Sending a PNG through one often returns a JPEG, silently, with the transparency replaced by white.

Match the model to the artwork. Logos, icons and line art belong on the illustration model; a subject cut out of a photograph belongs on the photo model. The transparency is handled the same way either way, but the colour inside the shape is not.

How to check the result

Open the result at full size and look at the edges, not the middle. The middle of a shape is opaque and will look fine even when the edges are ruined.

• Put it over a dark background. A fringe hides on white and is obvious on black. If your artwork is destined for a dark interface, check it there.
• Look at soft edges specifically. Drop shadows, glows and blurred edges are made almost entirely of partly transparent pixels, so they show problems first.
• Look at fine detail on the boundary. Hair, fur, foliage and thin strokes that cross the outline are the hardest case.
• Check that semi-transparent areas are still semi-transparent. A logo with a half-opacity element should not come back solid.

What this will not do

It will not create transparency in an image that does not have any. This is reconstruction, not editing — a photograph with a real background stays a photograph with a real background.

It also will not repair transparency that was already lost. If the fringe is baked into the file you are starting from, it is now part of the colour data, and enlarging the image gives you a larger fringe.

The result is saved as PNG, which is the point: it is the format that carries the alpha channel through to whatever you use the image in. All of this runs inside your browser, so unreleased artwork and client assets never leave your machine.