PNG Transparency Explained
A transparent image has areas you can see through. Placed on a web page, slide or document, whatever is behind it shows through those areas, instead of a white or colored box.
How it works: the alpha channel
Each pixel stores red, green and blue, plus a fourth value called alpha: 0 is fully transparent, 255 is solid, and values in between are partly see-through. Partial alpha is what lets soft edges, drop shadows and smooth text blend into any background.
Transparent vs white background
A white background is just white pixels. It looks transparent on a white page but shows as a white box on any other color. The checkerboard you see in editors, and in our previews, means “transparent”; it isn’t part of the image.
Which formats keep transparency
| Format | Transparency | Typical use |
|---|---|---|
| PNG | Yes, full alpha | Logos, icons, cut-outs, screenshots; lossless |
| WebP | Yes, full alpha | Smaller files for websites; lossy or lossless |
| JPG | No | Photos; transparent areas must be filled with a color |
Why JPG can’t keep it
The JPG format has no alpha channel at all, so converting a transparent PNG to JPG has to put a color behind the transparent areas. In PNG to JPG you choose that background color, and soft edges are blended into it, so pick the color of the place where the image will be used. Once flattened, the transparency can’t be recovered from the JPG.
Typical uses
- Logos and icons that must sit on different colored backgrounds.
- Overlays and watermarks placed over photos or video.
- Product cut-outs for shops and marketplaces.
- Screenshots and interface graphics, which are usually opaque. PNG suits them for sharpness, not for transparency.
Keeping transparency when converting
- PNG to WebP keeps it: PNG to WebP gives smaller files for the web.
- WebP to PNG keeps it: WebP to PNG for apps that don’t accept WebP.
- PNG or WebP to JPG loses it; you choose the fill color.
- Compress PNG keeps transparency, including in 256-color palette mode.
- Resizing keeps transparency in PNG and WebP output.
Fringes and halos
A pale or dark fringe around a cut-out usually means it was flattened onto one color and later made transparent again. Keep the original transparent file as your master, and only flatten in the final export.