Ever wondered how JPEG compression actually works? This guide explains the Discrete Cosine Transform and quantization process in plain language, revealing exactly how and why your images lose quality when saved as JPG.

The Algorithm That Powers 80% of Web Images

JPEG compression is arguably the most impactful algorithm in the history of digital media. Since its standardization in 1992, it has processed trillions of images and remains the most widely used image format on the internet. Yet most people — including many developers and designers — have only a vague understanding of how it actually works.

At its core, JPEG compression relies on a beautiful piece of mathematics called the Discrete Cosine Transform (DCT), combined with a process called quantization that cleverly exploits the limitations of human vision. This article explains both concepts in plain language, without requiring advanced math knowledge.

The Big Picture: What JPEG Compression Does

JPEG compression works in four main stages, each building on the previous one:

Stage 1: Convert the image from RGB color to YCbCr color space (separate brightness from color).

Stage 2: Divide the image into small 8×8 pixel blocks.

Stage 3: Apply the Discrete Cosine Transform to each block (convert spatial data to frequency data).

Stage 4: Quantize the frequency coefficients (this is where data loss occurs).

The genius of JPEG lies in Stage 3 and Stage 4 working together. The DCT separates the image into components that range from “very important to human vision” to “barely noticeable,” and quantization then discards the barely noticeable components.

Stage 1: Why Separate Brightness from Color?

Before any compression begins, JPEG converts your image from RGB (Red, Green, Blue) to YCbCr, where Y represents luminance (brightness), Cb represents blue-yellow chrominance, and Cr represents red-green chrominance.

Why? Because the human visual system has roughly four times more sensitivity to brightness changes than to color changes. Our retinas contain about 120 million rod cells (which detect brightness) but only about 6 million cone cells (which detect color). By separating brightness from color, JPEG can compress the color channels more aggressively without the viewer noticing.

In standard JPEG encoding, the color channels are subsampled at 4:2:0 — meaning color information is stored at one-quarter the spatial resolution of brightness information. This single step reduces the data by approximately 50% with minimal visual impact on photographs.

Stage 2: The 8×8 Block Division

The image is then divided into non-overlapping blocks of 8×8 pixels. Each block contains 64 pixel values that will be processed independently. This block-based approach is what causes the characteristic “blockiness” visible in heavily compressed JPEGs — especially along the boundaries between blocks that happen to fall across high-contrast edges.

Why 8×8? This block size was chosen as a practical balance between compression efficiency and computational cost. Larger blocks would compress slightly better but require significantly more processing power. Smaller blocks would compress worse because there would be less data to find patterns in. The 8×8 block size was optimal for the computing hardware available in the early 1990s, and has remained the standard because changing it would break compatibility with billions of existing files.

Stage 3: The Discrete Cosine Transform — The Heart of JPEG

This is where the real magic happens. The DCT converts each 8×8 block of pixel values into a set of 64 frequency coefficients. Instead of describing the image as “pixel 1 has brightness 180, pixel 2 has brightness 175, pixel 3 has brightness 182…” it describes the same information as a combination of cosine waves at different frequencies.

Think of it like music. A complex sound wave can be broken down into a combination of simple sine waves at different frequencies — that is what a graphic equalizer shows you. The DCT does the same thing for image blocks, but in two dimensions (horizontal and vertical) instead of one.

After the DCT, the 64 coefficients are arranged in a specific order:

The top-left coefficient (DC coefficient) represents the average brightness of the entire 8×8 block. This single number captures the most important characteristic of the block.

Moving right and down, the coefficients represent increasingly higher spatial frequencies — finer and finer details within the block. The bottom-right coefficients represent the highest frequency information: the sharpest pixel-to-pixel transitions, the finest textures, the subtlest variations.

Critically, for most natural photographs, the high-frequency coefficients tend to be very small. Most of the image’s “energy” — the visually important information — is concentrated in the low-frequency coefficients in the top-left region. This is a natural property of real-world images, and it is exactly what JPEG exploits.

Stage 4: Quantization — Where Data Dies

Quantization is the only lossy step in the entire JPEG pipeline, and it is beautifully simple in concept. Each of the 64 DCT coefficients is divided by a corresponding value from a quantization matrix, and the result is rounded to the nearest integer.

The quantization matrix contains small divisors for low-frequency coefficients (preserving them with high precision) and large divisors for high-frequency coefficients (reducing them to zero or small integers). When you adjust the “quality” slider in your image editor, you are scaling this quantization matrix: lower quality means larger divisors, which means more coefficients get rounded to zero, which means more detail is permanently destroyed.

Consider a simplified example: if a high-frequency DCT coefficient has value 12 and the corresponding quantization divisor is 25, then 12 ÷ 25 = 0.48, which rounds to 0. That coefficient is now zero — the detail it represented is gone forever. During decompression, multiplication by 25 yields 0 × 25 = 0, not the original 12.

At high quality settings (90–100), most coefficients survive quantization with only small rounding errors. At low quality settings (10–30), the vast majority of high-frequency coefficients are quantized to zero, and even some mid-frequency coefficients are significantly reduced. The result: visible blocking artifacts, loss of fine texture, ringing around edges, and posterization of smooth gradients.

Why This Approach Works So Well

The brilliance of the DCT quantization approach lies in its alignment with human perception. By transforming spatial pixel data into frequency data, JPEG can make intelligent decisions about what to keep and what to discard based on how the human visual system actually processes images.

Our eyes are essentially low-pass filters — we perceive low-frequency brightness gradients with high sensitivity but are much less attuned to high-frequency brightness fluctuations, especially in areas with existing texture or complexity. The DCT naturally separates these components, and quantization discards precisely the information we are least likely to miss.

This is why JPEG at quality 85 looks “nearly identical” to the uncompressed original for most photographs. The discarded data was real information in the mathematical sense, but it was invisible information in the perceptual sense.

Understanding Common JPEG Artifacts

Now that you understand the mechanism, common JPEG artifacts make perfect sense:

Blocking artifacts: Each 8×8 block is processed independently. When aggressive quantization produces slightly different average colors for adjacent blocks, the block boundaries become visible as a grid pattern.

Ringing artifacts: When the DCT coefficients around a sharp edge are quantized, the mathematical reconstruction of that edge from the surviving coefficients produces overshoot — a ghost echo of the edge on both sides, similar to the Gibbs phenomenon in signal processing.

Mosquito noise: Flickering, shimmering patterns around high-contrast edges, particularly visible in video encoded with JPEG-based codecs (like MPEG). This is caused by slightly different quantization results in successive frames.

Color bleeding: Because color channels are subsampled to lower resolution, sharp color boundaries (like red text on a white background) become blurred. The color information literally does not have enough spatial resolution to represent the sharp edge accurately.

Practical Implications

Understanding DCT quantization has practical implications for anyone who works with images:

Always choose the highest quality setting that meets your file size requirements. The difference between quality 85 and 95 is often substantial in file size but minimal visually. Below quality 70, artifacts become noticeable to most viewers.

Never use JPG for images with sharp text, line art, or large areas of exactly uniform color. The DCT is designed for continuous-tone photographs, and these hard-edged elements produce large high-frequency coefficients that quantization handles poorly.

Use our browser-based image compression tools to find the optimal quality setting for each image. Every image has a different optimal quality point — a one-size-fits-all setting leaves quality or file size on the table.