Transparent PNG to JPG: How the Background Color Is Decided

Why JPEG has nowhere to put transparency

A PNG with transparency stores four values per pixel: red, green, blue and alpha. Alpha says how opaque the pixel is, from 0 (fully see-through) to 100 percent (solid). MDN's format guide puts the consequence plainly: JPEG has no alpha channel. A JPEG file holds three values per pixel and nothing else.

So before the picture can be saved as JPEG, something has to sit behind it. Here that is the Background color setting, white unless you change it. Each pixel is blended with that color in proportion to its alpha, and the result is written as an ordinary opaque pixel. The same applies to the 24-bit BMP output. PNG and WebP output keep transparency, so the setting has no effect there.

Worked example: one edge, two backgrounds

Take a logo drawn in dark gray, #1a1a1a, which is 26 on each of the red, green and blue scales. Its edge is anti-aliased: the outermost pixels are only partly opaque so the curve looks smooth. The blend for each channel is alpha x logo value + (1 - alpha) x background value. The table shows one channel of one edge row, converted twice: once onto white (255) and once onto the dark page color #222222 (34).

Pixel opacity	On white (255)	On #222222 (34)
100%	26	26
75%	83	28
50%	140.5 (about 141)	30
25%	198	32
0%	255	34

On white, the edge steps through light grays, which is exactly the soft transition you want against a white page. On #222222 the whole edge sits between 26 and 34, so the logo practically dissolves into the background, which is also correct: a dark logo on a dark page has no contrast to begin with. Now the failure case. If the JPG converted on white is later placed on the dark page, those light-gray edge pixels (83, 140, 198) are baked into the picture and show as a pale outline around the logo. The pixels were mixed with white at conversion time, and nothing can separate them afterward.

Choosing the background color

The rule is a single sentence: pick the color the image will sit on, not the color you like best. A product photo cutout going onto a white shop page wants white. A badge going onto a page with a #f4efe6 cream background wants #f4efe6, entered as that exact hex value, not "something close". A dark-mode interface wants its own surface color.

If you cannot name the destination color, or the image will land on several different backgrounds, JPEG is the wrong output. Convert to PNG instead, or to WebP if the place you are uploading to accepts it, and the transparency stays intact. When the choice is between PNG and JPEG for a flat graphic, the comparison of JPEG and PNG covers the other trade-offs, mostly file size and how each format treats sharp edges.

The same blend with a colored logo

Gray hides what happens in color, so repeat the exercise with an orange edge pixel, RGB (255, 128, 0), at 40 percent opacity. Each channel is blended separately. Onto white: red stays 255, green becomes 0.4 x 128 + 0.6 x 255 = 204, blue becomes 0.4 x 0 + 0.6 x 255 = 153, giving a pale peach (255, 204, 153). Onto #222222 (34 per channel): red is 0.4 x 255 + 0.6 x 34 = 122, green 0.4 x 128 + 0.6 x 34 = 72, blue 0.4 x 0 + 0.6 x 34 = 20, giving a dull brown (122, 72, 20). The same pixel ends up as two quite different colors, and neither is "wrong". Only one of them matches the page the picture is going onto.

The effect is strongest on pictures that are mostly semi-transparent, such as a watermark at 20 percent opacity. Converted onto white it becomes a faint gray stamp. Converted onto black it nearly disappears. If the watermark is the point of the image, check the preview against the real page background before you accept the result.

Shadows, glows and gradients

Soft shadows and glows are made of many semi-transparent pixels, and they are the content that suffers most. On the intended background, a drop shadow at 30 percent opacity looks like a natural darkening. Converted onto a mismatched color, the same pixels become a gray smudge with a visible rectangular boundary, because the shadow was designed to darken whatever lay beneath it and now it darkens a color it was never meant for.

That is why a PNG with a shadow should be converted onto the real page color or left as PNG. White is a safe default only when the final page is white.

Light fringes around a cutout

A different problem produces similar symptoms. If a subject was cut out from a white photo background with a rough tool, the semi-transparent edge pixels often still carry some of the old white in their color values. Placed on a dark background they look like a thin bright rim, even though the blend itself was done correctly.

The cause lies in the source, so the fix does too. Re-cut the edge with a feathered selection or a "remove fringe" step in an editor, or convert onto a background close to the original so the leftover color is invisible. Choosing a darker background in the converter does not clean those pixels; it only changes what they are mixed with.

Black backgrounds and other surprises

Some programs ignore the alpha channel and write whatever color is stored underneath transparent pixels. Those stored values are frequently black, which is why some conversions produce a black rectangle where you expected white. A converter that composites onto an explicit background color avoids the surprise, since it decides the answer instead of leaving it to the file.

JPEG compression adds one more effect. It works on blocks of pixels, and hard transitions between a solid color and sharp edges can pick up faint speckles close to the line. A cleaner result usually needs a higher quality setting, which makes the file larger; the trade-off is explained in the quality guide. For a first full walkthrough of the format change itself, see how to convert PNG to JPG.

Deciding between JPG, PNG and WebP for a transparent image

Three questions settle it. Does the image need to look right on more than one background? Then keep the transparency, with PNG or WebP. Will it sit on one known color, on a site or document you control? Then JPEG with that color as the background is fine and usually gives the smallest file for photographic content. Is the file going to a system that only accepts JPEG, such as many upload forms? Then you have no choice, and the only decision left is the color, so pick it from the page where the picture will be shown.

WebP output deserves a short note: this converter writes it lossy, and it accepts transparent pixels, so a transparent PNG converted to WebP keeps its see-through areas. The conversion article on how to convert images to WebP covers where the option may be missing.