X Xerobit

PNG Compressor Online — Reduce PNG File Size Without Losing Quality

PNG compression reduces file size without losing image quality through lossless compression. Here's how PNG compression works, when to use PNG vs JPEG, and how to compress PNG...

Mian Ali Khalid · · 5 min read
Use the tool
Image Compressor
Compress JPEG, PNG, and WebP images in your browser. Adjustable quality, batch mode. Files never leave your device.
Open Image Compressor →

PNG compression reduces file size without changing any pixels — every pixel in the compressed PNG is exactly the same as in the original. This is lossless compression, unlike JPEG which discards data to achieve compression.

Use the Image Compressor to compress PNG files directly in your browser.

How PNG compression works

PNG uses two compression stages:

1. Filtering: Before compression, each row of pixels is transformed to make the data more compressible. Five filter types are available; the encoder chooses the best per row:

  • None — store raw pixel values
  • Sub — store difference from previous pixel (left)
  • Up — store difference from pixel above
  • Average — store difference from average of left and above
  • Paeth — store difference using Paeth predictor

Filtering makes pixels in similar areas (smooth gradients, solid colors) encode as small numbers near zero, which compresses well.

2. DEFLATE compression: The filtered data is compressed with DEFLATE (LZ77 + Huffman coding) — the same algorithm used in ZIP and gzip files. Repetitive data (large blocks of the same color) compresses dramatically; complex photographic data doesn’t compress as much.

PNG compression levels

PNG has compression levels 0–9 (controlled by zlib’s compression level):

  • Level 0: No compression (largest file, fastest)
  • Level 6: Default (good balance)
  • Level 9: Maximum compression (smallest file, slowest)

The tradeoff is encode time vs file size — decode time is similar across levels. For web assets, level 9 is often used at build time since files are only encoded once but served millions of times.

PNG vs JPEG vs WebP

FormatCompressionTransparencyBest for
PNGLosslessYes (alpha channel)Screenshots, logos, icons, text images
JPEGLossyNoPhotographs, photorealistic images
WebPLossy or losslessYesModern web (best overall)

Use PNG for:

  • Screenshots (exact pixel fidelity required)
  • Logos with transparent backgrounds
  • Icons and UI elements
  • Text-heavy images (charts, diagrams)
  • Images you’ll edit further (no generation loss)

Use JPEG for:

  • Photographs and photorealistic images
  • Images where small file size matters more than perfect fidelity

PNG files of photographs are often 3–10× larger than equivalent JPEG. If you’re storing photos as PNG “for quality,” convert them to JPEG — the difference is imperceptible and the size savings are massive.

PNG with transparency

PNG supports three transparency modes:

Alpha channel (RGBA): Each pixel has a separate alpha value (0–255). Allows partial transparency (semi-transparent shadows, smooth edges). This is the full “PNG-32” format.

Binary transparency (1-bit): One color is designated “transparent,” all pixels of that color become fully transparent. “PNG-8” with transparency.

No transparency: Standard PNG without any transparent pixels.

Tools like pngquant can reduce alpha channel complexity to reduce file size while maintaining apparent transparency.

Compression tools and savings

pngquant (lossy quantization — not lossless compression):

# Install on macOS:
brew install pngquant

# Compress (creates new file, preserves original):
pngquant --quality 65-80 image.png
# Creates image-fs8.png

# Batch compress:
pngquant --quality 65-80 --ext .png --force *.png

pngquant reduces a 32-bit PNG to 8-bit (256 colors) using intelligent color quantization. For logos, icons, and simple graphics, quality loss is minimal while file size drops 40–80%.

OptiPNG / oxipng (lossless optimization):

# oxipng (faster, better than optipng):
oxipng -o 6 image.png

# Batch:
oxipng -o 6 -r images/

Lossless optimization re-compresses with better settings without changing pixels. Typically saves 5–20%.

Sharp (Node.js):

const sharp = require('sharp');

// Lossless PNG compression:
await sharp('input.png')
  .png({ compressionLevel: 9, effort: 10 })
  .toFile('output.png');

// Convert to WebP for better compression:
await sharp('input.png')
  .webp({ quality: 80 })
  .toFile('output.webp');

Python (Pillow):

from PIL import Image

img = Image.open('input.png')
img.save('output.png', optimize=True, compress_level=9)

Online PNG compression

The Image Compressor uses pngquant-style quantization for significant compression of PNG files. All processing happens in your browser — images are not uploaded to any server.

For simple graphics, icons, and UI screenshots, expect 30–70% size reduction with no visible quality difference.

When PNG compression isn’t enough

If PNG files are still too large after compression:

Convert to WebP: Modern browsers (Chrome, Firefox, Safari 14+, Edge) support WebP. A WebP with lossless compression is typically 25–35% smaller than a PNG. With lossy WebP, photos can be 60–90% smaller.

# Convert PNG to WebP with cwebp:
cwebp -q 80 input.png -o output.webp

# Lossless WebP:
cwebp -lossless input.png -o output-lossless.webp

Use SVG for vector graphics: Logos, icons, and diagrams built with vector shapes should use SVG, not PNG. An SVG logo can be 5–50KB; the equivalent high-resolution PNG can be 100–500KB.

Checking compression results

Before deploying compressed images, verify:

  1. Visual quality is acceptable at the actual display size
  2. Transparency is preserved correctly (check alpha channel edges)
  3. Text in the image is still readable (text in PNG compresses well; text in JPEG may show artifacts)

The Image Compressor shows the original vs compressed size and lets you preview the result before downloading.


Related posts

Related tool

Image Compressor

Compress JPEG, PNG, and WebP images in your browser. Adjustable quality, batch mode. Files never leave your device.

Written by Mian Ali Khalid. Part of the Frontend & Design pillar.