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.
| Format | Transparency | Common use |
|---|---|---|
| JPG | No | Flattened photos |
| PNG | Yes | Logos, screenshots, cutouts |
| WebP | Yes | Raster web images |
| AVIF | Yes | Modern web images |
| SVG | Yes | Vector 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 transparencyTransparency questions
Related conversions
Sources and references
- [1]Portable Network Graphics (PNG) Specification, Third Edition - W3C
- [2]Image file type and format guide - MDN Web Docs