FluffyBench

How do I keep transparency when converting an image?

Your cutout can look perfect on white and still carry a white box onto a dark slide.

PNG and WebP can keep the background clear; JPG bakes a solid background in.

FluffyBench · 8 min read · Measured alpha values in a first-party SVG-to-PNG conversion

Which image formats keep transparency?

PNG, WebP, and AVIF can keep a see-through background; JPG can’t. Think of a cutout as a window cut into a poster: wherever the window is, you see whatever sits behind it. In a picture file, every tiny square, called a pixel, has a color. A transparent image gives each pixel one more number, called alpha, that says how much of the background should show through: none, all of it, or a little at a soft edge.

Here’s a flower cutout over a checkerboard, which is how apps show clear areas, beside its alpha drawn in grayscale: black is clear, white is solid, and gray is in between.

A red and yellow flower cutout with clear corners and partly transparent edges, shown over a checkerboard.

Flower PNG over a checkerboard

A grayscale view of the flower transparency: a black background, gray edge pixels, and a white solid flower.

Transparency shown in grayscale

  1. Partly clear petal edge

    This edge pixel has alpha 117 of 255, so a little of the background shows through and softens the edge.

  2. Clear background pixel

    This pixel has alpha 0 of 255, so the background shows through completely.

  3. Solid petal pixels

    The flower’s solid middle, white in this view, has alpha 255 of 255; it covers the background.

A magnified run of pixels across the flower edge; alpha values from top to bottom are 0, 0, 117, 255, 255.

Flower edge · 12 times

A magnified run of pixels across the flower edge; alpha values from top to bottom are 0, 0, 117, 255, 255.

The grayscale view of the same edge pixels; alpha values from top to bottom are 0, 0, 117, 255, 255.

Same edge · grayscale view

The grayscale view of the same edge pixels; alpha values from top to bottom are 0, 0, 117, 255, 255.

The grayscale view makes the clear, partly clear, and solid areas easy to compare. How we measured and reviewed

Those in-between pixels make a curved petal look smooth, but they only survive in a format with room for alpha. We saved the flower as a WebP and as a JPG with a white fill; look at the corners outside the petals.

The flower PNG displayed over a checkerboard, visible through its corners.

Transparent PNG source

The flower WebP displayed over a checkerboard, visible through its corners.

WebP copy

The flower JPG with a white background covering the checkerboard.

JPG with white fill

  1. PNG keeps the clear area

    The checkerboard shows through the space around the flower.

  2. WebP keeps it too

    The same corner is still see-through in the WebP copy.

  3. JPG saves a white background

    The white fill is now part of the picture and covers the checkerboard.

PNG and WebP keep the clear corners; the JPG fills them with white.

Why does a JPG get a solid background?

JPG has no room for alpha, so every pixel has to be solid. When you turn a transparent image into a JPG, the converter paints the clear areas with one color first. That color is called the fill, or matte.

Here’s the same petal edge from the PNG and from the white-fill JPG, first on a white page, then on a dark one.

Two matching close-ups of the flower edge on a white page: the transparent PNG on the left and the white-fill JPG on the right look almost the same.

On white · PNG left, JPG right

The same two close-ups on a dark page: the PNG edge blends into the dark, while the JPG carries a white square and a pale rim.

On dark · PNG left, JPG right

  1. Same look on white

    On a white page, the white fill blends in and both edges look alike.

  2. PNG takes on the dark

    Its clear corner and soft edge show the dark page behind them.

  3. White fill shows

    The JPG brings its white square and a pale rim onto the dark page.

A fill only disappears on a background of the same color.

So pick by where the image will go. If it’ll always sit on one color, a JPG filled with that color works. If it might land on different backgrounds, like a light slide and a dark one, keep it as PNG or WebP.

Can converting a JPG to PNG restore transparency?

No. Once the fill is saved in a JPG, nothing in the file remembers where the clear areas were. Converting it to PNG or WebP changes the format, but the white is just white pixels now.

Here’s the white-fill JPG next to the PNG and WebP copies we made from it.

The white-fill JPG of the flower, displayed over a checkerboard that its solid pixels hide.

JPG with white fill (source)

A PNG copy of the JPG, with its white background covering the checkerboard.

PNG copy · still solid

A WebP copy of the JPG, with its white background still solid.

WebP copy · still solid

  1. Fill already saved

    The JPG holds white pixels where the clear corner used to be.

  2. PNG keeps the white

    Saving that JPG as PNG doesn’t make the corner clear again.

  3. So does WebP

    The WebP copy gets the same solid white corner.

The white matte stays visible in both later copies.

To get the cutout back, you’ll need the transparent original, or an image editor to cut the background out again.

Doing it in FluffyBench

To keep the clear background, make a PNG with FluffyBench’s PNG converter. Its starting settings already keep transparency, so the only thing to watch is one color setting.

Here’s the whole job, turning the WebP flower into a PNG that keeps its clear background.

  1. PNG converter intake with the Choose images button.
    PNG converter intake with the Choose images button.
    Step 1. Choose the image with the clear background. Here it's the flower, saved as a WebP.
    1. Choose images opens your file picker.
  2. The PNG converter header with the Settings gear button.
    The PNG converter header with the Settings gear button.
    Step 2. Settings is optional: the starting settings already keep transparency.
    1. The gear opens Settings and closes it again.
  3. PNG encoding set to Advanced local encoder, with PNG color on RGBA.
    PNG encoding set to Advanced local encoder, with PNG color on RGBA.
    Step 3. Under More options, PNG color is the one setting that can drop transparency. Leave it on RGBA.
    1. Advanced local encoder shows the PNG color choice.
    2. Keep RGBA. The two "no alpha" choices drop transparency.
  4. Convert is ready for the chosen flower image.
    Convert is ready for the chosen flower image.
    Step 4. Close Settings with the gear and press Convert.
    1. Convert makes the PNG copy.
  5. The finished PNG tile: the flower over a checkerboard, with both file sizes.
    The finished PNG tile: the flower over a checkerboard, with both file sizes.
    Step 5. Check the result: the checkerboard around the flower means the background is still clear.
    1. Checkerboard around the flower: transparency kept.
  6. The Download button after the PNG is finished.
    The Download button after the PNG is finished.
    Step 6. Download saves the PNG copy to your device.
    1. Download saves the PNG copy.

The WebP converter keeps transparency at its starting settings too, as the flower’s WebP copy shows. When the destination needs a JPG, the fill color is the setting that matters.

FluffyBench’s JPG converter asks which color to fill the clear areas with. Here it’s set to white, for a white page.

  1. Transparent areas, Fill color, and the White color button in JPG Settings.
    Transparent areas, Fill color, and the White color button in JPG Settings.
    Step 1. Choose the flower PNG, open Settings with the gear, and find Transparent areas.
    1. This button opens the fill colors.
  2. Transparency fill dialog with color swatches, a Hex color field, and Apply.
    Transparency fill dialog with color swatches, a Hex color field, and Apply.
    Step 2. Pick the color of the page or slide the JPG will sit on.
    1. A swatch fills the clear areas with that color.
    2. Or type a Hex color, then press Apply.
  3. Convert is ready after Settings is closed.
    Convert is ready after Settings is closed.
    Step 3. Close Settings with the gear and press Convert.
    1. Convert makes the JPG with that fill.
  4. The finished JPG tile: the flower on white, with the note Transparent pixels use the selected matte and the label Transparency changed.
    The finished JPG tile: the flower on white, with the note Transparent pixels use the selected matte and the label Transparency changed.
    Step 4. The result shows the fill, and FluffyBench flags that the clear areas changed. Download it as a separate copy and keep your transparent original.
    1. White now fills the clear areas.
    2. Transparency changed marks the fill.

Starting from an SVG logo? FluffyBench’s SVG converter turns it into a PNG that keeps the clear background; that’s how this flower began. Hang on to the SVG for later edits, and the SVG export guide helps you choose the PNG’s pixel size.

Need a copy that keeps the clear background?

Want a WebP copy that keeps the clear background?

Need a JPG with a background color you choose?

How do I check transparency before sharing an image?

A white box or a pale rim is easy to miss on a checkerboard. Before you send the copy, look at it on a dark background and a light one.

FluffyBench’s Image Viewer can swap what sits behind an image without touching the file. Here’s the flower PNG checked that way.

  1. The flower PNG open in the Image Viewer over a checkerboard, with the Background menu open.
    The flower PNG open in the Image Viewer over a checkerboard, with the Background menu open.
    Step 1. On a computer, open the saved copy in FluffyBench's Image Viewer and open the Background menu.
    1. Background changes what sits behind the image.
    2. Choose Dark, then Light.
  2. The same flower PNG on a dark background, with no box around it.
    The same flower PNG on a dark background, with no box around it.
    Step 2. On Dark, a clear background disappears. A white box or a pale fringe would show up here.
    1. Dark is the background now.
  3. The same flower PNG on a light background.
    The same flower PNG on a light background.
    Step 3. On Light, look for dark fringes. These backgrounds are only for viewing; the file doesn't change.
    1. Light is the background now.

Last, open the copy where it’s going, like a slide or a web page, and look once more.

Want to see your copy on light and dark backgrounds?

Search FluffyBench