Transparent background: which formats support it and when to use them (PNG, WebP, AVIF)

•19 words•1m read

After removing a background, you need an alpha‑capable format to avoid halos and jagged edges. Practical guide to pick between PNG, WebP and AVIF with…

1) The key: alpha channel

True transparency requires a per‑pixel alpha channel. Without alpha, edges are pre‑blended with a fixed matte color, which causes visible halos on different backgrounds.

2) Formats that support transparency

  • PNG (lossless): perfect transparency and crisp edges. Ideal for UI, logos, icons, and screenshots with text. Heavier for photos.
  • WebP: supports alpha in lossy and lossless modes. Great size/quality ratio. Validate anti‑aliasing on thin edges.
  • AVIF: superior compression with alpha support. Review gradients and soft transitions; encoding may be slower.
  • SVG: vector, scalable, transparent via shapes/attributes. Perfect for pure graphics and logos.

3) Formats that don’t work

  • JPEG: no alpha. Exporting over white/black creates fringing when overlaid.
  • GIF: binary transparency (on/off). Jagged edges on diagonals. Avoid except for retro cases.

4) Avoid halos: matte and premultiplied alpha

If the original cutout had a white background and you exported PNG with a white matte, you’ll see halos on dark backgrounds. Export without matte and with true alpha. Test edges on both light and dark backgrounds.

5) PNG, WebP or AVIF?

  • Flat UI/logos: PNG or WebP lossless (pick the smallest that remains crisp).
  • Cut‑out photos: WebP/AVIF with alpha often offers the best balance.
  • Vector: SVG whenever possible.

6) Recommended flow with Orqui

  1. Remove the background (threshold + feather).
  2. Convert to WebP/PNG as needed.
  3. Optimize tuning quality and comparing.

7) Quality checklist

  • No halos on both light and dark backgrounds.
  • Dimensions fit actual usage (no over‑sizing).
  • Alpha‑capable format (PNG/WebP/AVIF) or SVG when applicable.
  • Reasonable weight for the page (use compression).

Related tools & articles

Read in other languages

FAQ

  • Why is JPEG not valid for transparent background?
    JPEG has no alpha channel. To simulate transparency it blends with a fixed matte color, which creates white/black halos when placed over different backgrounds.
  • PNG or WebP for logos?
    PNG is safe (lossless) and crisp. WebP lossless often weighs less for simple palettes. Check edges on both dark and light backgrounds.
  • Is AVIF with transparency reliable?
    Yes, it supports alpha. It offers excellent compression, though encoding can be slower and some gradients need careful validation.
  • Does SVG support transparency?
    Yes. Being vector, it supports transparency via shapes and fill/opacity. Great for scalable logos and icons.

Count of local transformations you do here (convert, optimize, resize, crop, remove background). All done privately in your browser.