How to Compress PNG Images Without Losing Quality

PNG is the go-to format for screenshots, logos, and UI mockups that need transparency. But raw PNGs are huge — a single full-resolution macOS screenshot can weigh 8 MB. You don't need Photoshop to fix that. A modern browser can losslessly shrink PNG files by 60-80% in seconds, using exactly the same algorithms that paid desktop apps charge for. Here's how, plus the three techniques that actually work — and when to reach for WebP instead.

#Why PNG compression is different from JPEG

JPEG throws away data. It re-encodes your image with a lossy DCT pass, and every save round-trips a little more quality. PNG does the opposite. The PNG spec, published as RFC 2083 and maintained by the W3C, defines a strictly lossless format where every byte of the original raster can be reconstructed bit-for-bit. So when people say "compress a PNG without losing quality," they're describing the default behavior — not a trick.

Where do the savings come from, then? From smarter encoders that explore the PNG spec's full toolbox — filters, scanline prediction, palette optimization — instead of just accepting whatever Photoshop's "Save As" dialog emits on the first pass.

#The two kinds of "lossless"

• True lossless — the output file decodes to pixel-identical data. Hash the decoded pixels before and after and the SHA-256 matches.
• Visually lossless — the output may have minor pixel changes (palette reduction, rounding) but no human can tell at normal viewing distance.

The first is always safe for any workflow. The second is what lets tools like pngquant or TinyPNG claim 70% savings on UI shots — they quietly switch to 8-bit indexed color with alpha.

#What PNG actually stores

A PNG file is a sequence of chunks. Each chunk has a length, a 4-character type code (IHDR, IDAT, tEXt, etc.), raw data, and a CRC. The big one is IDAT — that's your pixel data, DEFLATE-compressed. Everything else is metadata or structural overhead.

89 50 4E 47 0D 0A 1A 0A   ← PNG signature (8 bytes)
IHDR chunk  — width, height, bit depth, color type
IDAT chunks — DEFLATE-compressed pixel data
tEXt/iTXt   — embedded metadata (optional)
IEND chunk  — end marker

#Where the bytes go

For a typical 1920×1080 screenshot saved from Photoshop at 4 MB, a rough byte breakdown looks like this:

• ~92% IDAT (pixel data)
• ~5% tEXt / iTXt / zTXt (embedded metadata, ICC profile)
• ~2% palette, gamma, ancillary chunks
• ~1% signature, IHDR, IEND overhead

That's why metadata stripping alone isn't enough — you also have to re-encode the IDAT stream to see real savings.

#Three techniques that actually shrink PNGs

Before the step-by-step, it's worth knowing what the tool is doing under the hood. Every lossless PNG optimizer combines some mix of these three techniques.

#1. Palette quantization (indexed-color PNG)

A 24-bit truecolor PNG with alpha uses 4 bytes per pixel. An 8-bit palette PNG uses 1 byte per pixel plus a short lookup table. For UI screenshots, logos, and flat illustrations, the image often uses fewer than 256 unique colors anyway — meaning palette mode produces a perceptually identical image at about 25% the byte size.

This is where pngquant built its reputation. Its NeuQuant-derived algorithm finds the best 256-color palette for your image, then dithers where needed. Done well, the result is indistinguishable from the original at 1:1 zoom.

#2. DEFLATE filter optimization

PNG applies one of five filters per scanline (None, Sub, Up, Average, Paeth) before handing the row to DEFLATE. Picking the right filter per row can cut file size 10-30% without changing a single pixel. Photoshop uses a fast heuristic; tools like oxipng brute-force every combination and keep whichever is smallest.

Zopfli — Google's DEFLATE-compatible encoder — goes further by searching the compression tree more exhaustively. It's about 80× slower than standard zlib, but produces output 3-8% smaller. Perfect for a one-time compression pass on assets you'll ship to production.

#3. Metadata stripping

EXIF blocks, ICC color profiles, creation dates, Photoshop XMP chunks, and embedded thumbnails can easily add 50-200 KB to a PNG exported from a design app. None of it is needed for a web image. Strip it.

Bonus: stripping metadata also removes GPS data from phone screenshots, so this is a small privacy win too.

#How to compress PNG in your browser

This is the quick path: no install, no account, no upload, no waiting on a server round-trip.

#1. Open the compressor

Head to imagecompressor.ikit.app. The whole pipeline runs in WebAssembly plus the Canvas API, so your PNG is decoded, re-encoded, and re-emitted without the file ever hitting a network socket.

#2. Drop your PNGs

Drag one file or up to 20 at once. You can paste from clipboard (⌘/Ctrl + V), which is the fastest path when you're iterating on a screenshot.

#3. Pick lossless or visually lossless

Two presets matter:

If your source is unknown provenance or heading to print-quality output, start with lossless. If it's a UI mockup, app screenshot, or brand logo, go visually lossless — the difference is invisible and the savings are dramatic.

#4. Verify with a hash

For strictly lossless mode, you can prove the pixel content matches by decoding both files and hashing the raw pixel buffer:

# using ImageMagick + sha256sum
magick original.png   -depth 8 RGBA:- | sha256sum
magick compressed.png -depth 8 RGBA:- | sha256sum

If the digests match, the images are byte-for-byte identical in pixel content. For a pure browser check, paste both exported files into hash.ikit.app and compare their SHA-256 values — that tool also runs entirely client-side, so it's a clean end-to-end privacy story.

#Real-world benchmarks

I ran three sets of 10 PNGs through the tool in both modes. Sources were the usual suspects: Figma exports, macOS screenshots, and brand logos pulled from five companies' press-kit ZIPs. Results:

A caveat on the photographic category: saving photographs as PNG rarely makes sense. JPEG or WebP will beat PNG by an order of magnitude on photo content. If you find photographs saved as PNG in your pipeline, the real fix is format change, not compression.

#10 UI screenshots

Screenshots have large flat areas, crisp text, and a limited color palette — ideal for both filter optimization and palette quantization. The lossless run saved 56% using a full filter search plus Zopfli. The visually lossless pass dropped another 28 points by switching to 8-bit palette mode.

#10 transparency-heavy logos

Logos win even bigger in palette mode because most use fewer than 64 colors. The lossless pass here was limited by the already-optimized nature of some press-kit exports, but the palette pass effectively rebuilt each logo in 8-bit and shaved 81% off with zero visible change.

#10 photographic PNGs

This is the category where "compress without losing quality" has the least payoff. A 4032×3024 iPhone photo saved as PNG is around 15 MB; the same photo as WebP at quality 85 is ~600 KB with no perceptible difference. The right answer is format conversion — not deeper compression.

#When lossless isn't enough

If the lossless pass runs and the file is still too big, the problem is the format, not the encoder. Two good upgrades:

#Convert to WebP

WebP is supported in every modern browser and matches PNG's lossless mode while beating it on size by 25-35% (see Google's reference comparison). You can convert inside the same iKit tool — tick Convert all to WebP in the dropdown before running the batch.

#Convert to AVIF

AVIF (based on the AV1 video codec) beats WebP by another 20-30% on photographic content. Browser support in 2026 is near-universal — Chrome, Firefox, Safari 16+, every major CDN and email client. The remaining reason to stick with PNG is legacy tooling: some CMS platforms, older design apps, and vintage email clients still choke on AVIF.

#Automating PNG compression on your own machine

If you're compressing PNGs routinely — as part of a static site build, a Figma-to-web export, or a design-system pipeline — browser tools are slower than a native CLI. Two worth wiring in:

#pngquant for batch palette quantization

# install
brew install pngquant      # macOS
sudo apt install pngquant  # Debian/Ubuntu

# compress a folder in place, overwriting originals
pngquant --quality=70-95 --strip --force --ext .png ./images/*.png

The --quality=70-95 range tells pngquant "aim for quality 95 but don't drop below 70; skip the file if you can't hit that." --strip removes metadata. Run time is under a second per file on modern hardware.

#oxipng for strict lossless

# install
cargo install oxipng

# brute-force optimize every PNG in a folder
oxipng -o max --strip safe --alpha ./public/images/*.png

-o max runs the full filter search; --strip safe removes metadata that can't affect rendering; --alpha runs an extra pass to optimize alpha-channel storage. On an M-series MacBook, a folder of 100 UI screenshots takes about 20 seconds end-to-end.

Both tools are bit-for-bit compatible with every PNG decoder — browsers, macOS Preview, Photoshop, Figma, Sketch. You can safely run them on production assets without worrying about downstream breakage.

#Common mistakes that waste savings

• Running a second compression pass on an already-optimized file and being surprised nothing changed.
• Forgetting to strip metadata — on Photoshop exports alone, this costs 50-200 KB per file.
• Saving a photograph as PNG when you could have started with WebP or JPEG.
• Using a server-based "online compressor" for confidential screenshots or NDA assets.
• Keeping 24-bit truecolor for UI mockups that only contain 32 distinct colors.
• Confusing Photoshop's "Save for Web" output with an actually-optimized file — it isn't; the defaults are conservative.

If you only remember one thing: for UI work, try palette mode first. The savings are dramatic and the eye can't tell.

#Related on iKit

• Batch-compress 20 images to a single ZIP — Same compressor, batch mode. Drop a folder, get a ZIP — useful when one PNG turns into a hundred.
• Generate every iOS / Android / Web icon size — App icons are PNG. After you compress the source, this is the next step in the icon pipeline.