Updated: August 1, 2026
Quick answer: Keep the original, confirm the alpha channel is required, remove optional metadata, run a lossless PNG optimization first, and test palette reduction or WebP only after checking semi-transparent edges on light, dark, and real backgrounds.
Transparency is not the same as a white background. A transparent PNG stores color data plus an alpha channel that controls how much of each pixel is visible. Compression can preserve the channel while still damaging the RGB colors around the edge, so a checkerboard preview alone is not enough.
What Must Survive
| Requirement | Test |
|---|---|
| Fully transparent pixels | sample the corners and place the image over a colored background |
| Semi-transparent antialiasing | inspect hair, shadows, and curved edges on light and dark backgrounds |
| RGB edge colors | look for a white/black matte fringe |
| Brand colors | compare against the source in the real page |
| Pixel dimensions | confirm width and height after export |
| File compatibility | open in the receiving browser, CMS, app, or email client |
Step 1: Keep the Master and Confirm the Need for Alpha
Keep the original PNG or design source unchanged. Confirm whether the destination really needs transparency. If the image will always sit on a known solid background, flattening may be acceptable and can change the format decision—but make that choice deliberately.
Step 2: Inspect the Existing Alpha
Place the source over white, black, mid-gray, and the actual page background. Check for an existing halo before compression. If the halo is already in the master, compression is not the root cause; fix the matte or mask first.
Inspect edges at 100% and at the rendered size. A soft edge can look correct at a small thumbnail and become obvious when the product is enlarged.
Step 3: Optimize the PNG Losslessly
Lossless PNG optimization can rewrite filters, deflate data, and metadata without changing decoded pixels. Start there. Measure the file size and compare output pixels if exact preservation matters.
Remove optional text chunks, editing history, thumbnails, and GPS-like metadata when the delivery copy does not need them. Preserve color profiles and rights data when required.
Step 4: Test Palette Reduction Carefully
Palette reduction can save a lot for simple icons or logos, but it may change colors and semi-transparent edges. Use it only when the asset tolerates fewer colors. Check:
- smooth gradients;
- shadows and glows;
- hair and fine cut-out edges;
- partially transparent pixels;
- saturated brand colors.
If the output has banding or a fringe, return to a lossless true-color PNG or compare a transparent WebP candidate.
Step 5: Compare WebP for Website Delivery
WebP supports alpha in lossy and lossless modes. Google’s WebP documentation describes these capabilities. For a modern website, transparent WebP may reduce transfer bytes, but keep PNG as the master and fallback when tools or clients require it.
<picture>
<source srcset="product-cutout.webp" type="image/webp" />
<img src="product-cutout.png" width="1000" height="1000" alt="A black backpack on a transparent background" />
</picture>
Test the exact fallback path and verify Content-Type. Do not assume that an image which looks correct in one browser will work in an email editor or upload form.
Transparent PNG Settings by Asset
| Asset | First candidate | What to avoid |
|---|---|---|
| Flat logo | lossless PNG; SVG if source is vector | palette changes that shift brand colors |
| UI icon | SVG or lossless PNG/WebP | soft edges from upscaling |
| Product cut-out | WebP/PNG with alpha | matte halos around the subject |
| Soft shadow | true-color alpha PNG/WebP | reducing alpha levels too aggressively |
| Screenshot overlay | PNG or lossless WebP | JPEG flattening and ringing |
Website Delivery and Layout
Transparency can make icons and overlays small but numerous. Optimize dimensions and use responsive delivery when the asset changes size. Use standard image markup and reserve dimensions or aspect ratio so the transparent file does not cause layout movement. Google’s image SEO guidance and web.dev’s CLS guidance cover discovery and stable layout.
Troubleshooting Alpha Problems
White or dark halo
Check whether the source was matted, whether the export premultiplied RGB against a background, and whether the edge was viewed on a different background. Re-export from the source mask.
Background is no longer transparent
Confirm the output format and alpha channel. JPEG and some platform uploads flatten transparency. Check the delivered file, not only the local preview.
Edges look jagged
The palette may be too small, the alpha levels may have been reduced, or the image may be displayed larger than its pixel dimensions. Restore color/alpha precision or export a larger candidate.
File is still huge
Check unnecessary dimensions, blank canvas, metadata, and whether the image is actually a photographic cut-out. Test WebP or AVIF for web delivery while retaining a PNG master.
Final Checklist
- master and mask retained;
- alpha requirement documented;
- source inspected on multiple backgrounds;
- lossless optimization tested first;
- palette/bit-depth reduction checked for banding;
- WebP candidate compared from the source;
- fallback and MIME type verified;
- dimensions match the rendered use.