Transparent backgrounds: PNG, WebP and why yours keeps breaking

Transparency is the one image property that silently disappears. Nothing warns you, no error appears, and the file looks fine on your white canvas, until someone drops it onto a coloured background and a white rectangle appears around it.

There are only a handful of ways this can happen, and all of them come down to the same thing: somewhere in the chain, a format that cannot store transparency was used, and the empty area was filled in with white.

Which formats can hold transparency

The difference between GIF and the others is worth understanding. GIF transparency is binary: each pixel is either fully visible or fully invisible, which makes curved edges look like a staircase. PNG and WebP store 256 levels of transparency per pixel, so edges fade smoothly into whatever is behind them.

Finding out what went wrong

Step 1: Check the file extension first

Look at the actual extension, not the name. A file called logo-transparent.jpg is not transparent and cannot be. This catches the problem about a third of the time, and it takes one second.

Step 2: View it against a dark background

Open the file in a browser and set the page background to black, or drop it into a slide with a dark fill. If you see the dark colour through the empty areas, transparency is intact. If you see a white rectangle, it is not.

Step 3: Look closely at the edges

Zoom to 400% on a curved edge. A clean cutout fades smoothly. A halo of pale pixels means the edge was blended with a white background before removal. A jagged staircase means it went through GIF or a hard-edged selection at some point.

Step 4: Trace where it was flattened

Work backwards through the chain. Exported from a design tool with a background layer visible? Saved out of a photo app that defaults to JPG? Downloaded from a website that converts everything? The flattening happened at one specific step, and going back one step usually recovers the original.

A flattened file cannot be un-flattened. Once transparency has been replaced by white pixels, the information about what was transparent is gone. Removing the white again is a fresh background-removal job with all its usual edge problems. Keep the layered master file, the .psd, .ai, .afdesign or Canva project, because that is the only true source.

Exporting transparency correctly

In Canva: Download → PNG → tick Transparent background. This requires a Pro subscription. Without it, the free workaround is to export with a background colour you can remove afterwards, though the edges will be worse.

In Photoshop: File → Export → Export As → PNG, with Transparency ticked. Make sure the background layer is hidden or deleted first. A visible white layer exports as white regardless of the checkbox.

In GIMP: Layer → Transparency → Add Alpha Channel before deleting the background, then File → Export As with a .png extension. Without the alpha channel, deleting the background fills it with the background colour instead.

In Figma: Select the frame, then in the export panel choose PNG and untick any background fill on the frame itself. Frames have a default white fill that catches people constantly.

PNG or WebP for transparency?

The rule follows the same logic as everywhere else on this site. Use WebP where you control the software, PNG where you do not. Your own website is WebP territory. A logo emailed to a printer, a supplier or a marketplace is PNG, every time.

In short

If transparency has vanished, a format that cannot store it was used somewhere. Check the extension, test against black, and go back to the layered master rather than trying to repair the flattened export.

For logos specifically, there is a better answer than either PNG or WebP. See SVG vs PNG for logos, which scales to any size without a single fuzzy edge. For the broader format decision, WebP vs PNG vs JPG covers the rest.