How the .JPG Format Works *Understanding Image Compression Through Human Perception*

Source: Dev.to

Why JPG Works So Well

The Joint Photographic Experts Group (JPG) format, introduced in 1992, is based on a simple insight:

The human eye is far more sensitive to changes in brightness than to changes in colour.

Modern camera sensors capture far more information than our eyes can perceive. JPG compression exploits this gap to dramatically reduce file size while preserving perceived image quality.

Core Steps of JPG Compression

1. Colour Space Conversion

   • Images are typically stored in RGB (Red, Green, Blue).
   • JPG converts RGB to YCbCr, separating brightness from colour:
     • Y → Luminance (brightness)
     • Cb → Blue chroma
     • Cr → Red chroma

   This separation lets the algorithm compress colour data more aggressively while preserving the brightness that humans notice most.

2. Block Splitting

   • The image is divided into small blocks, usually 8 × 8 pixels.
   • Each block can be compressed independently and at different levels based on local detail.
   • Over‑compression can produce visible block artifacts.

3. Discrete Cosine Transform (DCT)

   • Each block undergoes a cosine‑based transformation that converts pixel values into frequency components.
   • Low frequencies → smooth areas (very important)
   • High frequencies → fine detail (less noticeable)

   This prepares the data for efficient reduction.

4. Quantisation (the lossy stage)

   • Reduces precision, especially for high‑frequency colour data.
   • Discards information the eye is unlikely to notice.
   • Traverses the coefficients in a zig‑zag pattern to prioritise important values.
   • This is the only truly lossy stage of JPG compression, which is why repeatedly saving a JPG degrades quality over time.

5. Entropy Encoding & Reconstruction

   • The compressed data is entropy‑encoded and packed into a .jpg file.
   • On decoding, the data is converted back to RGB.
   • The resulting image looks “the same” to us but contains far less data.

Impact of Block Size & Quantisation

In practice, JPG can discard ≈ 75 % of colour detail while keeping luminance nearly intact—an excellent trade‑off for photographs.

JPG vs. PNG – A Quick Comparison

PNG Variants

Colour Models: Light‑Based vs. Ink‑Based

Because JPG/PNG are screen‑oriented formats, they are not print‑native. Converting to a print‑ready colour space (e.g., CMYK) is necessary for professional output.

Choosing the Right Format

Understanding how JPG works gives you real control over quality, performance, and storage—not just a slider in an export dialog.

Discussion

Have you noticed quality differences between JPG and PNG in your projects? Which format do you reach for—and why?

Read the original article on freeCodeCamp