PNG files are known for their quality but also for their large file sizes. This guide explains how to compress PNGs effectively using both lossless and lossy methods.

Understanding PNG Compression

PNG (Portable Network Graphics) uses lossless compression by default, meaning no data is lost when the file is saved. However, this results in larger files compared to JPEG.

How PNG Compression Works

PNG uses the DEFLATE algorithm (same as ZIP files) with additional filtering:

Filtering - Each row of pixels is preprocessed to improve compression
Compression - DEFLATE algorithm compresses the filtered data
Result - Smaller file with zero quality loss

Lossless PNG Compression

Lossless compression reduces file size without any quality degradation. The compressed image is pixel-perfect identical to the original.

What Lossless Compression Can Achieve

10-30% file size reduction typically
Up to 50% for unoptimized PNGs
Zero quality loss

Lossless Optimization Techniques

Filter optimization - Trying different filters to find the best compression
Compression level - Using maximum DEFLATE compression
Chunk removal - Stripping unnecessary metadata
Interlacing removal - Non-interlaced files are usually smaller

Tools for Lossless Compression

OxiPNG - High-performance optimizer (used by fatpng)
OptiPNG - Classic optimization tool
PNGOUT - Excellent compression ratios

Lossy PNG Compression

Lossy compression achieves much greater file size reductions by reducing the number of colors in the image.

What Lossy Compression Can Achieve

50-80% file size reduction
Minimal visible quality loss in most cases
Not suitable for all images

How Lossy PNG Compression Works

Color quantization - Reduces millions of colors to 256 or fewer
Dithering - Simulates missing colors using patterns
Standard compression - Lossless compression on the reduced palette

Tools for Lossy Compression

pngquant - Excellent quality at high compression
TinyPNG - Popular online service
ImageAlpha - Mac app with preview

When to Use Each Method

Use Lossless Compression For:

Screenshots with text
Technical diagrams
Images that will be edited later
When pixel-perfect quality is required
Source files and archives

Use Lossy Compression For:

Web images where file size matters
Photos saved as PNG
Graphics with many colors
When some quality loss is acceptable

PNG Color Types Explained

PNG supports different color types, each affecting file size:

Color Type	Bits/Pixel	Best For
Grayscale	1-16	Black and white images
Indexed (palette)	1-8	Simple graphics (<256 colors)
Truecolor	24	Photos without transparency
Truecolor + Alpha	32	Photos with transparency

Optimization Tips

1. Reduce Color Depth When Possible

A simple logo with 10 colors doesn't need 16 million color support. Converting to indexed color (8-bit) can dramatically reduce size.

2. Remove Unnecessary Transparency

If your image doesn't need transparency, convert to RGB instead of RGBA. This saves 25% in bit depth.

3. Consider Alternatives

JPEG - For photographs (much smaller)
WebP - Better compression, supports transparency
SVG - For logos and icons (infinitely scalable)

4. Resize Before Compressing

A 2000px PNG scaled down to 500px via CSS is still a 2000px file. Resize first, then compress.

Comparing Results

Example: A 1920x1080 screenshot

Method	File Size	Reduction	Quality
Original	2.5 MB	-	100%
Lossless (OxiPNG)	1.8 MB	28%	100%
Lossy (256 colors)	450 KB	82%	~95%
Convert to WebP	380 KB	85%	~98%

Preserving Transparency

Both lossless and lossy PNG compression preserve the alpha channel (transparency). However, with lossy compression:

Semi-transparent pixels may be slightly altered
Complex gradients in transparency may show banding
Simple transparency (fully opaque/transparent) is unaffected

Conclusion

For most web use, start with lossless compression. If the file is still too large, try lossy compression and compare the results. fatpng's PNG compressor supports both methods, letting you choose the best balance between file size and quality for your needs.

PNG Compression Guide: Lossless vs Lossy