PNG to JPG Without Black Backgrounds or Halos Around the Edges

A PNG can store four channels per pixel: red, green, blue and alpha, where alpha says how opaque the pixel is. PNG color type 6 is exactly that, and it is what most image editors write when a layer has a transparent background.

JPEG stores no alpha at all. The JFIF format most JPGs use defines a file as one or three color components, nothing more. So every transparent and half-transparent pixel in the PNG has to be turned into a solid color before encoding, and the only question is which color.

In a browser canvas, a fully transparent pixel is stored as rgba(0, 0, 0, 0): zero in every channel. Canvases also store color premultiplied by alpha, so a transparent pixel has no color left in it to recover even if the PNG originally had one there.

When a JPEG encoder takes the canvas, it reads red, green and blue and ignores alpha. Zero, zero, zero is black. Any converter that draws the PNG and encodes without first painting a background produces the black rectangle, and the same thing happens in many programs that flatten layers without asking.

The fix is to fill the canvas with a solid color before the image is drawn. The PNG is then composited onto that color, and the JPEG encoder sees an image that is already fully opaque.

Drawing an image onto a background uses the "over" operator from Thomas Porter and Tom Duff's 1984 paper "Compositing Digital Images", which every graphics system since has implemented. For each channel:

result = alpha × foreground + (1 − alpha) × background

At alpha 1 the pixel keeps its color, at 0 it becomes the background, and in between it is a weighted mix. The in-between pixels are the important ones. Anti-aliased edges, drop shadows, glows and soft brushes are all partly transparent, and after flattening they contain a share of the background color, permanently.

That is the source of the halo. Flatten a dark logo onto white, then place the JPG on a grey page, and every edge pixel carries a little white that the grey page does not. The result is a faint pale outline that traces the shape. Flatten onto black and put it on white, and the outline is dark. The only clean result comes from flattening onto the color the image will actually sit on.

JPEG was designed for continuous-tone photographs, and its compression works by discarding high-frequency detail inside 8×8 blocks. That is invisible on a photograph, where fine detail is mostly noise. It is very visible on a sharp edge between two flat colors, because a sharp edge is nothing but high-frequency detail. Cut the high frequencies and the edge rings: faint ripples appear along both sides of every letter and line, a direct consequence of approximating a step with a limited set of cosine waves.

JPEG also usually stores color at half resolution in each direction, one color sample per 2×2 block of pixels. Brightness detail survives, so black text on white looks fine, but thin, saturated colored text, such as red on dark blue, smears into its surroundings.

And the size argument often fails for these images. PNG compresses large areas of identical color extremely well, so a screenshot of an interface may be only slightly larger as PNG than as JPG, or smaller.

A PNG is lossless, so converting it to JPEG is the first and only lossy step the image goes through. That changes the calculation compared with converting an existing JPG or WebP. There are no earlier artefacts to compound, and a quality of 85 to 90 produces a file very close to the original in appearance while still being a small fraction of the PNG's size.

If the JPG has to meet a size limit, reduce the dimensions before lowering quality. A photo at 4000 pixels wide displayed at 1200 is carrying eleven times the pixels it needs, and removing them costs nothing visible, while dropping quality below 70 starts to show in skies and skin.