How Image Compression Works: Algorithms Explained

A raw 1920×1080 RGB photo is 6.2 MB. The JPEG you actually use is 300 KB. That 20:1 ratio isn't magic — it's the result of sequential steps that exploit how human vision works. Understanding those steps changes how you make compression decisions.

Why Images Need Compression

Raw pixel data is brutal. Each pixel needs three bytes (one each for red, green, blue). A 1920×1080 image has 2,073,600 pixels × 3 bytes = 6,220,800 bytes — over 6 MB for a single photo.

Multiply that by the hundreds of images on a typical website, and you've got a bandwidth problem. The solution: represent the same visual information with far fewer bytes by throwing out what the human eye won't notice anyway.

The Two Families: Lossy and Lossless

Every compression algorithm belongs to one of two families:

Lossy compression permanently discards information. You get smaller files, but you can never recover the original exactly. JPEG, WebP (default), and AVIF are lossy formats. The data loss is engineered to target what human vision is least sensitive to.

Lossless compression reorganizes data so it encodes more efficiently — no information is discarded. PNG, WebP lossless, and GIF use lossless compression. The original can always be reconstructed perfectly from the compressed file.

For a deeper dive into when to use each, read Lossy vs Lossless Compression.

How Lossy Compression Works

JPEG: The Classic Pipeline

JPEG compression runs four steps in sequence. Each one removes data the eye won't miss.

1. Color space conversion. The image converts from RGB to YCbCr — one luma channel (Y, brightness) and two chroma channels (Cb, Cr, color). This matters because humans are far more sensitive to brightness changes than color changes.

2. Chroma subsampling. The color channels are downsampled — covered in detail below. This step alone accounts for a significant chunk of JPEG's compression before any transform runs.

3. Block splitting and DCT. The image divides into 8×8 pixel blocks. Each block goes through a Discrete Cosine Transform (DCT), which converts the 64 pixel values into 64 frequency coefficients. Low-frequency coefficients represent broad color regions; high-frequency coefficients represent sharp edges and fine detail.

Think of it like this: a blurry gradient needs one coefficient to describe; a sharp checkerboard pattern needs many. DCT doesn't compress anything yet — it just rotates the data into a form where compression becomes easy.

4. Quantization. This is where the lossy part happens. Each frequency coefficient gets divided by a number from a quantization table and rounded to the nearest integer. High-frequency coefficients get divided by larger numbers, which rounds many of them to zero. Zeros compress extremely well. The quality setting controls the quantization table — lower quality = larger divisors = more zeros = more compression = more artifacts.

5. Entropy coding. The quantized coefficients (lots of zeros now) run through Huffman coding, which assigns shorter bit sequences to common values. This is lossless — it's just efficient encoding of the quantized data.

WebP: VP8 Under the Hood

WebP lossy uses VP8, a video codec applied to still images. VP8 uses a similar DCT-based approach to JPEG but with several improvements: it works on 16×16 macroblocks instead of 8×8, uses adaptive quantization (different quality for different image regions), and applies more sophisticated entropy coding via arithmetic coding instead of Huffman. The result is typically 25–34% smaller than JPEG at equivalent quality.

AVIF: AV1 for Images

AVIF uses the AV1 video codec's still-image profile. AV1 replaces fixed 8×8 blocks with variable-size coding units up to 128×128 pixels. This is a major advantage for large uniform areas — a clear sky doesn't need to get split into hundreds of tiny blocks. AVIF also supports wider color gamuts and HDR natively. Files run 50% smaller than JPEG at comparable quality, though encoding is significantly slower.

For a direct comparison, see WebP vs AVIF.

How Lossless Compression Works

PNG: DEFLATE in Two Passes

PNG's compression runs two stages: filtering, then DEFLATE.

Filtering transforms each row of pixels to make it more compressible. The most common filter — the Paeth predictor — replaces each pixel value with its difference from a prediction based on neighboring pixels. Differences cluster near zero; zeros compress well.

DEFLATE then runs LZ77 followed by Huffman coding. LZ77 finds repeated sequences and replaces them with back-references ("same 12 bytes as 847 bytes ago"). Huffman coding then encodes the result using variable-length codes — common values get short codes, rare values get long codes.

The result: no data is lost, but typical PNG files are 60–80% smaller than raw pixel data.

WebP Lossless: VP8L

WebP's lossless mode uses VP8L, which adds a spatial prediction step before entropy coding. It also uses a palette transform for images with limited colors and a color transform that decorrelates color channels. For web graphics and images with large uniform regions, WebP lossless typically beats PNG by 25–34%.

Image Compression Algorithms Compared

Lossy compression wins on ratios because it can discard information. Lossless compression is bounded by the actual information content of the image.

The Quality-Size Tradeoff

Quality settings don't map linearly to file size. In JPEG:

• Quality 100: Quantization divisors are 1 (no rounding). Near-lossless, ~3–4× smaller than raw. No visible difference from original.
• Quality 85: Good artifacts-to-size balance for most photos. ~8–12× smaller than raw. The standard web recommendation.
• Quality 75: Visible artifacts on close inspection. ~15–20× smaller. Acceptable for thumbnails.
• Quality 50: Visible blocking and ringing artifacts. ~25–30× smaller. Appropriate only for previews.
• Quality 20: Heavy artifacts. Files are tiny but quality is noticeably poor.

The sweet spot for most web photos is quality 75–85. Below 60, artifacts start accumulating in areas of fine detail. Above 90, file size increases sharply with diminishing quality returns.

Pixotter's compression tool lets you preview quality levels side-by-side before committing to a setting — useful when you're targeting a specific file size budget.

For PNG specifically, the compression level (1–9) controls only the LZ77 search depth, not quality. Higher compression levels find more redundancy but take longer. Level 6 is the standard tradeoff; level 9 gives marginal size improvements for substantially longer encode times.

Chroma Subsampling: The Hidden Compression Step

This is the step most compression explanations skip, and it accounts for 30–50% of JPEG's size reduction before quantization even runs.

Human eyes have more photoreceptors for brightness than color. Chroma subsampling exploits this by storing color information at lower resolution than brightness information. The notation describes the sampling pattern:

• 4:4:4 — Full color resolution. One color sample per pixel. Used in professional video; rarely in web images.
• 4:2:2 — Color sampled horizontally at half resolution. Two color samples for every four pixels in a row. About 33% smaller than 4:4:4.
• 4:2:0 — Color sampled at half resolution both horizontally and vertically. One color sample per 2×2 pixel block. About 50% smaller than 4:4:4. This is the default for most JPEG encoders.

For most photos, 4:2:0 is visually indistinguishable from 4:4:4. The exception: high-contrast color edges (like red text on white background) can show slight fringing. For those cases, 4:4:4 is worth the file size cost.

What Happens When You Re-Compress

Re-saving a JPEG as a JPEG compounds artifacts — and understanding the quantization step explains exactly why.

Each time you save a JPEG, the encoder runs the quantization step again. Quantization rounds frequency coefficients to integers. The second save rounds the already-rounded values from the first save, causing additional rounding errors to accumulate. After three or four re-saves at the same quality setting, the image looks noticeably worse than the original.

This is generation loss. The rule: keep a lossless master (PNG, TIFF, or the camera RAW file) and generate your JPEG from the master, never from a previous JPEG. See Compress PNG for the workflow when your master is already a PNG.

WebP and AVIF have the same generation loss problem if you re-encode them lossy from a lossy source. The algorithm is different; the math is the same.

Modern tools — including Pixotter, which runs these compression algorithms entirely in-browser via WebAssembly — always encode from the original source file you provide, not from a previously compressed version.

FAQ

What is an image compression algorithm?

An image compression algorithm is a procedure for reducing image file size by encoding pixel data more efficiently. Lossless algorithms reorganize data without discarding information. Lossy algorithms permanently remove information the eye is unlikely to notice, enabling much higher compression ratios.

Which compression algorithm produces the smallest files?

AVIF (using AV1) consistently produces the smallest files for photographic content — typically 40–50% smaller than JPEG at comparable quality. For lossless compression, WebP lossless beats PNG by 25–34%. The tradeoff is encoding speed: AVIF encodes 10–50× slower than JPEG.

Why does JPEG use 8×8 blocks?

The 8×8 block size was chosen in the early 1990s as a balance between compression efficiency and computational cost on hardware of that era. Larger blocks capture more redundancy but cost more to compute. Variable-size blocks (used by AV1/AVIF) are now practical but required decades of hardware improvement to implement at useful speed.

Does image compression affect quality permanently?

For lossy compression — yes. The discarded information is gone. This is why you should always compress from a lossless master, never re-compress an existing JPEG. For lossless compression (PNG, WebP lossless), quality is perfectly preserved — decompress and you get the original pixel values back.

What's the difference between compressing a photo vs. a screenshot?

Photos have continuous tone gradients and natural noise — lossy compression handles these well because the quantization artifacts blend in. Screenshots are synthetic: flat colors, sharp edges, and text. JPEG introduces visible artifacts on those hard edges. Use PNG or WebP lossless for screenshots; use JPEG, WebP lossy, or AVIF for photos.

How does in-browser compression work?

Browsers can run native code via WebAssembly. Image compression libraries (like libwebp, libjxl, and mozjpeg) compile to WebAssembly and run at near-native speed in the browser. Pixotter uses this approach — the compression algorithms run client-side, meaning your images never leave your device. See Best Image Format for Web for guidance on which format to target.

What is entropy coding and why does it matter?

Entropy coding (Huffman coding, arithmetic coding) is the final step in most compression pipelines. It replaces each value with a variable-length bit code — common values get short codes, rare values get long codes. It's lossless and mathematically optimal given the input statistics. DCT + quantization creates a distribution heavily skewed toward zero; entropy coding then efficiently encodes that skewed distribution.

Why do PNG files sometimes get larger after "optimization"?

PNG optimization tools try different filter strategies and compression parameters to find smaller encodings. But a PNG recompressor cannot make a file smaller than the information entropy of its pixel data. If the original PNG was already near-optimal, running an optimizer may produce a file that's the same size or marginally larger due to overhead. For images with lots of color variation (like photos), consider switching to AVIF or WebP lossy instead — the format change will do more than any PNG optimizer.