Menu

Search toolsChangelog

to move to openDescribe the problem, not the tool

PNG to JPEG without the black background

JPEG stores three colour channels and no alpha channel, so the transparency has to become some actual colour during the conversion. Converters that never ask leave the transparent pixels at whatever was underneath them in memory, which is zero — black. Setting the background to #ffffff paints the see-through parts white before anything is encoded, which is what a logo dropped onto a white page needs.

Any PNG, including 16-bit, palette and interlaced ones. It is read in this tab and never sent anywhere.

The JPEG quality scale, 1 to 100. Around 80 is where most people stop being able to see the difference.

A hex colour such as #ffffff or #fff. JPEG cannot store transparency, so transparent pixels are painted onto this first.

JPEG size
The size of the file offered below, in units of 1,024 bytes.
PNG size
Smaller by
Dimensions
Transparent pixels
What to take away
  1. A transparent PNG has colour values under the transparent pixels, and they are often black; the alpha channel is the only thing that was hiding them.

  2. Match the background to whatever the JPEG will sit on. White for a document, and the page colour for a web banner, otherwise the edge shows.

  3. Soft edges are blended against the colour you choose, so changing your mind later means converting the original PNG again rather than editing the JPEG.

How it works

How it is done

  1. Read the chosen file in this tab and check the eight-byte PNG signature, then walk the chunk chain for IHDR, PLTE, tRNS, IDAT and pHYs.
  2. Decompress the concatenated IDAT chunks as one zlib stream, using the browser's own DecompressionStream rather than a bundled inflater.
  3. Undo the per-row filter — None, Sub, Up, Average or Paeth — working down the image, because each row is predicted from the one above it and the pixel to its left.
  4. Expand the samples to eight-bit RGBA, whatever the file's colour type and bit depth, reassembling the seven passes first if the PNG is interlaced.
  5. Composite every pixel onto the chosen background colour using its alpha, so a transparent pixel becomes that colour rather than whatever was underneath it.
  6. Convert to Y, Cb and Cr with the full-range BT.601 coefficients that JFIF specifies, and halve the resolution of the two colour planes with a box filter if 4:2:0 is in use.
  7. Take the discrete cosine transform of each 8x8 block, divide by the Annex K quantisation table scaled for the chosen quality, and round.
  8. Huffman-code the coefficients with the Annex K tables, stuffing a zero byte after every literal 0xFF, and write the JFIF marker segments around the result.

What it assumes

  • Transparency is flattened onto the chosen colour before anything else happens, and the blend is done in sRGB rather than in linear light. That is not physically correct — a half-transparent pixel comes out a few per cent darker than it should — but it is what a browser canvas and every image editor do, so the JPEG matches the PNG you were looking at.
  • Quality is the scale from Annex K of the JPEG specification, not the browser's. The same number gives byte-for-byte the same file here in every browser, but it will not match "quality 82" in Photoshop or GIMP, because each of those starts from different tables.
  • Below quality 90 the two colour channels are stored at half resolution in each direction. On a photograph this is invisible; on saturated text or thin coloured lines it shows as fringing, which is why the setting can be forced to 4:4:4.
  • A 16-bit PNG is reduced to eight bits by keeping the high byte of each sample. JPEG is an eight-bit format, so the low byte has nowhere to go.
  • Colour profiles are not carried across. An iCCP, gAMA or cHRM chunk in the PNG is ignored and the result is written as plain sRGB, so a wide-gamut image will come out looking flatter than the original.

Common questions

Can I choose which colour replaces the transparency?

White is used, because it is what a document, an email and most web pages sit on. If the image will sit on a dark background, flatten it onto that colour in an editor first — a JPEG has no alpha channel at all, so the choice has to be made before the format changes.

Should I keep the PNG as well?

Yes, if the transparency might be needed again. Flattening is irreversible: once the background is white it cannot be made transparent again without cutting the subject out by hand. Convert a copy and keep the original as the master.

Sources

The full method, worked example and every assumption behind this figure are on PNG to JPEG Converter.