PNG Format: Lossless Compression & Transparency Guide

Origin and design intent

PNG (Portable Network Graphics) was created in 1996 as a direct response to a patent dispute over GIF. CompuServe's GIF format used LZW compression, patented by Unisys, and in late 1994 Unisys announced it would begin enforcing royalty claims against GIF encoders. The web community responded within months: a working group formed in early 1995, the PNG 1.0 specification was published in October 1996, and PNG became a W3C Recommendation the same year.

The design priorities were specific and shaped every technical decision:

Royalty-free — DEFLATE compression instead of LZW.
Lossless — every decoded pixel matches the source exactly.
Better than GIF — full 24-bit colour and 8-bit alpha vs GIF's 256-colour palette and 1-bit transparency.
Web-friendly — small enough for typical web use, robust against partial-file corruption.

PNG succeeded comprehensively on all four counts and became the universal format for web logos, icons, screenshots, and any content requiring lossless fidelity.

Container structure

A PNG file is a sequence of typed chunks following an 8-byte signature. Each chunk has a 4-byte length, a 4-byte type code, the chunk data, and a 4-byte CRC.

Required chunks in every PNG:

IHDR — image header. Width, height, bit depth, colour type, compression method, filter method, interlace method.
IDAT — image data. Contains the actual compressed pixel data. May span multiple chunks.
IEND — end-of-file marker.

Optional chunks add capability:

PLTE — colour palette for indexed-colour images.
tRNS — transparency information for non-alpha colour types.
gAMA, cHRM, iCCP, sRGB — colour profile and gamut information.
tEXt, iTXt, zTXt — textual metadata (creation date, author, software).
pHYs — physical pixel dimensions.

The chunk-based design means decoders can skip unknown chunk types, which made PNG extensible without breaking backwards compatibility — and several extensions (APNG, for example) added new chunk types over the years.

Compression: DEFLATE plus filtering

PNG compression has two stages.

Filtering

Before compression, each row is "filtered" to make it more compressible. PNG defines five filter types:

None — pass the row through unchanged.
Sub — store the difference from the pixel to the left.
Up — store the difference from the pixel directly above.
Average — store the difference from the average of left and above.
Paeth — a predictor that chooses left, above, or above-left based on which is closest to the linear prediction.

The encoder picks the filter type per row (not per pixel) that produces the most compressible output. For images with smooth gradients, Sub and Up filters reduce most rows to near-zero residuals, which DEFLATE then compresses very efficiently.

DEFLATE

The filtered data is compressed with DEFLATE — the same LZ77 + Huffman combination used in ZIP, gzip, and zlib. Modern encoders like zopfli produce 3–8% smaller PNG files than the standard zlib encoder at the cost of much longer encoding time. For one-time encoding of important assets (logos, hero images), zopfli is worth the wait.

Colour types

PNG supports six colour types, each with specific bit-depth options:

Greyscale — 1, 2, 4, 8, or 16 bits per pixel.
RGB — 8 or 16 bits per channel.
Indexed colour (palette) — 1, 2, 4, or 8 bits per pixel, with a PLTE chunk defining up to 256 colours.
Greyscale with alpha — 8 or 16 bits per channel.
RGB with alpha — 8 or 16 bits per channel (most common for web use).

Choosing the right colour type is the most under-used PNG optimisation. A logo with 16 colours encoded as 8-bit indexed is dramatically smaller than the same logo encoded as 24-bit RGB. Most PNG encoders default to RGB; explicitly requesting indexed colour for low-colour content cuts file size 3–4×.

Alpha transparency

PNG's full 8-bit alpha channel was one of its biggest practical wins over GIF. Each pixel carries an independent transparency value from 0 (fully transparent) to 255 (fully opaque), allowing smooth anti-aliased edges, drop shadows, and gradient transparency.

This is the feature that made PNG the format for logos, icons, and product photos cut out from backgrounds. JPEG cannot encode transparency at all; GIF's 1-bit alpha produces jagged edges. PNG was the only viable option for high-quality transparency on the web for two decades.

WebP and AVIF have since matched PNG's alpha capability with better compression. For modern web delivery, PNG-with-transparency content is usually better served as WebP. See WebP vs PNG and PNG to WebP.

Interlacing

PNG supports Adam7 interlacing, which encodes the image as seven progressively-detailed passes. This was useful in the dial-up era for showing a low-resolution preview while the full image loaded. On modern connections it's almost always wasted overhead — interlaced PNGs are roughly 10–20% larger than the same image without interlacing.

Modern encoding pipelines almost always disable interlacing.

APNG (Animated PNG)

APNG is a backwards-compatible PNG extension that adds animation through two new chunks (acTL and fcTL). Browsers that don't recognise the chunks display the first frame as a static PNG; browsers that do recognise them play the animation.

APNG has been widely supported since 2019 (Firefox, Chrome, Safari, Edge) but has not displaced animated GIF for cultural reasons (meme distribution prefers GIF) and has been largely overtaken by animated WebP and animated AVIF for performance use cases. APNG remains relevant for niche cases where bit-perfect lossless animation is required. For converting animated content into modern animated WebP, see GIF to WebP.

Modern relevance

PNG remains the default lossless raster format for:

Logos, brand assets, and icons distributed as files (downloadable resources, brand kits).
Documents and screenshots embedded in PDFs, presentations, or Word documents.
OS clipboard content and screenshots taken by system tools.
Email attachments, where format support is patchy and JPEG/PNG are the safe defaults.
Open Graph and social-preview images, where some platforms still don't reliably handle WebP.

For browser-delivered web content, PNG has been largely superseded by lossless WebP (25% smaller files for the same fidelity) and AVIF. The migration is gradual: many sites still ship PNG as the primary format, often through CDN-level automatic conversion that serves WebP or AVIF to capable browsers from the same URL.

When to encode as PNG today

Choose PNG when:

The image will be distributed outside the browser (downloads, email, documents, OS clipboard).
You need universal compatibility with tools that may not support WebP or AVIF.
The image is part of a workflow that explicitly requires PNG (Apple App Store icon submission, some marketplaces).
The image is small (icon-sized) and the WebP container overhead approaches the payload.

Choose lossless WebP when:

The image is for browser display only.
You control both the source files and the delivery pipeline.

For the systematic mode-choice framework, see Lossy vs Lossless Compression. For migrating an existing PNG library to WebP, see PNG to WebP.

Optimisation toolchain

For PNG files that will remain PNG:

pngquant — lossy quantisation to indexed colour. Reduces a 24-bit RGB image to a paletted version with negligible visual quality loss. Typical savings: 50–80%.
oxipng — Rust-based lossless PNG optimiser. Modern replacement for the older optipng. Faster, often produces smaller output.
zopflipng — uses the Zopfli encoder for maximum DEFLATE compression. Slow but produces 3–8% smaller files than oxipng.
pngcrush — older optimiser, still useful. Tries multiple filter combinations to find the smallest.

A pipeline combining pngquant (lossy quantisation where acceptable) followed by oxipng or zopflipng (lossless squeezing of what's left) produces the smallest PNG output achievable.

# Lossy quantisation pass
pngquant --quality 70-90 --output out.png input.png

# Lossless optimisation pass
oxipng -o max out.png

Implementation patterns

For modern web use with WebP fallback to PNG:

<picture>
  <source type="image/webp" srcset="/img/logo.webp" />
  <img src="/img/logo.png" alt="..." width="240" height="80" />
</picture>

The browser uses WebP when supported and falls back to PNG otherwise. For details on the fallback strategy, see WebP Browser Support.

For CSS background images:

.logo {
  background-image:
    image-set(
      url("/img/logo.webp") type("image/webp"),
      url("/img/logo.png") type("image/png")
    );
}

Converters

PNG to WebP — convert existing PNG library to WebP
WebP to PNG — convert WebP back to PNG for non-browser distribution