BlogImage Compression

How to Compress PNG Files and Keep Transparency

Learn how to reduce PNG file size while keeping transparent backgrounds, with lossless, lossy, online, and command-line workflows plus verification checks.

Updated: June 8, 2026

You can compress PNG files and keep transparency intact — but how well transparency is preserved depends on which method you use. Lossless PNG optimizers (such as oxipng or OptiPNG) preserve every alpha value exactly, with no visual change. Lossy compressors (such as pngquant or TinyPNG) reduce file sizes far more aggressively, but they may quantize alpha values alongside colors, which can subtly affect semi-transparent edges, shadows, and gradients. Understanding this distinction before you compress is the key to avoiding unexpected results.

This guide explains why transparency survives compression in most cases, which methods carry risk, and how to verify your results — with workflows for online tools, desktop apps, and the command line.

Key Takeaways

  • PNG transparency is stored in a dedicated alpha channel separate from color data — lossless compression preserves it exactly.
  • Lossless PNG optimization (oxipng, OptiPNG) typically reduces file size by 15–30% with zero quality or transparency loss.
  • Lossy PNG compression (pngquant, TinyPNG) can reduce file sizes significantly more, but may alter semi-transparent edges — always verify the output.
  • PNG-8 indexed color supports alpha transparency through palette alpha values, but complex semi-transparent gradients may show banding or jagged edges; pngquant handles this better than a basic PNG-8 export.
  • For modern websites, WebP with a PNG fallback generally produces smaller files than PNG alone, according to Google's WebP documentation and MDN browser compatibility data.
  • Always run a checkerboard or colored-background test after compression to confirm transparency is intact.

Why PNG Compression Usually Keeps Transparency

The PNG Alpha Channel

A full-color PNG with transparency (often called PNG-32) stores four channels per pixel:

ChannelBits per pixelPurpose
Red8Red color value
Green8Green color value
Blue8Blue color value
Alpha8Transparency (0 = fully transparent, 255 = fully opaque)

A PNG without transparency (PNG-24) stores only RGB. An indexed-color PNG (PNG-8) stores colors in a palette of up to 256 entries, and can include per-entry alpha values via the PNG tRNS chunk — this is more nuanced than a simple on/off toggle, though complex semi-transparent gradients are still a challenge for palette-based formats.

This structure matters: when compression tools optimize a PNG, the alpha channel is compressed alongside RGB data using the same algorithm, not discarded. In lossless mode, all alpha values are reconstructed exactly. In lossy mode, the tool may reduce the number of distinct color and alpha values — keeping the image transparent, but potentially changing how edges look.

How PNG Compression Works

PNG compression uses two stages:

  1. Filtering — Each pixel row is transformed with a predictive filter (Sub, Up, Average, or Paeth) that replaces absolute values with differences between neighboring pixels, creating runs that compress more efficiently.

  2. DEFLATE compression — The filtered data is compressed using the lossless DEFLATE algorithm (the same used by ZIP and gzip). The original pixel data, including alpha values, is reconstructed exactly on decompression. (See the PNG specification — Chapter 9 for details.)

Lossy PNG compressors add a pre-processing step before standard encoding: they reduce the number of distinct colors (and possibly alpha levels) in the image. The output is still a valid PNG file with an alpha channel — but the values stored in that channel may differ from the original.

Best Methods to Compress a Transparent PNG

MethodTypical SavingsTransparencyQuality RiskBest For
Lossless optimization (oxipng)15–30%Alpha preserved exactlyNoneArchival, pixel art, QR codes
Lossy quantization (pngquant)Up to ~70–80% for suitable imagesUsually preserved; edges may changeLow to moderateWeb graphics, UI icons
Online tools (TinyPNG, Squoosh)Varies by image contentUsually preservedLow to moderateQuick one-off compression
PNG-8 indexed export (basic)Significant but variableLimited; complex alpha may bandModerate to highSimple logos, hard-edge icons
WebP conversion (with alpha)Often smaller than equivalent PNGYesConfigurableModern websites with fallback

Decision rules:

  • Use lossless if pixel accuracy matters (medical, archival, pixel art).
  • Use pngquant for web icons and UI elements where minor color shifts are acceptable.
  • Use WebP with a PNG fallback for the best balance of size and browser compatibility on modern websites.
  • Always verify output before publishing.

How to Compress PNG Files Losslessly (Zero Quality Loss)

Lossless PNG optimization re-encodes the file using better filter choices and compression parameters. Every alpha value is preserved exactly.

Use oxipng for Lossless PNG Compression

Oxipng is a multithreaded, Rust-based lossless PNG optimizer. It tries multiple filter combinations at different compression levels and keeps the smallest valid result.

Install:

# macOS
brew install oxipng

# Ubuntu / Debian
cargo install oxipng

# Windows (Scoop)
scoop install oxipng

Usage:

# Basic optimization (overwrite in place)
oxipng -o 4 image.png

# Higher optimization level (slower, may produce smaller files)
oxipng -o 6 image.png

# Batch process a directory
oxipng -o 4 ./*.png

The -o flag sets the optimization level from 0 (fastest) to 6 (most thorough). Level 4 is a practical balance of speed and compression for most workflows. Refer to the oxipng README for a current list of all flags and their exact behavior.

Use OptiPNG as an Alternative

OptiPNG is the classic lossless PNG optimizer — slower than oxipng but widely packaged.

# Install
brew install optipng     # macOS
apt install optipng      # Ubuntu

# Optimize
optipng -o 5 image.png

Online Lossless Option: Squoosh

Squoosh (by Google) is a browser-based image compression tool. Select PNG as the output format and set quality to maximum to stay lossless. Check Squoosh's GitHub repository and privacy notes before using it with sensitive images, as processing behavior may vary by version.

How to Compress PNG Files with Lossy Methods (Maximum Savings)

Lossy PNG compression reduces the number of distinct colors and sometimes alpha levels before encoding. The result is a valid PNG file with an alpha channel, but edges and shadows may look slightly different — especially at aggressive settings.

Use pngquant When Small Visual Changes Are Acceptable

pngquant converts PNG-32 images to 8-bit indexed PNG with a custom palette that includes quantized alpha values. For many web graphics and icons, the visual difference is minimal and the file size reduction can be substantial — though actual savings depend heavily on image content and the quality range you specify.

Install:

# macOS
brew install pngquant

# Ubuntu / Debian
apt install pngquant

Usage:

# Default (up to 256 colors)
pngquant image.png

# Specify quality range (min-max, 0–100)
pngquant --quality=65-85 image.png

# Overwrite original, limit to 128 colors
pngquant --force --quality=65-85 128 image.png --output image.png

# Batch process
pngquant --quality=65-85 ./*.png

The --quality flag sets a minimum-maximum quality range. If pngquant cannot meet the minimum at the given color count, it skips the file rather than producing a poor result — a useful safeguard for batch processing.

Combined workflow: Running pngquant first, then oxipng on the output, often produces smaller files than using either tool alone, as noted in Simon Willison's write-up:

pngquant --quality=65-85 image.png --output image-compressed.png
oxipng -o 4 image-compressed.png

Always compare the output visually — especially edges, shadows, and any semi-transparent gradients — before publishing.

Use TinyPNG for a Simple Online Option

TinyPNG applies lossy compression to PNG files while generally preserving transparent areas. Check the TinyPNG website for current upload limits, file size restrictions, and API free-tier terms before batching production assets, as these details can change.

  1. Visit tinypng.com.
  2. Drag and drop your PNG files.
  3. Download the compressed results.
  4. Run the checkerboard test below to confirm transparency is intact.

TinyPNG also provides a developer API for automated workflows — see their site for current pricing and quota details.

Quick Online Workflow for Transparent PNGs

If you prefer not to use the command line:

  1. Export your PNG with transparency from your design tool (Figma, Photoshop, Illustrator, etc.) as PNG-32 with the alpha channel enabled.
  2. Upload to an online compressor such as TinyPNG or LessMB. After compression, download the result.
  3. Run the checkerboard test (see verification section below) — open the file in any image viewer and confirm transparent areas show the checkerboard pattern, not a solid color.
  4. Check on a colored background — place the image on a webpage or presentation slide with a colored background to confirm edges and shadows render correctly.
  5. Compare file sizes to confirm the compression worked as expected.

Step-by-Step CLI Workflow: Maximum Compression with Transparency

For developers comfortable with the command line:

  1. Export as PNG-32 with full alpha from your design tool.
  2. Apply lossy compression (if minor quality changes are acceptable): 
    pngquant --quality=65-85 image.png --output image-optimized.png
  3. Apply lossless re-optimization: 
    oxipng -o 4 image-optimized.png
  4. Verify transparency — open the output in an editor with a checkerboard background.
  5. Compare file sizes: 
    ls -lh image.png image-optimized.png
  6. For web publishing, consider WebP with a PNG fallback: 
    cwebp -q 80 -alpha_q 90 image-optimized.png -o image.webp

What Can Still Go Wrong With Transparent PNGs

Understanding common failure modes helps you catch problems before publishing.

Transparency Troubleshooting Table

SymptomLikely CauseFix
White background after savingSaved as JPEG, or layers flattened before exportRe-export as PNG with transparency enabled
White or colored matte around edges"Save for Web" matte color set to a non-transparent valueSet matte to None / Transparency
Jagged or harsh edges on semi-transparent areasConverted to basic PNG-8 indexed without alpha quantizationUse pngquant instead of a plain PNG-8 export
Banding or color shifts in shadows/gradientsLossy quantization set too aggressivelyRaise the --quality minimum, or switch to lossless
File is still very large after "lossless" optimizationImage has too many unique pixel values for filtering to help muchApply lossy quantization first, then re-run lossless optimization
Transparent areas look fine but edges look roughpngquant alpha quantization at low quality settingsIncrease minimum quality; check output at actual display size

PNG vs WebP vs AVIF for Transparent Images

FormatTransparencySize vs PNGBrowser SupportBest Use
PNGFull 8-bit alphaBaselineUniversally supported by modern browsersUniversal compatibility, legacy support
WebPFull alphaGenerally smaller (see Google WebP docs and MDN)Very broad — check Can I Use for current dataModern websites with PNG fallback
AVIFFull alphaOften smaller than WebP — see MDN AVIF and Can I Use for current support dataBroad but not universal — check current data before deployingPerformance-critical sites with fallback

For most websites, the recommended approach is to serve the format the browser supports, falling back to PNG:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.png" alt="Description" width="800" height="600">
</picture>

This delivers the smallest supported format while ensuring full transparency and compatibility. Always check Can I Use for current browser support figures before making deployment decisions.

How to Verify Transparency After Compression

Always verify transparency after compressing a PNG file before publishing.

Transparency Verification Checklist

  • Checkerboard test — Open the compressed file in Photoshop, GIMP, Preview, or any viewer that shows a checkerboard for transparent areas. Transparent regions must show the pattern, not a solid color.
  • Colored background test — Place the image on a webpage with a bright or patterned background. Transparent areas should show the background through the image. Semi-transparent edges and shadows should blend smoothly.
  • Edge quality check — Zoom in on anti-aliased edges, soft shadows, and gradients. Look for unexpected banding, jagged borders, or color fringing.
  • Pixel-level comparison (lossless only) — For lossless compression, verify zero pixel difference using ImageMagick. Per ImageMagick documentation, the AE metric counts pixels that differ: 
    # Output should be 0 for a lossless result
compare -metric AE original.png compressed.png null:
  • Alpha channel inspection — Use ImageMagick to extract the alpha channel and inspect it as a grayscale image (white = opaque, black = transparent, gray = semi-transparent): 
    convert compressed.png -alpha extract alpha_check.png

Common Mistakes That Break Transparency

  • Saving as JPEG. JPEG does not support transparency. All transparent areas become solid — usually white or black depending on the application.
  • Flattening layers before export. In Photoshop or GIMP, flattening merges transparency with the background color. Export from the unflattened file with transparency enabled.
  • Using "Save for Web" with the wrong matte color. Some tools apply a matte color behind semi-transparent areas during export. Set the matte to "None" or "Transparency."
  • Over-quantizing alpha in pngquant. Very low quality settings can cause visible banding in semi-transparent gradients. Preview the output at actual display size before deploying.
  • Exporting complex transparency to basic PNG-8. A plain PNG-8 export handles transparency through palette alpha values, which may not accurately represent complex semi-transparent gradients or anti-aliased edges. Use pngquant if you need 8-bit indexed PNG with better alpha handling.

Quick-Reference Tool List

ToolTypePlatformCostTransparency Safe
oxipngLossless CLImacOS, Linux, WindowsFree (MIT)Yes — exactly
pngquantLossy CLImacOS, Linux, WindowsFree (GPL)Yes — verify edges
OptiPNGLossless CLImacOS, Linux, WindowsFree (zlib)Yes — exactly
TinyPNGOnline + APIBrowserFree tier (check site for current limits)Yes — verify edges
SquooshOnlineBrowserFreeYes — verify edges
LessMBOnlineBrowserFreeVerify after compression

After compressing a PNG with any online tool, including LessMB, run the checkerboard and colored-background tests described above to confirm that transparent areas still render correctly before publishing.

FAQ

Does compressing a PNG remove transparency?

Lossless PNG optimizers preserve alpha values exactly — no transparency is lost and no visual change occurs. Lossy tools generally keep transparent areas intact but may quantize alpha and color values, which can subtly affect semi-transparent edges, shadows, and gradients. Always run a checkerboard test after lossy compression to confirm the output meets your expectations.

What is the best free tool to compress PNG with transparency?

For quick online compression, TinyPNG and Squoosh are widely used options. For batch processing, combining pngquant with oxipng via the command line often produces smaller files than either tool alone, while keeping transparency intact.

Can I convert a PNG-32 file to PNG-8 without losing transparency?

It depends on the image. PNG-8 indexed color supports alpha values through the PNG tRNS chunk, and pngquant can create 8-bit indexed PNGs with quantized alpha that look good for many web graphics. However, complex semi-transparent gradients, soft shadows, and anti-aliased edges may develop visible banding or jagged borders. Test the output carefully before publishing, especially for images with smooth transparency.

Is WebP better than PNG for transparent images?

WebP with alpha support is generally smaller than equivalent PNG files, according to Google's WebP documentation and MDN. PNG remains universally supported. The recommended approach for modern websites is to serve WebP with a PNG fallback using the <picture> element, and check Can I Use for current browser support figures.

Why did my transparent PNG turn white after compression?

This usually means the image was saved without transparency — common causes include saving as JPEG (which does not support alpha), flattening layers before export in Photoshop or GIMP, or having a matte color applied during "Save for Web." Always export as PNG-32 or PNG-24 with transparency enabled, and verify the result with the checkerboard test.

Is lossless PNG compression enough for website images?

Lossless optimization typically reduces file size by 15–30%, depending on the image, which may not be sufficient for performance-critical websites. For web use, lossy compression followed by WebP conversion with a PNG fallback usually achieves significantly better results. Use Google PageSpeed Insights or Lighthouse to measure the impact.

How do I test if alpha transparency is still there?

Open the file in any image editor that displays a checkerboard for transparent areas (Photoshop, GIMP, Preview, or similar). Transparent areas should show the checkerboard pattern, not a solid color. You can also place the image on a brightly colored webpage background and confirm transparent areas show the background correctly.

Next Steps

  1. Audit your existing PNG assets. Identify the largest PNG files using browser DevTools (Network tab → filter by PNG) or a site crawler.
  2. Apply pngquant + oxipng to web PNG assets that can tolerate minor lossy compression.
  3. Add WebP and AVIF versions with <picture> element fallbacks for maximum performance.
  4. Automate the process. Integrate PNG optimization into your build pipeline using tools like imagemin or sharp (Node.js), or shell scripts that run pngquant and oxipng on every build.
  5. Measure the impact. Use Google PageSpeed Insights or Lighthouse to compare before and after scores.

References