Portable Network Graphics

DEFLATE compression pipeline

PNG's compression works in two stages. First, LZ77 finds repeated byte sequences within a sliding window (32 KB by default) and replaces duplicates with back-references (distance, length pairs). Then Huffman coding assigns shorter bit patterns to frequently occurring symbols. The combination is lossless and deterministic — the same input always produces the same output given identical encoder settings.

Before DEFLATE runs, PNG applies a per-row filter that transforms raw pixel values into differences more amenable to compression. This preprocessing step is critical to PNG's effectiveness.

Filter rows

Each scanline begins with a filter-type byte (0–4) declaring which transform was applied:

Encoders choose a filter per row independently. Optimal selection runs all five filters on each row and picks the one that minimizes entropy. This brute-force approach (used by optipng level 5 and above) can shrink files 5–15% compared to a fixed filter strategy, at the cost of slower encoding.

Chunk-based file structure

PNG files are built from typed chunks, each with a 4-byte name, length, data, and CRC32 checksum. Critical chunks that every decoder must understand:

• IHDR — image header (first chunk): width, height, bit depth, color type, compression method, interlace flag
• IDAT — one or more chunks containing the compressed pixel data
• IEND — empty terminator marking end of file

Ancillary chunks carry optional data:

• tEXt / iTXt — key-value text metadata (title, author, description, copyright)
• gAMA — gamma value for cross-platform color consistency
• tRNS — simple transparency for indexed and grayscale images without a full alpha channel
• pHYs — physical pixel dimensions (DPI)
• iCCP — embedded ICC color profile
• acTL / fcTL / fdAT — APNG animation control and frame data

The chunk system is extensible by design. Unknown ancillary chunks are silently ignored by decoders, so custom metadata can be embedded without breaking compatibility.

Color types and bit depths

PNG supports five color types, each with specific bit depth options:

Indexed-color PNG stores a palette of up to 256 colors in a PLTE chunk. For images with few unique colors, this slashes file size dramatically — a 256-color icon at 64x64 might weigh 2 KB as indexed PNG versus 12 KB as truecolor.

Alpha channel transparency

PNG's alpha channel stores per-pixel opacity at 8-bit (256 levels) or 16-bit (65,536 levels) precision. This is fundamentally different from GIF's binary transparency, where each pixel is either fully opaque or fully transparent. Semi-transparent drop shadows, glass effects, anti-aliased edges against arbitrary backgrounds — these require the smooth gradation only a full alpha channel provides.

For truecolor PNG, alpha adds one byte per pixel at 8-bit depth. A 1920x1080 RGBA image contains 8.3 million bytes of raw pixel data before compression, versus 6.2 million for RGB. The overhead is roughly 33% in raw terms, though DEFLATE compresses the alpha channel efficiently when it contains large uniform regions.

File size characteristics

A 1920x1080 PNG screenshot averages 1.2–2.8 MB; the same image saved as JPEG at quality 85 drops to 180–400 KB. The gap grows with photographic complexity. Screenshots of text and UI elements compress well in PNG because of large uniform color regions. Photographs compress poorly because every pixel differs from its neighbors, defeating both the row filters and LZ77's duplicate-finding.

This size difference is PNG's primary practical limitation. For photographic web content, JPEG or WebP lossy at quality 80–85 produces visually identical results at 5–15x smaller file sizes.

Adam7 interlacing

PNG optionally supports Adam7 interlacing, which rearranges pixels into seven sub-images of increasing resolution. The browser can render a blurry preview after receiving roughly 1/64th of the pixel data, progressively sharpening as more data arrives.

The tradeoff is significant. Interlaced PNGs are typically 10–15% larger than non-interlaced equivalents because each sub-image compresses independently with less context for DEFLATE to exploit. On modern connections where full images load in milliseconds, the progressive rendering benefit rarely justifies the size penalty. Non-interlaced is the default for good reason.

Gamma correction pitfalls

The gAMA chunk declares the gamma value used when the image was created. Decoders are supposed to apply gamma correction to ensure consistent appearance across displays. In practice, this causes more problems than it solves.

macOS historically used gamma 1.8; Windows used 2.2. A PNG created on macOS with an embedded gAMA of 1.8 appears washed-out on Windows if the decoder honors the chunk, and correct if it ignores it. Firefox, Chrome, and Safari all handle gAMA differently depending on whether an ICC profile is also present. Many web developers strip gAMA and sRGB chunks entirely (using pngcrush -rem gAMA -rem sRGB) to avoid cross-platform color shifts.

Optimization tools

PNG encoders vary wildly in output size. The chain for maximum compression:

1. pngquant — lossy step: reduces truecolor to indexed 256-color using median-cut quantization with Floyd-Steinberg dithering. Produces 60–80% smaller files. Visually indistinguishable for UI screenshots and most web graphics.
2. optipng — lossless: tries multiple DEFLATE strategies and filter combinations, picks the smallest result.
3. zopfli — lossless: Google's DEFLATE implementation that spends 80–100x more CPU time finding optimal matches. Produces files 3–8% smaller than standard DEFLATE. Decode speed is identical since the format is unchanged.

For automated pipelines, pngquant alone handles 90% of the optimization opportunity. Adding optipng or zopfli yields diminishing returns.

APNG animation

APNG extends PNG with animation capabilities through three additional chunk types: acTL (animation control), fcTL (frame control), and fdAT (frame data). Each frame is a full PNG image compressed independently, with optional dispose and blend operations for inter-frame efficiency.

APNG is supported in all modern browsers since Firefox 3 (2008) and Chrome 59 (2017). It supports full alpha transparency per frame — something GIF cannot do. File sizes run larger than equivalent WebP animations but smaller than frame-extracted GIF sequences at comparable quality.

When to use PNG

Use PNG for screenshots, line art, text renders, UI sprites, icons, diagrams, anything requiring transparency, and any image where lossy artifacts are unacceptable.

Use JPEG instead for photographs and complex textures where lossy compression is acceptable. JPEG at quality 85 produces files 5–15x smaller with imperceptible quality loss on photographic content.

Use WebP instead when browser support permits (95%+ global coverage as of 2025). WebP lossy beats JPEG by ~25% at equivalent quality; WebP lossless beats PNG by 20–30% on typical web graphics.

Use SVG instead for geometric illustrations, logos, and icons that must scale to arbitrary resolution. SVG files are resolution-independent and typically smaller than equivalent PNG renders at high DPI.