You export a PNG from Figma, Photoshop, or a screenshot tool and it's 4 MB. You need it under 500 KB for a web page, an email, or a client deliverable. Your first instinct is to re-export at lower quality — but PNG doesn't have a quality slider like JPEG. So you're stuck choosing between a bloated file and a visibly degraded image.
The good news: PNG compression works differently from JPEG. There are ways to remove significant file weight without touching a single visible pixel. You just need to know which levers to pull.
Yes, you can compress a PNG without losing visible quality. PNG is a lossless format, so tools like PNGQuant, OptiPNG, and Squoosh reduce file size by stripping unnecessary metadata, reducing the color palette, and re-encoding pixel data more efficiently. Most PNGs can be reduced by 40–70% with zero perceptible change to the image.
What is PNG compression?
PNG (Portable Network Graphics) is inherently a lossless format — meaning the file always decodes to an exact copy of the original pixel data. But that doesn't mean every PNG file is as small as it could be. There are two distinct ways PNG files can be made smaller without degrading what you see:
- Lossless optimization — removing metadata, comments, color profiles, and re-running the DEFLATE compression algorithm with better settings. The pixel data is mathematically identical; the file is just encoded more efficiently.
- Near-lossless palette reduction — reducing a 24-bit (16.7 million color) image to an 8-bit palette (256 colors) using intelligent quantization. If the image doesn't actually use millions of unique colors — which most screenshots, UI assets, and illustrations don't — you lose nothing visible, but can save 60–80% in file size.
The key distinction: neither of these is the same as JPEG-style lossy compression, which permanently discards pixel information and introduces visible artifacts. Done correctly, PNG compression is genuinely non-destructive.
Why it matters for your site and workflow
Unoptimized PNGs are one of the most common causes of slow-loading web pages. A single screenshot embedded in a blog post or landing page can weigh more than the rest of the page combined. The downstream effects compound quickly:
- Page speed. Google's Core Web Vitals — specifically LCP (Largest Contentful Paint) — are directly impacted by image payload. A 3 MB hero PNG on mobile is a punishing load time penalty.
- Storage and bandwidth costs. If you're serving images from a CDN or object storage, uncompressed PNGs multiply your costs proportionally.
- Email deliverability. Most email clients block or defer images over a certain size threshold. A compressed PNG at 80 KB loads inline; a 2 MB version may never render.
- Client deliverables and uploads. Many platforms — CMS tools, social networks, design collaboration tools — have hard file size limits. Compressing first saves you re-exporting later.
Step-by-step: how to compress a PNG without losing quality
- Identify what kind of PNG you're working with. Open the image and ask: is this a photograph? A screenshot? A flat-color logo or illustration? Photographs rarely compress well as PNG — consider converting to WebP or JPEG instead. Screenshots, UI assets, and flat graphics are where PNG compression delivers huge wins.
- Strip metadata first. Before anything else, remove embedded EXIF data, ICC color profiles, and text chunks that tools like Photoshop or macOS Finder add automatically. Tools like ExifTool or the Rebrixe PNG Compressor do this automatically. This alone can reduce size by 5–15%.
-
Run palette quantization if the image allows it. Use PNGQuant (command line:
pngquant --quality=85-95 input.png) or a GUI equivalent. Set the quality range to 85–95 to keep the result visually lossless while achieving large size reductions. The output will be a new file (e.g.,input-fs8.png). -
Follow up with lossless re-encoding. Run OptiPNG or OxiPNG on the quantized output. This second pass applies a more aggressive DEFLATE compression level without touching pixel data:
optipng -o5 input-fs8.png. The two-pass approach (quantize → re-encode) consistently outperforms either tool used alone. - Compare the output side by side. Open the original and compressed versions at 100% zoom in your image viewer. Look for banding in gradients, color shifts in flat fills, or noise in smooth areas. If you see any of these, your quantization step was too aggressive — dial the quality range up to 90–99 and repeat.
- Check the actual file size reduction. If you're only seeing 10–20% savings, the image likely has complex color distribution (close to a photograph). At that point, evaluate whether PNG is the right format — the same image as WebP will almost certainly be smaller with equivalent or better quality.
- Automate for production workflows. If you're compressing images regularly, set up a build step. Most static site generators (Astro, Next.js, Eleventy) have image optimization plugins that run PNGQuant or Sharp automatically. For manual workflows, ImageOptim on macOS runs all passes with one drag-and-drop.
Common mistakes that tank quality
1. Confusing PNG compression with JPEG compression
PNG compression has no "quality" setting in the JPEG sense — there's no slider from 1–100 that degrades the image progressively. If you're exporting a PNG from Photoshop at "quality 60," what you're really doing is reducing DEFLATE compression effort, not pixel quality. The result is a barely smaller file with no quality benefit. Use dedicated PNG optimization tools instead of export settings.
2. Running quantization on photographs
Palette reduction works beautifully on flat-color graphics and screenshots. It works terribly on photographs, which genuinely use millions of distinct color values. Forcing a photo down to 256 colors produces visible banding and color blocking. If you're working with a photograph, convert to WebP or JPEG — don't try to compress it as PNG.
3. Overwriting the original
Always keep the original PNG. Near-lossless compression makes imperceptible changes — but if you need to re-process or edit the image later, working from a compressed source compounds artifacts. Keep originals in a separate folder and only serve the compressed versions.
4. Ignoring transparency
If your PNG has a transparent background, converting to JPEG destroys it. Run your compression with a tool that preserves alpha channels — PNGQuant handles transparency correctly; some older online tools don't. Always check the output on a non-white background to confirm the alpha layer is intact.
Real-world compression examples
These are representative results from running PNGQuant (quality 85–95) followed by OptiPNG (-o5) on common PNG types:
The pattern is consistent: flat graphics and screenshots compress dramatically. Photographic content in PNG format resists compression and should be converted to a better format entirely.
Tool comparison
The right tool depends on your workflow — browser-based for occasional use, command-line or build-tool integration for production pipelines.
| Tool | Type | Lossless | Palette reduction | Privacy | Best for |
|---|---|---|---|---|---|
| Rebrixe PNG Compressor | Browser | Yes | Yes | Client-side only | Quick one-off compression, no uploads |
| Squoosh | Browser | Yes | Yes | Client-side only | Visual before/after comparison |
| TinyPNG | Browser / API | Lossy only | Yes | Server upload | Batch compression via API |
| PNGQuant | CLI | Near-lossless | Yes | Local | Scripting and build pipelines |
| OptiPNG / OxiPNG | CLI | Yes | No | Local | Maximum lossless compression pass |
| ImageOptim (macOS) | Desktop app | Yes | Yes | Local | macOS drag-and-drop batch workflows |
Compress your PNG right now — free
The Rebrixe PNG Compressor runs entirely in your browser. Your images are never uploaded to a server — compression happens locally using WebAssembly-powered PNGQuant and OptiPNG under the hood. No account, no file size limit, no watermarks.