Which formats support transparency?
Transparency comes in two flavours. A full alpha channel stores 256 levels of opacity per pixel, so edges fade smoothly into whatever is behind them. Binary transparency only records on or off, which leaves hard, jagged edges. The format you pick decides which kind you get — and whether you get any at all.
| Format | Transparency type | Best for |
|---|---|---|
| PNG | Full alpha (256 levels) | Default choice, editing masters, maximum compatibility |
| WebP | Full alpha (256 levels) | Transparent images on the web, smaller files |
| SVG | Native, resolution-independent | Logos, icons, scalable graphics |
| GIF | Binary (on/off only) | Simple animations where hard edges are acceptable |
| JPG | None | Photos with no transparency |
Why is PNG the safe default?
PNG is the format most people mean when they say transparent image. Its full alpha channel records 256 levels of opacity, so soft shadows, anti-aliased text, and feathered edges blend cleanly onto any background. Just as importantly, PNG is supported by every browser, operating system, office app, and design tool, which makes it the format least likely to surprise you. If you need to make a background transparent, PNG is the natural format to save to. For a deeper look at how the alpha channel works, see PNG transparency.
When is WebP better than PNG?
WebP supports the same full alpha channel as PNG but compresses far more efficiently, so a transparent WebP is typically much smaller than the equivalent PNG with identical edges. On a website, that means faster loads and better Core Web Vitals without sacrificing transparency. Every modern browser supports it, so for transparent images that live on the web, WebP is usually the best pick. You can convert PNG to WebP and keep the transparent background intact.
When should you use SVG for transparent graphics?
SVG is a vector format, so transparency is built in — anywhere you don't draw a shape simply stays clear. Because it's defined by maths rather than pixels, an SVG stays razor sharp at any size, which makes it the best choice for logos, icons, and illustrations that need to scale from a favicon to a billboard. It isn't suited to photographs, but for flat, scalable artwork nothing beats it. Learn more in what is an SVG.
Why can't JPG do transparency?
JPG was designed for photographs and has no alpha channel at all. When you save an image with transparent areas as JPG, those areas are flattened onto a solid color — almost always white — and the transparency is gone for good. That's why a logo saved as JPG shows up with an ugly white rectangle behind it. If you're choosing between the two for a photo without transparency, the trade-offs are covered in PNG vs JPG. GIF is a step up from JPG here, but only just: it offers binary transparency, where each pixel is fully opaque or fully clear, so curved and anti-aliased edges look hard and pixelated.
Frequently asked questions
- What is the best image format for transparency?
- PNG is the best all-round choice because it supports a full 256-level alpha channel and works everywhere. For web pages, WebP gives the same smooth transparency at a smaller size, and SVG is best for logos and icons that must scale.
- Does JPG support transparency?
- No. JPG has no alpha channel, so any transparent area is filled with a solid color — usually white. If you save a transparent image as JPG, the transparency is lost permanently.
- Why does my transparent GIF have jagged edges?
- GIF only supports binary transparency: each pixel is either fully visible or fully invisible. There are no partial-opacity pixels to smooth the edges, so curves and text look hard and pixelated. PNG or WebP avoid this.
- Should I use PNG or WebP for transparent images?
- Use WebP when the image lives on a website, since it keeps the same smooth alpha as PNG but is typically much smaller. Keep PNG for editing masters, email, and anywhere you need guaranteed compatibility.