What Is PNG Transparency?

PNG (Portable Network Graphics) supports an alpha channel — a fourth channel of data alongside the red, green, and blue colour channels. The alpha channel controls opacity: 255 = fully opaque, 0 = fully transparent. Values in between create semi-transparent pixels.

This means a PNG image can have fully transparent areas (like the background behind a logo), fully opaque areas (like the logo itself), and semi-transparent areas (like soft drop shadows or smooth edge anti-aliasing). When displayed over any background colour or pattern, the transparent areas become invisible and the image appears to float.

PNG-24 vs PNG-8: Which Supports Transparency?

Both PNG types support transparency, but in different ways:

  • PNG-24 (True colour PNG) — Full 24-bit colour + 8-bit alpha channel. Supports millions of colours and full gradient transparency. Best for photos with removed backgrounds, complex graphics, and anything with soft edges or shadows.
  • PNG-8 (Indexed colour PNG) — 256-colour palette with one designated transparent colour (binary transparency — a pixel is either transparent or not). Best for simple graphics, icons, and illustrations where the file size saving is worth the limitation.

For logos and product images on websites, use PNG-24 with alpha transparency unless file size is critical.

When to Use Transparent PNG

Transparent PNGs are essential in these situations:

  • Logos — A logo on a transparent background works on any background colour without a white box
  • Product photos on white sites — Remove the photo background so the product appears directly on the page
  • Watermarks and overlays — Semi-transparent text or graphics that sit on top of other content
  • Icons and UI elements — Icons that need to work on dark and light themes
  • Stickers and cutout images — Any image meant to be placed over different backgrounds

How to Remove a Background and Save as Transparent PNG

There are several approaches depending on your tools and the complexity of the background:

Method 1: Online Background Removal

  1. Upload your image to a background removal tool
  2. The tool uses AI to detect the subject and remove the background
  3. Download as PNG-24 with transparency

Works best on clearly defined subjects (people, products) against simple or uniform backgrounds.

Method 2: Photoshop

  1. Open the image
  2. Use Select → Subject (AI selection) or the Magic Wand tool to select the background
  3. Press Delete to remove the background (the canvas should show a grey checkerboard pattern)
  4. File → Export → Export As → PNG to save with transparency

Method 3: GIMP (Free)

  1. Open the image in GIMP
  2. Image → Mode → RGB (if not already)
  3. Image → Flatten Image, then undo — or add alpha: Layer → Transparency → Add Alpha Channel
  4. Use Fuzzy Select (magic wand) on the background → Delete
  5. Export as PNG: File → Export As → filename.png

How to Check If a PNG Is Actually Transparent

Open the file in a browser or image viewer and look for a grey checkerboard pattern in the background areas — this is the universal indicator of transparency. If you see a white or coloured background where you expect transparency, the alpha channel was not preserved during export.

Why Transparent PNGs Are Large

PNG uses lossless compression, which means no pixel data is discarded. A photo-quality PNG with a transparent background can easily be 1–3 MB because PNG does not compress photos as efficiently as JPEG. This is why:

  • Never use PNG for photographs that do not need transparency — use JPEG instead
  • For transparent product photos on e-commerce sites, consider using WebP with alpha channel instead of PNG for 30–40% smaller files
  • Use a PNG optimiser (like TinyPNG or OptiPNG) after creating your transparent PNG to reduce file size by 15–40% with no visible quality change

Transparent PNG in CSS and HTML

In HTML, a transparent PNG used as a regular <img> element will show the page background through its transparent areas — exactly as expected. No special code needed.

In CSS, you can use transparent PNGs as background images:

.hero {
  background-image: url('logo-transparent.png');
  background-size: contain;
  background-repeat: no-repeat;
}

The transparent areas will show the element's own background colour or image behind the PNG.

Summary

PNG transparency using the alpha channel lets images float over any background without hard white borders. Use PNG-24 for photos and complex graphics with smooth edges, PNG-8 for simple icons where file size matters. Always check for the checkerboard pattern in your editor to confirm transparency was preserved, and compress your final PNGs to reduce file size before uploading to the web.