PNG is the only mainstream format that handles transparency well, which is why it's the go-to format for logos, icons, and any image that needs to sit on a varied background. Here's how it works under the hood.
Transparency in images sounds simple — some pixels are see-through. But the implementation matters, and PNG handles it in a way no other common format does well. This article explains how PNG transparency works, when to use it, and when a different format would serve you better.
A normal image pixel has three color values: red, green, blue (RGB). PNG adds a fourth value — alpha — which encodes opacity from 0 (fully transparent) to 255 (fully opaque). Values in between (1-254) are partially transparent.
The alpha channel is what makes anti-aliased edges look good. Around the edge of a circular logo, pixels aren't fully colored or fully transparent — they're a smooth gradient that produces a clean edge regardless of the background color. JPG can't do this; its edges are always hard-coded against whatever background was present at save time.
The simplest form: each pixel is either fully opaque or fully transparent. GIF uses this. Edges look pixelated because there's no smooth gradient.
Use case: pixel art, simple icons where smooth edges don't matter.
One specific color in a palette is designated as transparent. Older PNG-8 files use this. Pixels with that exact color appear transparent; everything else is opaque.
Limitation: same as binary — no smooth gradients.
Each pixel has its own opacity value from 0 to 255. This is what PNG-24 supports, and it's what people mean when they say "PNG transparency". Smooth edges, semi-transparent shadows, and complex composites all work.
This is the type that matters for design work. When someone exports "a PNG with transparent background", they mean this.
Logos that appear on different backgrounds need transparency. A solid-background logo locks you into one background color forever. A transparent PNG works on any background.
Cutout-style designs where one element sits on top of another need transparency. Product photos shot against a colored backdrop and then cut out for a website. Stickers and badges. Decorative graphics in a layout.
Web app icons, button overlays, decorative graphics — anything that needs to sit on top of changing backgrounds.
Semi-transparent watermarks need the partial-opacity capability that only PNG (and newer formats) provide.
PNG is lossless, which means it's much larger than JPG/WebP for photographic content. A typical photo is 5-10× larger as PNG than as JPG. Unless the photo needs transparency (rare), use a lossy format.
If the image fills the background and doesn't need to overlay anything, it doesn't need transparency. Save as WebP or JPG and get a smaller file.
WebP supports the same 8-bit alpha channel as PNG and produces files that are typically 30-50% smaller. If your audience uses modern browsers (and they do — WebP has been supported in Safari since 2020), use WebP with alpha instead of PNG.
You save a PNG with transparency in Photoshop, and when you place it on a colored background you see a faint white outline around the edges. This is "matte halo" — the anti-aliased edge pixels are blended against a white background in the source file, and that white blending shows through when you put the image on a different color.
Fix: re-export the PNG with a "transparent" matte (most editors have this option), or use a color matte that matches your target background.
Many platforms (especially older social networks and email clients) flatten PNGs to JPG on upload. Your transparent background becomes solid white. There's no fix on the platform side — choose platforms that preserve transparency, or accept that you'll need to embed the right background color in your source file.
A PNG with full alpha can be huge. A 1920×1080 PNG with a complex composite is often 3-5 MB. Optimize with:
| Property | PNG | WebP |
|---|---|---|
| Alpha channel | Yes (8-bit) | Yes (8-bit) |
| Lossless mode | Always | Optional |
| Lossy mode | No | Yes |
| Typical file size | Baseline | 30-50% smaller |
| Browser support | Universal | Universal (2020+) |
| Software support | Universal | Most modern tools |
For web use in 2026, WebP-with-alpha is usually the better choice. Use PNG when you specifically need maximum compatibility (e.g. providing assets to a client whose toolchain may be ancient).
You can't, exactly. JPG doesn't store transparency information — that information was never captured in the file. What you actually need is:
For simple cases (subject on a solid-color background), color-keying tools work. For complex cases (subject on a varied background), you need AI-powered background removal — services like remove.bg or browser-based tools that run AI models locally. The resulting PNG has alpha values that match the AI's confidence about each pixel.
Need to convert between PNG and WebP while preserving transparency? Pictoolkit's PNG to WebP converter and general converter handle alpha channels correctly. All in your browser.