Skip to content
Transparency7 min read

Preserve transparency with PNG, WebP, and AVIF

Transparency is not a checkerboard background. It is per-pixel information called an alpha channel. It disappears when the output format cannot represent it or when the image is intentionally flattened onto a color.

Updated August 30, 2026

Essential rule

  • Use PNG, WebP, or AVIF to retain raster transparency.
  • Use SVG for vector artwork when the destination accepts it.
  • JPG has no alpha channel, so choose a background color explicitly.
  • Inspect edges on light and dark backgrounds before publishing.

Understand the alpha channel

In an alpha PNG, each pixel combines color with opacity. Zero is transparent, the maximum is opaque, and intermediate values create smooth edges.

The checkerboard shown by an editor only visualizes the absence of a background. It is not part of the image unless it was accidentally baked into the pixels.

Sources: [1]

Formats that retain transparency

PNG is the most predictable raster choice for logos, icons, and cutouts. WebP and AVIF can also carry alpha with modern compression options.

SVG does not store a conventional pixel grid, so shapes can stay transparent and sharp at any size. SVG to PNG conversion rasterizes the drawing at selected dimensions.

Transparency by format
FormatTransparencyCommon use
JPGNoFlattened photos
PNGYesLogos, screenshots, cutouts
WebPYesRaster web images
AVIFYesModern web images
SVGYesVector logos and illustrations

Sources: [2]

Avoid unwanted black or white backgrounds

A JPG output requires transparent pixels to be composed onto a color. Choose that color in the settings instead of letting the destination application decide.

Keep a transparent master for logos used on several themes. For a document or marketplace that requires JPG, create a separate copy flattened onto the exact intended background.

  • Keep transparency for PNG, WebP, and AVIF
  • Choose an explicit JPG background
  • Do not use a checkerboard as a real background
  • Test edges on several colors

Why halos appear around edges

Semi-transparent edge pixels may contain color inherited from an old background. Placing them over a new color reveals a light or dark fringe.

Return to the original transparent file when possible. Avoid extracting transparency from an already flattened JPG, and inspect hair, soft shadows, and anti-aliased edges.

Recommended converter settings

Keep Preserve transparency enabled for PNG, WebP, or AVIF. For JPG, disable it and choose the color used by the destination.

Set dimensions before exporting SVG to PNG. A raster output cannot recover vector sharpness after later enlargement.

Keep a transparent background

Choose PNG, WebP, or AVIF and keep transparency preservation enabled.

Convert with transparency

Transparency questions

Sources and references

  1. [1]Portable Network Graphics (PNG) Specification, Third Edition - W3C
  2. [2]Image file type and format guide - MDN Web Docs