How Image Compression Works (Without Losing Quality)

What Does Compression Actually Do?

Image compression reduces the number of bytes needed to store or transmit an image. Every digital image is fundamentally a grid of pixels, where each pixel has a color value. An uncompressed 1920x1080 photograph contains over 6 million pixels, each with red, green, and blue values — that adds up to roughly 6 megabytes of raw data. Compression algorithms find patterns and redundancies in this data to represent the same image (or a close approximation of it) in fewer bytes.

Lossless vs. Lossy: The Fundamental Split

There are two categories of image compression, and understanding the difference is essential.

Lossless compression reduces file size without removing any information. When you decompress a losslessly compressed image, you get back the exact same pixels that went in. PNG and GIF use lossless compression. Think of it like a ZIP file for images — the data is reorganized more efficiently, but nothing is thrown away.

Lossy compression reduces file size by permanently removing information that is deemed less important. JPEG is the classic lossy format. The "lost" data is gone forever — you cannot recover it by re-saving. This sounds alarming, but the algorithms are designed to remove the kinds of detail that human eyes are least sensitive to. At reasonable quality settings, the visual difference is imperceptible.

How JPEG Compression Works

JPEG compression is a multi-step process that is surprisingly clever. First, the image is converted from RGB color to YCbCr, which separates brightness (luminance) from color (chrominance). Human eyes are much more sensitive to brightness differences than color differences, so the color channels can be downsampled — reduced in resolution — without visible impact.

Next, the image is divided into 8x8 pixel blocks. Each block undergoes a Discrete Cosine Transform (DCT), which converts the spatial pixel data into frequency components. High-frequency components represent fine detail, while low-frequency components represent broad areas of color.

The quality setting controls quantization — the step where frequency components are rounded to fewer distinct values. At high quality, the rounding is gentle and most detail is preserved. At low quality, the rounding is aggressive and fine details are lost, which can produce the blocky artifacts that JPEG compression is known for.

MozJPEG: Better JPEG Compression

MozJPEG is an improved JPEG encoder created by Mozilla. It produces files that are 100% compatible with every JPEG decoder — any device or browser that can display a standard JPEG can display a MozJPEG-encoded JPEG. The difference is that MozJPEG is smarter about how it encodes.

MozJPEG uses optimized Huffman coding, trellis quantization, and better progressive scan orders to produce JPEG files that are typically 5-15% smaller than those produced by standard encoders at the same quality level. The visual quality is identical or better — the compression is purely more efficient.

WebP Compression

WebP uses a fundamentally different approach. For lossy compression, it uses prediction-based coding (related to the VP8 video codec) where each block is predicted from already-decoded neighbors, and only the prediction error is stored. For lossless compression, WebP uses a technique involving transforms, color caching, and LZ77 backreferences.

The result is consistently smaller files than JPEG at equivalent visual quality, at the cost of slightly more CPU time for encoding and decoding.

Practical Tips for Compression

The single most impactful thing you can do is match the format to the content. Photographs should use lossy compression (JPEG or lossy WebP). Graphics with flat colors and sharp edges should use lossless compression (PNG or lossless WebP).

Quality settings of 75-85% for lossy compression give the best balance of file size and visual quality for most photographs. Below 70%, artifacts start becoming noticeable on close inspection. Above 90%, you are paying a large file size premium for improvements that are invisible to most viewers.