How do image compression, PNG and JPEG work?

Start with a representation

A small RGB image stores three channel values per pixel. Our starting arrays are explicit 8-bit samples. The painting was prepared to 160 × 127 before this experiment; we do not count its earlier resizing as compression savings.

Say it again, or look back

A literal writes one byte. A backward copy specifies a length and a distance into the receiver’s existing output. AB followed by copy 6 from 2 back produces ABABABAB, because each new byte immediately becomes part of the history.

Turn instructions into bits

DEFLATE assigns bit codes to literals, lengths and distances. Our workshop emits a real, final fixed-Huffman block. Eight literal A/B bytes require 74 meaningful bits in this profile; two literals and the six-byte copy need 38.

Predict before compressing

PNG can store a reversible difference from a nearby corresponding channel. Sub uses the same channel in the previous pixel; Up uses the channel in the previous row. The receiver makes the same prediction and adds the residual back modulo 256.

Count the packaging too

A complete PNG needs a signature, dimensions and format data, compressed image data, checksums and an ending. Our profile adds 70 container bytes around zlib, whose header and checksum add six more. One red pixel therefore uses 82 PNG bytes, despite having only three RGB bytes.

Decode the file you made

The lesson’s decoder parses the PNG’s actual chunks and DEFLATE bits, expands copies and reverses filters. It compares its reconstructed samples with the encoder input. An optional separate browser zlib decoder checks the scanlines independently.

Decide what can be lost

Rounding nearby channel values merges possible inputs. With 16 levels, both 0 and 8 become 0. The subsequent PNG preserves that rounded input exactly; it cannot decide which older value was discarded. Restore uses the original still retained by the editor.

Read a real codec’s evidence

The JPEG station uses actual files generated from the same canonical RGB samples. Its quantization tables are parsed from their marker bytes. Quality changes the encoder’s table scaling; it is not a universal percent of pixels or meaning retained.

The narrow PNG contract

This encoder produces RGB color type 2, eight bits per channel, no alpha, palette, interlace or animation. Chunks are IHDR, sRGB, one IDAT and IEND. Its decoder deliberately accepts this lesson profile, not arbitrary user files.

The bounded match search

At each position, an authored greedy search examines up to 64 recent positions with the same next three bytes, newest first. It takes the longest found match, keeping the nearest on ties. Valid lengths are 3–258 bytes; distances are 1–32,768 and cannot exceed available output.

Why overlapping copies work

For length greater than distance, the decoder repeatedly reads output[current length − distance]. A one-time slice of the initial history would be wrong: later copied bytes may refer to bytes created earlier in this same instruction.

Bits have two ordering rules

Non-Huffman fields and extra bits enter bytes least-significant-bit first. Huffman codes are emitted most-significant-bit first. A single final fixed block begins with three header bits, ends with symbol 256, and pads its final partial byte.

Prediction has no automatic size win

Each channel residual remains a byte, and each row gains one filter tag. The local suggestion score sums signed residual magnitudes. Later matches and bit costs can contradict that score: on this exact museum input, all-Sub makes a 55,896-byte PNG while the heuristic makes 55,999.

Relative losslessness

Decoding exactly reproduces the supplied RGB samples, not necessarily an earlier JPEG file, camera sensor data or all source metadata. A resized, color-converted or rounded input may already differ from an older reference before lossless coding begins.

Quantization and numeric error

For L levels, each channel maps to floor((x × (L − 1) + 127) / 255) × 255 / (L − 1). Here L is 256, 16 or 4. A pixel counts as changed if any channel differs; mean squared error averages squared differences over stored RGB channels. It is not a measure of beauty or scientific acceptability.

What common JPEG changes

The evidence uses a common DCT-based JPEG process with 8 × 8 component blocks, coefficient quantization and entropy coding. Its fixed 4:4:4 setting removes chroma subsampling as a changed variable. The quantization grid indexes spatial-frequency coefficients, not image pixels.

Quality 100 is not the lossless mode

The selected libjpeg-turbo version sets quantization entries to one at Q100. Its actual decoded file still differs from the input because that is not the same as reversing every conversion, transform and rounding operation. T.81 separately defines a predictive lossless JPEG process.

Not every input can shrink

There are eight distinct three-bit strings but only seven strings shorter than three bits, including the empty string. A reversible scheme cannot give every input a unique shorter representation. This limited encoder can expand inputs; it does not switch to stored blocks to bound expansion.

The decoder has already produced AB. Its next instruction is “copy 6 bytes from 2 bytes back.” What appears?

• ABABABAB.
• Only ABAB, because just two bytes were available at the start.
• Six random bytes.

A PNG Sub predictor stores 9 after the corresponding previous channel was 250. What is reconstructed?

• 255, because values are clamped.
• 3, because (250+9) mod 256 = 3.
• 9, because prediction deleted the original.

A file shrank, and its decoder returns every encoder-input byte exactly. Which statement follows?

• This compression is lossless relative to those input bytes.
• It must preserve the original camera file, including all metadata.
• It must be encrypted.

You round the colors, then save with the lesson's PNG encoder. Why can the saved picture differ from the unrounded original?

• PNG has secretly switched to JPEG.
• The rounding changed the input before lossless encoding.
• A smaller file must always contain damaged pixels.

Why does the one-pixel example contain 82 PNG bytes even though its RGB data is only 3 bytes?

• The decoder needs 79 hidden original pictures.
• The computer cannot store a single red pixel.
• Filters, coding, wrappers, chunks, and checksums add overhead.

The “Suggest filters” heuristic found smaller residual scores, but its final PNG is larger. Is that necessarily a bug?

• No. A local score does not guarantee the best later match and bit costs.
• Yes; PNG requires automatic filters to be optimal.
• Yes; smaller numeric values always occupy fewer than eight bits before compression.

The reference JPEG's quality is 100. Can you assume the decoded RGB array is identical to its input?

• Yes; 100 means 100 percent of original pixels are retained.
• No. The actual reference file has small nonzero differences.
• No JPEG-related format can ever support lossless coding.

You have only a rounded image, and several original values could have produced one of its pixels. What can an “enhance” tool establish?

• The exact original must be inside the compressed bytes somewhere.
• A convincing guess must be the historical original.
• It may create a plausible reconstruction, but cannot uniquely identify the discarded value from this output alone.

PNG filtering and file structure

Normative RGB sample layout, filters, chunks, CRC and zlib use. The workshop uses a specified subset, not all PNG features or a prescribed optimal encoder.

Actual literal/length/distance codes

Sections 3.1 and 3.2 define bit order, overlapping copies, fixed codes and length/distance limits. Search heuristics are separately authored.

The zlib wrapper and checksum

Header and Adler-32 surround raw DEFLATE. The selected 78 01 header is not a promise of another library’s exact compression-level behavior.

JPEG processes and coefficient tables

Common DCT-based processes and the separately defined predictive lossless process. Published standard figures are not reused as licensed artwork.

Exact quality-to-table implementation

The pinned encoder’s quality scaling. Reference files use Pillow 12.1.1, libjpeg-turbo 3.1.3, 4:4:4, optimize false and progressive false.

Independent browser decompression

DecompressionStream with deflate means zlib-wrapped DEFLATE. This is an independent available browser operation, not a promise of our encoder’s choices.

Actual public-domain source image

Vincent van Gogh, Wheat Field with Cypresses, 1889, accession 1993.132. Purchase, The Annenberg Foundation Gift, 1993. Public-domain image, CC0 Open Access; exact preparation and hashes are preserved.

Museum image reuse

CC0 policy for public-domain collection images. Artist, museum and preparation credits are retained; no endorsement is implied.