PNG: The Definitive Guide to Lossless Images

PNG was created in 1996 for one reason: GIF used patented LZW compression, and the internet needed a patent-free alternative. Three decades later, PNG has outlived the patent controversy and become the default format for lossless images on the web. Every screenshot tool, every design tool export, every UI framework defaults to PNG for non-photographic images.

What makes PNG endure isn't flashiness — it's reliability. DEFLATE compression produces reasonable file sizes without any quality loss. Five color types cover every use case from 1-bit monochrome to 48-bit deep color. Full alpha channel transparency handles everything from drop shadows to glass effects. And the format is simple enough that every piece of software on every platform can read it.

This guide goes deep: how DEFLATE works, when to use which color type, how to exploit indexed mode for dramatic size savings, what APNG adds for animation, and how tools like pngquant and oxipng can shrink PNGs by 50-80%. Need a conversion? Convert PNG to WebP for smaller web files, or PNG to JPG when you don't need transparency.

DEFLATE Compression: How PNG Shrinks Data

PNG uses DEFLATE compression — the same algorithm used in ZIP files, gzip, and zlib. DEFLATE combines LZ77 (finding repeating byte sequences and referencing previous occurrences) with Huffman coding (assigning shorter codes to more frequent values).

Before DEFLATE compresses the data, PNG applies a prediction filter to each row of pixels. The filter predicts each pixel's value from its neighbors (left, above, upper-left) and stores only the difference. For images with gradual color changes — gradients, photos, blurred backgrounds — the differences are small numbers that DEFLATE compresses extremely well.

PNG offers five filter types per row: None, Sub (predict from left), Up (predict from above), Average, and Paeth (adaptive prediction). The encoder tests each filter for each row and picks the one producing the smallest output. This per-row filter selection is why PNG compression effectiveness varies dramatically by image content.

Compression Levels and Speed

DEFLATE compression levels range from 1 (fastest, least compression) to 9 (slowest, best compression). The difference between levels is encoding speed, not decode speed — a level-9 PNG decodes at the same speed as a level-1 PNG.

In practice, the difference between level 6 (default in most libraries) and level 9 is typically 1-5% file size reduction at 3-5x slower encoding. For batch processing, level 6 is fine. For assets you'll serve millions of times, level 9 is worth the extra encoding time.

Tools like oxipng and zopfli go beyond level 9 by testing more compression strategies at significantly higher computational cost. Zopfli typically produces files 3-8% smaller than DEFLATE level 9, but takes 50-100x longer to encode. Use it for static assets in production builds, not for real-time encoding.

Five Color Types: Choosing the Right One

PNG's five color types exist because different image content has radically different storage requirements. Using the wrong color type can inflate your file by 3-10x.

Grayscale (Type 0)

1, 2, 4, 8, or 16 bits per pixel. No color information. A 1-bit grayscale PNG is essentially a bitmap — black and white only, extremely compact. An 8-bit grayscale stores 256 shades of gray. 16-bit grayscale (65,536 shades) is used in scientific imaging and medical scans.

Use case: black-and-white logos, line art, document scans, X-rays. A grayscale PNG is 1/3 the size of an RGB PNG because it stores one channel instead of three.

Truecolor RGB (Type 2)

8 or 16 bits per channel, producing 24-bit (16.7 million colors) or 48-bit (281 trillion colors) images. This is the most common PNG color type for photographs and complex graphics without transparency.

24-bit RGB is appropriate for most content. 48-bit RGB is for professional workflows — capturing maximum tonal range from RAW photos for editing. The file size doubles from 24-bit to 48-bit with no visible benefit on standard 8-bit displays.

Indexed / Palette (Type 3)

1, 2, 4, or 8 bits per pixel, referencing a palette of up to 256 colors. This is PNG's secret weapon for file size optimization.

If your image has 16 or fewer colors (common for icons, simple graphics, flat-design illustrations), a 4-bit indexed PNG stores each pixel in half a byte. A 200x200 icon with 10 colors might be 3KB as indexed PNG versus 40KB as 24-bit RGB PNG. That's a 13x difference for the same visual output.

The tool pngquant converts 24-bit PNGs to indexed PNGs with smart dithering. It reduces file sizes by 50-80% with minimal visible quality loss for most web graphics. If your PNG is a UI element, diagram, or illustration (not a photograph), run it through pngquant first.

Grayscale + Alpha (Type 4)

8 or 16 bits per channel (grayscale + alpha). Useful for masks, shadows, and monochrome UI elements with transparency. Less common than RGBA but produces smaller files when color information isn't needed.

Truecolor RGBA (Type 6)

8 or 16 bits per channel (red + green + blue + alpha). The most flexible and most common PNG type for web graphics with transparency. Product photos on transparent backgrounds, icons with drop shadows, UI components with glass effects — all use RGBA.

The alpha channel adds 33% to the file size compared to RGB (4 channels vs 3). If your image has no transparent pixels, ensure your tool exports as RGB (type 2) rather than RGBA (type 6) — some design tools export RGBA by default even when the alpha channel is entirely opaque.

Adam7 Interlacing

PNG supports Adam7 interlacing, which stores the image in 7 passes of increasing resolution. Pass 1 contains 1/64 of the pixels (every 8th pixel in every 8th row), and each subsequent pass fills in more pixels until pass 7 completes the image.

The benefit: a low-resolution preview appears immediately while the image loads. On slow connections, users see a blurry approximation that progressively sharpens. This is similar in concept to progressive JPEG.

The cost: interlaced PNGs are typically 5-15% larger than non-interlaced PNGs because the prediction filters are less efficient on sparse pixel grids. Each pass is independently filtered and compressed, reducing the opportunity for long matching sequences in DEFLATE.

The recommendation: don't use interlacing. On modern connections, PNG files load fast enough that the progressive reveal isn't meaningful. The 5-15% file size increase isn't worth it. The one exception: very large PNGs (5MB+) served to users on uncertain connections where perceived loading speed matters.

PNG Chunk Architecture

PNG files are composed of typed chunks, each with a 4-letter name, length, data, and CRC checksum. This architecture makes PNG extensible — new chunk types can be added without breaking older decoders.

Critical chunks (must be understood by all decoders):

• IHDR — Image header: dimensions, bit depth, color type
• IDAT — Image data: the compressed pixel data (can span multiple chunks)
• IEND — Image end marker
• PLTE — Palette (required for indexed color type)

Useful ancillary chunks:

• tEXt / iTXt — Text metadata (author, description, copyright)
• iCCP — Embedded ICC color profile
• gAMA — Gamma correction value
• pHYs — Physical pixel dimensions (DPI)
• tIME — Last modification timestamp

Stripping ancillary chunks during optimization can save 1-50KB depending on what's embedded. ICC color profiles alone can be 2-4KB. The tEXt chunks from Photoshop sometimes contain multi-kilobyte XML metadata.

APNG: Animated PNG

APNG (Animated PNG) extends PNG with animation support using additional chunk types (acTL, fcTL, fdAT). Each frame is a full-color, full-alpha PNG — no 256-color limitation like GIF. Frames can be smaller than the canvas (encoding only changed regions) and support various blending modes.

Browser support: Chrome (since v59, 2017), Firefox (since v3, 2008 — Mozilla created APNG), Safari (since v8, 2014), Edge (since Chromium switch). Global support exceeds 96%.

APNG vs animated GIF: APNG supports 24-bit color + 8-bit alpha (vs GIF's 256 colors + 1-bit transparency), producing dramatically better-looking animations with smooth transparency. File sizes are typically similar to or slightly larger than equivalent GIFs because PNG compression is less efficient than LZW for small palettes.

APNG vs animated WebP: Animated WebP files are 30-50% smaller than APNG with similar quality. WebP animation uses more efficient codecs. APNG's advantage is that it degrades gracefully — browsers that don't understand APNG chunks display the first frame as a static PNG.

Convert between formats: APNG to GIF, APNG to PNG (static first frame), or APNG to WebP.

PNG Optimization: Shrink Files by 50-80%

Most PNGs are significantly larger than they need to be. Design tools export with maximum flexibility (32-bit RGBA, embedded profiles, metadata), not minimum size. Optimization can be dramatic.

pngquant: Lossy PNG Optimization

pngquant converts 24/32-bit PNGs to 8-bit indexed PNGs with smart dithering. Despite being technically "lossy" (reducing color count), the visual difference is imperceptible for most web graphics. Typical results:

• UI screenshots: 60-70% reduction
• Flat-design illustrations: 70-80% reduction
• Icons and logos: 50-70% reduction
• Photographs: 30-50% reduction (visible dithering in gradients)

pngquant works best on graphics with distinct flat colors and worst on photographs with smooth gradients. For photos, you're better off using WebP or AVIF instead of trying to optimize PNG.

oxipng / optipng: Lossless PNG Optimization

oxipng (Rust rewrite of optipng) performs lossless optimization by testing different DEFLATE parameters, filter strategies, and chunk configurations. It never changes pixel values — the output is pixel-identical to the input but smaller.

Typical lossless reduction: 5-20%. Combined with stripping metadata chunks, the total can reach 25-30%. oxipng is safe to run on any PNG without quality concerns.

The maximum optimization pipeline: pngquant (lossy color reduction) → oxipng (lossless recompression) → strip metadata. This produces the smallest possible PNG for web delivery.

PNG vs Other Formats: When to Switch

PNG's sweet spot: lossless graphics with transparency for contexts requiring maximum compatibility. For web-optimized delivery, convert to WebP. For photos without transparency, convert to JPG.

PNG has earned its position as the web's default lossless image format through three decades of reliability. It's not the smallest (WebP and AVIF compress better), not the most feature-rich (TIFF supports more color spaces), and not the most modern. But it works everywhere, handles every common use case, and has a tool ecosystem that makes optimization straightforward.

The key to using PNG well is choosing the right color type and optimizing aggressively. An unoptimized 32-bit RGBA PNG and an indexed 8-bit PNG of the same image can differ by 10x in file size. Run pngquant and oxipng on everything. When you need even smaller files, convert to WebP or PNG to AVIF. And for photos that were incorrectly saved as PNG, convert to JPG for immediate 70-80% savings.