How to keep a transparent background when converting images
Transparent logos and cut-outs turn white or black when saved in the wrong format. Here is which formats keep transparency and how to convert without losing it.
By Ranjith R, Creator & Developer of TryImagerPublished Updated 6 min read
Transparency is stored in an extra channel, called alpha, that records how see-through each pixel is. Fully transparent pixels let whatever sits behind the image show through; partly transparent pixels create the soft edges around hair, shadows and anti-aliased text. If the format you save to has no alpha channel, those pixels have to become a solid colour.
Which formats support transparency
| Format | Transparency | Notes |
|---|---|---|
| PNG | Yes, full alpha | Lossless; the safe choice for editing |
| WebP | Yes, full alpha | Much smaller than PNG; supported by all current browsers |
| GIF | On/off only | No soft edges; jagged outlines on curves |
| SVG | Yes | Vector; transparency is the default |
| JPG | No | Transparent areas are filled with a colour |
| BMP | Not reliably | Most software ignores BMP alpha |
Why converting to JPG turns the background white or black
JPG has no alpha channel, so a converter must choose a colour for every transparent pixel. Some tools pick black, which is what the raw pixel data contains; others pick white. TryImager's PNG to JPG tool lets you choose the background colour, so a logo meant for a dark website can be flattened onto the same dark colour instead of a white box.
How to convert while keeping transparency
- PNG to WebP: transparency is kept and the file is usually much smaller. Good for websites.
- WebP to PNG: transparency is kept; the file grows because PNG is lossless.
- Resize PNG or Resize WebP: the canvas starts transparent and alpha is scaled with the colours, so soft edges stay soft.
- SVG to PNG: the vector is drawn onto a transparent canvas at the size you choose.
Compressing transparent images
Lossy WebP keeps alpha, so it is the most effective way to shrink a transparent image. Re-saving a PNG as PNG in the browser rarely saves much, because the browser's encoder is lossless and less tuned than desktop optimisers. Reducing pixel dimensions is the other big lever: a 3000-pixel logo shown at 300 pixels wastes almost all of its bytes.
Limitations
- Converting a JPG to PNG does not create transparency; the background stays solid until you erase it in an editor.
- Animated transparent GIFs or WebPs become still images using the first frame.
- Very faint semi-transparent pixels can look slightly different after lossy WebP compression at low quality.
Troubleshooting
- White halo around a logo after resizing: the source was flattened onto white before you got it — find the original transparent file.
- Background turned black: you saved to JPG without choosing a fill colour, or an app ignored the alpha channel.
- Transparent WebP not accepted by an upload form: convert it to PNG instead.
Tools for this
Keep reading
- PNG vs WEBP: which lossless-friendly format wins?Both handle transparency. Only one of them can also shrink a photo-heavy image by 60-80%. Here is when that gap actually matters.
- JPG vs PNG: which one should you actually use?One throws away detail to stay small, the other keeps every pixel and every transparent edge. Here is how to pick without guessing.
- How to choose the right image format, every timeJPG, PNG, WEBP, GIF, SVG, TIFF — each one was built for a specific job. Pick by content type and you'll rarely get it wrong.
- Common image format problems, and how to actually fix themWhite boxes where transparency should be, files that won't open, uploads that get rejected. Most of these have the same root cause.