Skip to tool
ecech.
🖼️ Image & Photo Tools

JPEG Has No Transparency, So Your Logo Arrives on a Black Box

Every transparent pixel has to become something. Choose the colour instead of letting the canvas default decide.

Original

 

Converted

Size change

Transparent pixels

Before

After

Quality against size

Advertisement

How the calculation works

What happens to a transparent pixel PNG, transparent drop alpha JPEG, black box fill first JPEG, chosen colour An empty canvas is transparent black. Removing the alpha leaves the black.

How to Use This Tool

Choose an image and pick what should sit behind any transparent areas. Everything happens in your browser — the file is never uploaded.

Why transparency turns black

JPEG has no alpha channel. There is nowhere in the format to record that a pixel was see-through, so every transparent pixel must become an opaque colour during conversion.

A browser canvas starts out as transparent black: alpha zero, and red, green and blue all zero as well. Drawing a PNG onto it leaves those untouched pixels transparent, and encoding to JPEG discards the alpha and keeps what is underneath — black.

Filling the canvas with a colour before drawing fixes it completely. That is what the colour picker above does, and it is why a converter that does not offer one produces black boxes.

Choosing the colour

Match the background the image will sit on. A logo destined for a white page wants white; one going onto a dark slide wants that dark colour.

Getting it wrong is visible in a specific way: anti-aliased edges were blended against transparency, so they contain semi-transparent pixels. Flatten them onto the wrong colour and the edge keeps a faint halo of it — a white-matted logo on a dark page has a pale fringe that no amount of resizing removes.

If the destination is unknown, keep the PNG.

Which format for which image JPEG wins photographs, gradients, anything with soft detail PNG wins screenshots, text, line art, flat colour, logos both lose a screenshot saved as JPEG: bigger and visibly worse JPEG discards detail the eye forgives on a photograph and notices immediately on a hard edge, where it leaves coloured fringing.
A screenshot converted to JPEG frequently comes out larger than the PNG as well as worse.

When JPEG is the wrong answer

JPEG discards information the eye is poor at noticing, which works beautifully on photographs and badly on sharp edges. Around text, line art or a screenshot it produces coloured fringing and blocky artefacts that no quality setting fully removes, because the compression works on 8×8 blocks and a hard edge crosses them.

PNG compresses flat colour exactly and extremely well, so a screenshot saved as JPEG is frequently both larger and visibly worse than the original. If the size comparison above shows the JPEG growing, that is the format telling you it is the wrong one.

WebP is offered as an alternative because it does both: lossy like JPEG, lossless when it needs to be, and it keeps an alpha channel. It is supported by every current browser and by fewer desktop applications, which is the only real reason to still choose JPEG.

What quality actually means

The quality number is not a percentage of anything. It selects how aggressively the encoder rounds the frequency coefficients in each block, and the relationship to file size is steep and non-linear.

Between roughly 0.8 and 0.95 most photographs look identical while the file grows substantially, so 0.85 is a reasonable default. Below about 0.6 the block structure becomes visible in flat areas such as skies.

One thing worth knowing: re-encoding a JPEG loses quality again even at quality 1.0, because the original rounding cannot be undone. Always convert from the original PNG rather than from a JPEG you made earlier.

Advertisement

Frequently Asked Questions

Why does my PNG have a black background after converting to JPG?
Because JPEG has no alpha channel, and a browser canvas starts as transparent black. Dropping the alpha leaves the black behind. Filling the canvas with a colour before drawing the image fixes it entirely.
Can a JPG have a transparent background?
No. The format has no alpha channel at all, so every pixel is opaque. If you need transparency, keep the PNG or use WebP, which supports both lossy compression and an alpha channel.
What background colour should I choose?
The colour of whatever the image will sit on. Anti-aliased edges were blended against transparency, so flattening onto the wrong colour leaves a visible halo of it — a white-matted logo on a dark page keeps a pale fringe.
Why is my converted JPG bigger than the PNG?
Because the image is the wrong sort for JPEG. PNG compresses flat colour exactly and very efficiently, so screenshots, text and line art often come out both larger and visibly worse as JPEG. If the size grows, keep the PNG.
What JPEG quality setting should I use?
Around 0.85 for photographs. Between 0.8 and 0.95 most images look identical while the file grows substantially, and below about 0.6 the 8×8 block structure becomes visible in flat areas like skies.
Is my image uploaded anywhere?
No. The conversion uses a canvas in your browser and there is no server involved, so the file never leaves your device. You can confirm it by disconnecting from the network before converting.

Related tools in Image & Photo Tools

Browse all Image & Photo Tools tools