How to Compress a PNG Without Losing Quality — Every Method
Your PNG logo weighs three megabytes, the page takes forever to load, and "compress" in your editor changes nothing. Sound familiar? PNG is a lossless format, so it's big by default — but it can be compressed, often 3-5× with no difference the eye can catch. Let's see where the weight comes from, which tools actually work, and when the right answer is not PNG at all.
Three levels of action: 1) check the pixel dimensions — most heavy files are simply enormous; 2) run a smart compressor (TinyPNG, Squoosh, pngquant) — palette quantization cuts 50-80% almost invisibly; 3) reconsider the format: on websites PNG is often better replaced by WebP, and for logos — by SVG.
Why PNG is heavy
PNG stores the image losslessly: every pixel is reconstructed exactly. That's its superpower (no artifacts, real transparency) and its curse: a photo or gradient in PNG weighs several times more than in JPG. The full format comparison is in PNG vs JPG.
PNG weight is a product of three factors:
- Pixel dimensions. Weight grows quadratically: a 4000×4000 image is 16 megapixels versus one at 1000×1000.
- Color count. PNG-24 stores 16.7M colors; PNG-8 at most 256. For logos and graphics 256 is almost always plenty.
- Packing efficiency. The same pixel array can be encoded tightly or wastefully — this is where optimizers play.
Level 1. Check dimensions — the most common cause
Before compressing, open the file's properties. If a site image is 4000 pixels wide but displays in a 400-pixel block, no compressor will save you: shrink the image itself. Rule of thumb: export at 2× the display size (for Retina screens) — a 400 px block needs an 800 px file. Platform size requirements are in logo sizes for websites and social media.
Anything can resize: macOS Preview (Tools → Adjust Size), Figma
(export with a multiplier), any online editor.
The reduced copy is for the site; keep the original. A raster image cannot be enlarged back without loss — here's why.
Level 2. Smart compression
Online: TinyPNG and Squoosh
TinyPNG is the best‑known compressor: drop files in (up to 20 free at a time) and get results, typically 50-80% off. The trick is quantization: the service reduces the palette to ~256 optimally chosen colors with dithering. Technically lossy, but on logos and UI graphics the difference is invisible even under a magnifier.
Squoosh (a Google project) offers more control: a color‑count slider, an instant split‑screen before/after, plus conversion to WebP and AVIF right there. It runs locally in the browser — images never leave your machine, which matters for confidential designs.
CLI tools: pngquant and oxipng
For batches and automation:
- pngquant — TinyPNG‑style quantization in the terminal:
pngquant --quality=65-85 *.png. Hundreds of files in seconds. - oxipng / OptiPNG — lossless optimization: repacks the data more efficiently, saving 5-30% without changing a single pixel. For when loss is fundamentally unacceptable.
- The "pngquant, then oxipng" combo is a standard website build pipeline.
Editor export
In Photoshop
choose "Export As → PNG-8" when colors are few — the same quantization at export time. Figma only exports PNG-24, so its output is almost always worth chasing with a compressor.
Level 3. Maybe you don't need PNG
Sometimes the best way to compress a PNG is to stop using one:
| Situation | Better format | Why |
|---|---|---|
| Logo, icon, diagram | SVG | vector: kilobytes and infinite scaling (comparison) |
| Photo without transparency | JPG / WebP | lossy compression is several times more efficient (details) |
| Any website graphics | WebP | ~26% lighter than PNG at equal quality (what WebP is) |
| Print, masters | PNG stays | lossless and surprise‑free |
A raster logo can be vectorized — closing the weight question forever: how to vectorize a logo. And if you're optimizing SVG files, we have a separate guide: how to optimize SVG.
The practical checklist
- Find the real display size and export at 2× of it.
- Run TinyPNG/Squoosh (one‑off) or pngquant (batch).
- Eyeball the result at 100% and 200% zoom — especially gradients and translucent edges, where quantization can band.
- On the web, serve WebP with a PNG fallback.
- Store originals separately and never re‑compress them.
By the way, all PNG logos in our catalog are already optimized, and the grid cards load lightweight WebP previews — you download the full‑weight original while the pages stay fast. How to download logos in the right format: how to download a logo from a website.