A halo around a transparent PNG is usually not proof that PNG transparency is broken; it is evidence that edge color and opacity were prepared or interpreted for a different background.
Anti-aliased edge pixels are partly transparent, not simply on or off. They still carry color information. When an image was cut out against white, flattened too early or resized through the wrong alpha workflow, those hidden colors become visible on a contrasting page. The safest fix starts with the source layers rather than repeatedly deleting edge pixels.
Separate color from opacity
The PNG specification supports an alpha channel alongside color samples. Alpha describes opacity; it does not automatically replace the RGB values stored in a partly or fully transparent pixel. A soft edge can therefore contain a low-opacity light color. It looks acceptable on white but creates a pale fringe on black. A dark matte creates the reverse problem.
Identify where the matte entered
Place the asset over white, black, saturated red and saturated green. A fringe that resembles the original background points to matte contamination during selection, compositing or export. A fringe that appears only after resizing suggests that the resampling stage mixed transparent edge color with neighboring pixels. Compare the original-size export before blaming the browser.
Understand straight and premultiplied alpha
PNG normally stores unassociated, often called straight, alpha. Some graphics pipelines calculate with premultiplied color, where RGB values have already been scaled by opacity. Converting between the two incorrectly can brighten or darken edges. Do not toggle a premultiplication option blindly: document what the editor, renderer and export step expect, then test a known soft-edged shape.
Repair from the cleanest source
Return to the layered source, refine the mask without shrinking hair or soft detail, remove the old matte color and export once. If only a flattened PNG remains, use a decontamination or defringe operation cautiously and inspect at normal display size. Keep an untouched copy because aggressive edge replacement can create a crunchy outline that is worse than the halo.
Halo symptom to likely workflow fault
| Symptom | Likely cause | First test |
|---|---|---|
| White fringe on dark backgrounds | Light matte stored in soft edge pixels | Preview over black and saturated colors |
| Dark fringe on light backgrounds | Dark matte or alpha conversion error | Compare straight and premultiplied import settings |
| Halo only after resize | Resampling mixed transparent RGB | Export at target size from the layered source |
| Jagged edge after cleanup | Mask was contracted or erased too far | Restore source and refine transparency non-destructively |
Clean export checklist
- Keep the layered source and an untouched master.
- Preview transparency over several contrasting colors.
- Resize before the final export when possible.
- Confirm the renderer's alpha expectation.
- Inspect both 100% zoom and the real layout size.
The most durable solution is a documented color-and-alpha workflow. A transparent checkerboard shows opacity, but only varied backgrounds reveal whether edge color is genuinely portable.
