Kit-Bin
Donate

← All guides

Which Image File Types Support Transparency?

PNG, WebP, SVG, GIF, and AVIF all support transparency; JPEG does not, and never will, because the format has no way to represent it. Which of the transparent ones you actually want depends on whether you're making a logo, a photo cutout, or animated art, and that's the part most answers skip.

FormatTransparencyCompressionBest for
PNGFull alpha (256 levels)LosslessLogos, icons, screenshots, UI graphics
WebPFull alpha, both modesLossy or losslessWeb photos and graphics that need transparency and a small file
AVIFFull alpha, both modesLossy or losslessSame as WebP, smaller still, narrower software support
SVGFull alpha (it's vector, not pixels)N/A — described, not compressedLogos and icons that need to scale to any size
GIFBinary only (on/off, no blending)LosslessSimple animation, not photo cutouts
JPEGNone — not supported at allLossyPhotos with no transparency requirement

Binary transparency vs alpha transparency

This is the distinction the table above compresses into one word, and it's the part that actually explains why some transparent images look clean and others look jagged around the edges.

Binary transparency means every pixel is either fully see-through or fully opaque, nothing in between. GIF works this way: one palette color is designated "transparent," and any pixel using it disappears entirely. There's no partial blending at the edge of a shape, which is why a GIF cutout of a round object or a strand of hair shows a visibly hard, stair-stepped edge instead of a smooth one.

Alpha transparency means each pixel carries its own opacity value, typically 256 levels from fully transparent to fully opaque. PNG, WebP, and AVIF all work this way. That extra information is what lets an edge fade smoothly into whatever background it's placed on, rather than cutting out in a hard line. SVG achieves the same smooth result differently, since it isn't pixels at all; shapes are described mathematically, and opacity is just a property on that description.

Which one to actually use

  • A logo or icon: SVG if it's simple flat shapes (it'll stay sharp at any size and is usually the smallest file by far); PNG if it needs fine detail, a photographic element, or a piece of software that doesn't handle SVG well.
  • A product photo or portrait with the background removed: PNG for guaranteed compatibility, or WebP if the destination (a website you control) supports it and file size matters — same alpha quality, meaningfully smaller.
  • A screenshot or UI graphic: PNG. Lossless matters here because compression artifacts are much more visible on sharp text and flat colors than on a photo.
  • Simple animation: GIF still works for basic cases, but its binary transparency and 256-color palette both show. An animated WebP or AVIF gives a genuinely cleaner result with full-color, full-alpha frames, at the cost of narrower support in older software.
  • Anything getting uploaded somewhere that only takes JPEG: transparency won't survive the trip. A JPEG has no alpha channel to put it in, so a transparent area gets flattened onto a solid background (usually white) before the file is even saved.

Why it sometimes turns white instead of staying transparent

This is a separate, very common problem from picking the wrong format: a PNG or WebP that genuinely does support transparency still shows up with a white background somewhere. That's almost always the viewing or editing software flattening the alpha channel onto white for display, not the file losing its transparency. See what "transparent background" actually means for the specific causes and fixes.

Converting and creating

PNG to WebP· WebP to PNG· SVG to PNG· Remove Background(produces a transparent PNG from a photo)

Related guides

What "Transparent Background" Actually Means · Why Your Background-Removed Photo Has a White Halo · WebP vs PNG vs JPG · What Is AVIF, and Why Is It So Much Smaller? · SVG vs PNG: When Should a Logo Be Neither?

Further reading

Written by the Kit-Bin teamPublished Spotted an error? Tell us