How to Make a PNG Smaller Without Losing Transparency
Shrink a transparent PNG without adding a white box. Resize oversized pixels, compress the palette, or export a WebP copy while keeping your PNG master.
Contents
To make a PNG smaller without losing transparency, first resize it to the largest dimensions you actually need, then compress its color palette and check the edge against dark and light backgrounds. Keep PNG when the destination requires it. If the destination accepts WebP, export a smaller transparent WebP copy and retain the PNG as your master.
A transparent background is stored in an alpha channel. The gray checkerboard you see in an editor is only a preview, so a file can look transparent and still carry far more color data or pixels than the final placement needs.
1. Check whether the PNG is larger than its display size
Start with pixel dimensions, not the percentage promised by a compressor. A 3000 px logo placed at 300 px wide makes the browser decode ten times the needed width, while a marketplace card or email signature gains nothing from those extra source pixels.
Open the file properties and compare its width with the largest place it will appear. For a 600 px slot, I normally make a 1200 px delivery copy for a 2x display, then leave the original untouched. Simple. A 2 MB compression guide helps when an upload form gives you a byte limit instead of a pixel target.
Cropping empty transparent margins can save more than another compression pass because the encoder no longer has to describe a large canvas. If the object itself needs a tighter frame, use a rectangular crop before resizing, but leave breathing room around a logo’s counter-forms and fine edges.
Watch for exported artboards from Figma or Adobe Illustrator. A mark may occupy only the middle third of a square PNG because the export included an old artboard, an off-canvas object, or a shadow you can’t see on white. Trimming that empty area changes the canvas, not the visible logo. It also makes alignment easier when the asset lands in a navigation bar.
2. Resize it in Preview before using a website
On a Mac, open the PNG in Preview, choose Tools > Adjust Size, keep Scale proportionally selected, and enter the new width. Apple also lets you select several images in Preview’s sidebar and resize them together. Save a copy so the large master survives.
Preview is quick, built in, and honest about the estimated output size. It doesn’t give you much control over palette reduction, though, and resampling permanently removes pixels. Windows Photos can crop a file, but its export controls vary by version; Paint is the more predictable native route for exact width and height.
When the native result is still heavy, a browser image resizer gives you pixel and percentage controls without installing another app. RoundCut keeps processing in the browser, but resizing still changes the image data. There’s no magic exemption.
3. Compress the PNG and inspect the alpha edge
PNG compression can rearrange lossless encoding, remove unused color choices, or quantize a large palette into a smaller indexed palette. The last method often makes flat logos and interface graphics dramatically lighter, yet it can add banding to gradients or roughen a soft shadow.
I ran a controlled file through RoundCut Compress on June 11, 2026. The 1600 x 1600 RGBA source was 762,793 bytes. It finished in 6.62 seconds at 40,769 bytes, a 94.66% reduction, while keeping the dimensions and alpha channel.
Almost. The output moved from 16-bit true color with 47,897 measured colors to an 8-bit palette with 255 colors. On this flat orange graphic, the change was hard to spot at normal size. On a product cutout with glass, smoke, or a long gradient, I’d inspect at 100% before shipping it.
The byte saving here is a test result, not a promise for every PNG. Screenshots with lots of flat interface color often compress well. Noisy phone photos saved as PNG usually don’t, because almost every neighboring pixel asks the encoder to preserve another variation. In that case, dimensions or format choice will do more work than palette cleanup.
Put the result over white, charcoal, and one saturated color (the background switch catches pale fringes fast). Check rounded corners and semi-transparent shadows. For portrait cutouts, the same inspection used for clean hair edges catches alpha damage that disappears on a checkerboard.
If the edge holds, compress the PNG and download the result. The tool preserves the file type and dimensions, but palette-heavy compression is less suitable for assets that must remain pixel-identical for later editing.
4. Convert a delivery copy to WebP when accepted
Transparent WebP is often the better delivery file for a website because it supports an alpha channel with either lossless or lossy color data. Google’s 12,000-image study found its lossless encoder beat two optimized PNG encoders across more than 99% of that test corpus, though your own asset may land elsewhere.
Use a PNG-to-WebP converter for the copy served on a site, then keep the PNG beside it for editing and handoff. This is especially useful across a Shopify-style product grid where repeated transparent cutouts can pile up page weight.
WebP has a catch. Some print vendors and old upload forms still ask for PNG, while hidden RGB values under fully transparent pixels may change during WebP encoding unless an encoder uses an exact mode (which matters in a later compositing workflow). The visible alpha can remain correct even when the file isn’t bit-for-bit equivalent.
Our format comparison covers PNG, WebP, and AVIF in more detail. For a live storefront, the guide to smaller product images also shows why display dimensions matter before format choice.
5. Keep the PNG master when exact color data matters
Keep the original PNG for assets you may edit again, files with subtle alpha gradients, or handoffs where another designer expects the full source. Make smaller delivery copies from that master. Don’t run the only copy through repeated palette reduction and hope the soft edges survive.
This matters after background removal. A background remover can create a transparent master, but the first cutout may include fine semi-transparent pixels around hair or reflective products. Compression can expose a weak mask rather than cause it.
My rule is plain: resize first when the canvas is oversized, compress once, and inspect the alpha edge on real backgrounds. For the web, add a WebP delivery copy. For the archive, keep the PNG master. Two files cost less than rebuilding a damaged edge before an Etsy launch.
