How to Compress PNG Files Without Losing Transparency
PNG files with transparency can be tricky to compress. Here's how to shrink them without breaking the alpha channel. Tested with logos and screenshots.
Last week a designer friend sent me a zip of 18 PNG logos for a client site. Every single one was over 100KB. The smallest was 112KB. The largest hit 340KB. For tiny logos that render at maybe 60 pixels tall. I loaded them all onto a test page and Lighthouse gave me a 2.8 second Largest Contentful Paint. On a page with nothing but logos and some text.
That’s the PNG problem in a nutshell. The format is uncompressed by default and the files balloon fast. But you can’t just slap a JPEG filter on them because the transparency would vanish and you’d end up with white boxes everywhere.
Why PNG compression is harder than JPEG
JPEG throws away data from the start. That’s how it gets so small. It was built for photos where your eyes won’t notice small inaccuracies.
PNG is different. It was designed as a lossless format. Every pixel gets stored exactly as it was. That includes the alpha channel, which controls transparency. Each pixel has four values: red, green, blue, and alpha. The alpha value determines how see-through that pixel is. Zero means fully transparent. 255 means fully opaque. Anything in between is semi-transparent.
When you compress a PNG the wrong way, that alpha data gets corrupted or stripped. The transparent areas turn white, or worse, they get random noise. Your clean logo suddenly has a visible box around it and looks terrible on any background that isn’t white.
So the challenge is shrinking the file without touching that alpha channel.
PNG vs JPEG compression: a quick comparison
I ran the same image through both formats to show the difference. The image was a product photo with a transparent background, 1200 by 1200 pixels.
| Format | Quality setting | File size | Transparency preserved |
|---|---|---|---|
| PNG (original) | Lossless | 1.4 MB | Yes |
| JPEG conversion (Q80) | Lossy | 180 KB | No, replaced with white |
| PNG compressed with tool | Lossy Q80 | 290 KB | Yes |
JPEG wins on file size. But it destroys the transparency every time. There is no “transparent JPEG” in normal use. If your image needs a see-through background, PNG (or WebP with alpha) is your only real option.
Step by step: compress PNG files and keep transparency
Go to ImgPrism PNG compressor. Everything runs locally in your browser. Your files stay on your machine.
Step 1: Open the page and drag your PNG file onto the upload area. You can also click to browse your files.
Step 2: The tool detects that your file has transparency and adjusts its compression pipeline automatically. You don’t need to tick any special checkbox or toggle any setting.
Step 3: Move the quality slider. I start at 80 for logos and graphics. For screenshots with transparency, 75 works fine.
Step 4: Hit compress. It processes in about two seconds for most files.
Step 5: You’ll see a before and after preview. Check the edges where transparent pixels meet colored pixels. That’s where artifacts show up first. If the edges look clean, download the file.
I tested this on a batch of 12 logos from that project I mentioned. The whole batch took under a minute. Every single file kept its transparency intact. I placed them on dark backgrounds, gradient backgrounds, and photo backgrounds to check. No white halos. No fuzzy edges.
Real compression results from my tests
Here’s what I got compressing different types of PNG files. Quality was set to 80 for all of them.
| Image type | Original | Compressed | Savings | Transparency OK? |
|---|---|---|---|---|
| Logo with transparency (320x120px) | 120 KB | 45 KB | 62% | Yes |
| App screenshot with rounded corners (1440x900px) | 890 KB | 320 KB | 64% | Yes |
| Icon sprite sheet (256x256px) | 67 KB | 28 KB | 58% | Yes |
| Product photo saved as PNG (2400x2400px) | 3.2 MB | 1.1 MB | 66% | N/A, should be JPEG |
That last one is worth talking about. Someone exported a product photo as PNG with a transparent background. The file was 3.2MB. Even after compression it was still over 1MB. If your image is a photo without any actual transparent areas, do yourself a favor and convert it to JPEG first. A JPEG at quality 80 would have been around 200KB for the same image. Then compress it from there.
The logo result made me happy though. 120KB down to 45KB is the difference between a sluggish mobile load and something instant. Multiply that by 12 logos and the total weight dropped from 1.4MB to around 540KB. That’s a page weight reduction that visitors actually notice.
When you should convert PNG to WebP instead
If browser support isn’t a concern for your project, WebP with alpha transparency gives you even smaller files than compressed PNG. I ran the same logo from the test above through the ImgPrism convert tool and got it down to 22KB as a WebP. That’s half the size of the compressed PNG with the same visual quality.
WebP has had alpha channel support since the beginning. Safari added support for it in version 14 back in 2020. At this point you’re safe using it for anything targeting modern browsers.
My rule of thumb: if you need the image to work absolutely everywhere, including ancient email clients and old software, stick with compressed PNG. If you’re building for the web and targeting current browsers, convert to WebP.
For a full walkthrough on that, check out How to Convert Images to WebP.
Tools for the job
- Compress PNG files to shrink transparency-safe PNGs by 50-65%
- Convert to WebP if you want even smaller files with alpha support
Both tools process everything in your browser. Nothing gets uploaded to any server. Run as many files as you want.