PNG transparency on the web: when you need it

JPEG has no alpha channel, and many email clients flatten a transparent PNG to white or black. Use transparency when the background actually changes: a logo over photos, a product cutout, an icon on a gradient. Cut the subject out with Remove Background, crop the empty canvas with Crop Image, and deliver it with WebP Converter. If the background is a fixed color, composite it and run PNG to JPG. Compress Image is a careful second pass on photo-like cutouts. It will not repair an edge that was already matted on white.

A rebrand put a transparent logo on a hero slideshow. On a dark photo the mark looked right. On a light gray slide a faint white halo made it look like a sticker. The export had been matted on white, not on a real alpha. Each slide punished a different edge.

The file is telling the browser to draw whatever sits behind those pixels. A bad export breaks that, and the page looks unfinished.

What the alpha channel stores

RGB says the color. Alpha says the opacity of each pixel: opaque, clear, or the steps between them on an anti-aliased edge.

Formats that can carry alpha on the web:

• PNG: lossless, supported everywhere, often large on a photo
• WebP: lossy or lossless alpha, usually smaller (when to use WebP instead of PNG)
• SVG: vector transparency for icons and simple logos
• GIF: 1-bit transparency, on or off, and a poor fit for this job

JPEG has no alpha.

Where the bytes are worth it

A header logo over photography or a gradient. One asset can serve more than one theme if you toggle dark mode.

A product cutout on an e-commerce theme whose background color changes by category.

Decorative overlays: badges, stickers, illustrated pieces.

UI sprites, though SVG often replaces a PNG sprite now.

Maps and data graphics with a partial overlay. Narrow, and real.

Where to flatten

A marketplace main image that is always white. Flatten to #FFFFFF JPEG. See the e-commerce background removal workflow.

Email. Flatten it. Outlook will not honor the alpha.

A full-bleed photo. Transparency adds nothing and the PNG swells.

A screenshot. Usually opaque. Use PNG for sharp text, not for alpha.

A social post. Platforms flatten unpredictably. Design an opaque card.

If the background color is fixed, composite onto the brand color and convert with PNG to JPG.

Halos and dark mode

Edge pixels blended against white look fine on white and bad on black. A dark-mode header shows every halo.

Avoid it:

• Remove the background to a real alpha in Remove Background
• Edit on a checkerboard, not on a colored backdrop
• Export PNG-24 with alpha, not GIF
• Test the logo on #FFFFFF, on #000000, and on the brand gradient

Defringe in a desktop editor is a repair. A clean export is better.

A transparent asset, step by step

1. Start from the highest-quality source. Avoid a product photo that is already a compressed JPEG.
2. Cut the subject out with Remove Background, or start from the vector.
3. Crop Image to a tight bound. Empty transparent pixels still count in some encoders.
4. Zoom to 200% and look at the edges on a light preview and a dark preview in browser DevTools.
5. Export a PNG master and archive the lossless file.
6. Convert for the web with WebP Converter, lossless or lossy depending on the picture.
7. Compress Image only on photo-like cutouts, and carefully.
8. Place it with an <img> or a CSS background and object-fit. Toggle a dark-mode class and look again.

On a photo cutout with a soft shadow, decide whether the shadow lives in the alpha or as a CSS box-shadow on a flattened card. The CSS shadow costs fewer bytes.

CSS

Two logos, swapped by theme:

.logo-light { display: block; }
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }

Two opaque logos sometimes beat one transparent PNG with a halo.

A product on a colored section:

<img src="product-cutout.webp" alt="Wireless headphones" width="600" height="600" />

The section's background-color shows through the alpha. Check contrast for any text near the cutout.

Size

A transparent PNG of a photo is large. A 2000 by 2000 cutout might be 2 to 4 MB as an uncompressed PNG, and 400 to 800 KB as lossy WebP with acceptable hair detail.

Resize for the slot. See resize images for web. Do not serve a 3000 px cutout in a 400 px card.

When you do not need alpha, read the PNG vs JPG guide.

Mistakes

Saving JPEG and then removing the background. The edges are already damaged.

A transparent PNG for a full photo. Use an opaque WebP or JPEG.

Premultiplied alpha. Rare in custom WebGL. A normal <img> is fine.

The same logo on light and dark with no test. Halos on one of them.

A huge empty canvas: a 4000 by 4000 PNG with a small logo in the middle. Crop it tight.

Transparency in email. Broken for a large share of the list.

Privacy

An unreleased product is still unreleased when the background is transparent. Local Remove Background keeps the SKU off a third-party server, the same as an opaque file.

Other than an alpha PNG

• mask-image in CSS, for a simple shape
• An SVG logo: it scales, stays small, and the alpha is vector
• Flattened onto the brand color, as JPG or WebP, which is the smallest
• A separate opaque asset per theme, two logos instead of one haloed PNG
• WebM with alpha, for the rare motion case, and it is heavy

For animation, see GIF vs WebP animations. That is a different problem.

Limits

Alpha in PNG-24 adds the bytes of a fourth channel. Legacy email clients and a JPG conversion can still paint an unexpected white or black behind it.

Transparency is for logos, cutouts, and overlays that sit on a background you do not control, exported with a real alpha and checked on light and dark. Flatten when the background is fixed, deliver WebP, crop the dead space, and do not assume email or a social network will keep the alpha.