Transparent Images: Formats, How-To, and Common Problems

Key takeaways

Only some formats carry transparency: PNG-32, lossless WebP, AVIF, SVG, TIFF and APNG have an alpha channel; JPEG never does, and lossy WebP destroys alpha on export.
A 'white background' you see is usually the viewer compositing your transparent image against white — place it on a dark surface to test before re-editing the file.
White halos on dark backgrounds come from light edge pixels blended into the alpha; fix them with defringing, or by re-exporting against the intended background colour.
Transparency costs file size: a soft-edged photographic cutout as lossless PNG can be several times heavier than the opaque equivalent, and the alpha channel is why.
A background remover can create genuine transparency from scratch; converting a JPG to PNG cannot — the original never contained alpha data.

How Image Transparency Works

Transparency in raster images is stored as an alpha channel: a fourth value per pixel (alongside Red, Green, Blue) representing opacity from 0 (fully invisible) to 255 (fully opaque). A pixel with RGBA values (255, 0, 0, 128) is a 50% transparent red.

Not all formats support alpha: JPEG has no concept of transparency at all. BMP technically can, but almost no software writes it. GIF supports only binary transparency (one palette colour is 'the transparent one' — a pixel is either fully visible or fully invisible, no smooth edges).

The formats with full 8-bit alpha support in 2026: PNG-32, WebP (lossless mode), AVIF (both lossy and lossless), SVG, TIFF (with alpha), and TGA. For web use, PNG and WebP are the practical choices.

Why Your PNG Shows a White Background

If your 'transparent' PNG shows a white box behind it, one of three things happened: (1) the image was exported without an alpha channel (PNG-24 instead of PNG-32); (2) the transparency was flattened to white during a save or conversion step; (3) the viewer or application you are looking in composites transparent pixels against white by default.

This third point is the most common confusion. Windows File Explorer previews, many image thumbnails, and PowerPoint's default slide background are all white — so a transparent PNG *appears* to have a white background even though the alpha data is correct. Try placing the same file on a dark-background page: if the white disappears, the transparency is working.

To fix a genuinely flattened transparency: you need the original file with alpha intact, or a background-removal tool to regenerate the mask.

PNG vs WebP for Transparency

PNG-32 (true colour with alpha) has been the default for transparent web images since 1996. It works everywhere: every browser, every email client, every image viewer.

WebP supports transparency only in lossless mode. There is no way to get both lossy compression (the small file sizes) and alpha transparency in WebP. A transparent lossy WebP simply does not exist.

AVIF supports alpha in both lossy and lossless modes, meaning you can get a small transparent image (better than PNG-32 by 30-50%). However, AVIF support is still not universal, and you need a fallback for older devices.

Practical recommendation: PNG-32 for universal compatibility; lossless WebP for 26% smaller with identical quality; AVIF (if you can provide fallbacks) for maximum compression with transparency.

Creating Transparent Images

In design software (Photoshop, GIMP, Affinity Photo, Figma): use layers, erase or mask the background, then export as PNG with 'Transparency' checked. For shapes and text specifically, vector tools (Illustrator, Figma, Inkscape) export SVG natively — infinitely scalable and always transparent by default.

Online background removal: for photographs, AI-powered background removers generate an alpha mask from a non-transparent image. They detect the subject's edges, estimate hair-level alpha, and output a transparent PNG. These work well for single-subject photos against relatively plain backgrounds.

Using a converter: if you have a flat-colour background (solid white, solid green, solid blue), a colour-key tool can replace that exact colour with full transparency in one click — useful for logos and product photos shot on white.

Common Transparency Problems

White or dark halo around edges: caused by the original image having a non-transparent background blended into edge pixels during a previous flattening step. Fix by using a 'decontaminate' or 'defringe' tool that shifts the colour of semi-transparent edge pixels towards the expected final background.

Transparency lost during upload: some social media platforms and form handlers flatten transparent images onto white or black on upload. Instagram, for example, composites transparent PNGs against white. If your transparent logo appears with a white box after posting, this is the platform's doing.

Email: Outlook composites transparency against a white background. Gmail renders it against the user's selected theme (may be dark). For logos in email, you cannot rely on transparency working — design against both white and dark backgrounds.

Animation GIF transparency: only one colour can be transparent (no alpha), causing jagged edges. Use animated WebP or APNG for smooth animated transparency.

Converting Transparent Images Between Formats

When converting a transparent PNG to a format that does not support transparency (JPEG, lossy WebP), the tool must 'flatten' the image — compositing the transparent pixels against a chosen background colour (white by default). The result looks correct only if the final use context has the same background colour.

When converting between two transparency-supporting formats (PNG → WebP lossless, PNG → AVIF), the alpha channel is preserved intact. The image looks identical regardless of background.

Always verify the output: open the converted image in a viewer that shows transparency as a checkerboard (Photoshop, GIMP, Figma) rather than relying on a white-background thumbnail which hides transparency issues.

SVG: The Ultimate Transparent Format

SVG (vector) images have no background pixel at all — they are defined as paths drawn on an infinite transparent canvas. There is no alpha channel to lose, no edge to halo, and no background to composite against.

This makes SVG perfect for logos, icons, and UI elements: the same 2 KB SVG looks sharp on a white page, a dark page, and a coloured page. No variants needed.

Limitations: SVG cannot represent photographs. And SVG files can contain JavaScript, making them a security risk for user-uploaded content — always sanitise SVG files from unknown sources.

Frequently asked questions

The questions people ask most about transparent images: formats, how-to, and common problems, answered directly.

Which image format supports transparency?

Full alpha transparency: PNG-32, WebP (lossless), AVIF (both modes), SVG (intrinsic), TIFF, and TGA. Binary transparency (visible or invisible, no smooth edges): GIF. No transparency: JPEG, BMP (in practice).

How do I make an image background transparent?

In design software: remove the background layer or mask the subject, export as PNG-32 with transparency enabled. For photos without design software: use an online background remover that generates an alpha mask automatically, or a colour-key tool for flat-colour backgrounds.

Why does my transparent PNG have a white background?

The viewer or platform you are using composites transparency against white by default. The alpha data is likely correct. Test by placing the image on a dark background — if it blends seamlessly, the transparency is working. Alternatively, the file may have been flattened during an edit or upload step.

Can JPEG images have transparency?

No. JPEG format has no alpha channel and no concept of transparency. Any 'transparent JPEG' you see is either a PNG mislabeled with .jpg extension, or a JPEG with white where the transparency should be (already flattened).

Does WebP support transparency?

Yes, but only in lossless mode. There is no lossy WebP with transparency. If you convert a transparent PNG to lossy WebP, the transparency is destroyed (flattened to a background colour). Always choose lossless when converting transparent images to WebP.

How do I convert a white-background image to transparent?

For flat white backgrounds: use a colour-removal tool that replaces white pixels with alpha. For complex photos: use an AI background remover that traces the subject and generates an alpha mask. Both methods produce a transparent PNG output.

What is the best transparent format for logos?

SVG (infinitely scalable, zero file weight overhead, guaranteed transparency). For raster contexts: PNG-32 (universal support) or lossless WebP (26% smaller, identical quality).

How do I check if an image is actually transparent?

Open it in any viewer that shows a checkerboard pattern behind transparent pixels: Photoshop, GIMP, Figma, Paint.NET, or even Windows Paint (shows checkerboard for transparent areas). If the 'background' is solid white, the image has no alpha channel.

Does Instagram preserve transparency?

No. Instagram composites transparent images against a white background when uploaded as posts or stories. If you need a logo to blend with Instagram's interface, design it on a white background intentionally rather than relying on transparency.

What is an alpha channel?

The fourth value per pixel (alongside Red, Green, Blue) that controls opacity. Value 0 = fully invisible, 255 = fully opaque, 128 = 50% transparent. An image with an alpha channel is called RGBA; without it, RGB.

Can I animate with transparency?

Yes: GIF (binary only), APNG (full alpha), animated WebP (lossless frames with alpha), animated AVIF (alpha in any mode), and Lottie/JSON animation (vector transparency). The best choice depends on target audience compatibility.

Why does my transparent image look bad on dark backgrounds?

Edge pixels created against a light background have light-coloured RGB values blended into their semi-transparent alpha. On dark backgrounds, these edges appear as a white/light halo. Fix with 'defringing' or 'decontamination' tools that shift edge pixel colours towards the intended dark background.

What is a good transparent image file size?

A simple logo with 2-3 colours at 500×500px: 3-8 KB PNG, or 1-3 KB lossless WebP. A complex full-body cutout photograph at 2000×2000px with soft edges: 100-300 KB PNG, or 60-200 KB lossless WebP. For these sizes, transparency inherently means larger files than opaque images.

Is PNG-24 or PNG-32 for transparency?

PNG-32. PNG-24 stores RGB only (24 bits per pixel, no alpha). PNG-32 stores RGBA (32 bits, 8 for alpha). If you export as 'PNG-24' in Photoshop and expect transparency, it will not work — choose the option labelled 'PNG-24 + transparency' which is effectively PNG-32.

Can I convert JPG to transparent PNG?

Not automatically — JPEG has no alpha data to preserve. You can only remove a perceived background: use a colour-removal tool for solid backgrounds or an AI background remover for complex images. The result is a new transparent PNG, but the quality of the edge detection depends on how distinct the subject is from the background.

Does PowerPoint support transparent images?

Yes, PowerPoint renders transparent PNGs over the slide background correctly. However, when inserting transparent images via older formats (.ppt) or when exporting slides to PDF, transparency may be flattened.

What is premultiplied alpha?

A variant of alpha encoding where the RGB values have already been multiplied by the alpha value. It simplifies compositing math in rendering engines but requires different handling in image editors. PNG and WebP use non-premultiplied (straight) alpha, while some GPU and canvas APIs use premultiplied internally.

Does transparency work in emails?

In HTML email, transparent PNGs render against the email background colour, which varies by client and user theme. This makes transparency unreliable: your logo designed for white background may disappear in dark mode. Design email logos with explicit background colour rather than relying on transparency.

How do I use a transparent logo in a website header?

Export the logo as SVG (best) or PNG-32, then place it in the header with CSS. Two checks matter: preview it against both your header colour and a dark background, and verify it in dark mode if your site has one — a logo drawn with white letterforms is invisible on a transparent header against a dark theme. When in doubt, use CSS filters or a theme-specific logo file rather than assuming one transparency works everywhere.

Do transparent PNGs load slower?

The transparency itself costs nothing at render time — compositing alpha is trivial for a GPU. What can slow a page down is file size: alpha channels defeat PNG's compression heuristics, so a transparent PNG is routinely 2-5x heavier than the same image without alpha. Compress it (lossless optimisation keeps the alpha exactly), or serve lossless WebP, which typically cuts the penalty by 25-30% with identical quality.

Does PDF keep image transparency?

Mostly, yes. Modern export pipelines (Word, LibreOffice, design tools set to PDF/X or standard export) embed PNG or JPEG-2000 alpha correctly, and the transparent area shows whatever page colour is behind it. The exceptions are older 'Save as PDF' paths and some flattened print drivers that composite against white during export. Test by exporting onto a coloured page: if the image carries a white box, the pipeline flattened the alpha and you need a different export setting.

Can a background remover handle hair and fur?

This is the hardest case in cutout work, because hair is a mesh of semi-transparent strands rather than an edge. AI removers produce a soft alpha mask that gets most of it right on a high-contrast background, but fine flyaways often come back jagged or slightly solid. Practical tips: start with the sharpest, highest-resolution photo you have, prefer a plain background with strong contrast to the subject, and inspect the result at 100% zoom on a dark surface before trusting it.

APNG or animated WebP — which is better for transparent animation?

Both support a full alpha channel on every frame, unlike GIF's one-colour-transparent trick. Animated WebP compresses meaningfully better — often half the weight for the same frames — while APNG has slightly broader support on very old browser versions. If your audience is on current browsers, animated WebP wins; use APNG when you must cover older Safari without a fallback; and consider animated AVIF for new work where file size is critical and the frames are photographic.