How Image Compression Actually Works — A Visual Explanation

JPEG Compression: The Simplified Version

Step 1: Color Space Conversion

The image is converted from RGB to YCbCr (luminance + chrominance). Humans are more sensitive to brightness changes than color changes, so color channels can be compressed more aggressively.

Step 2: Block Division

The image is divided into 8x8 pixel blocks. Each block is processed independently.

Step 3: Frequency Transform (DCT)

Each block is converted from spatial data (pixel colors) to frequency data (patterns). Smooth areas become simple patterns (low frequency). Detailed areas become complex patterns (high frequency).

Step 4: Quantization (Where Quality Loss Happens)

High-frequency data (fine details) is reduced or removed. This is the "lossy" part. Lower quality settings remove more detail.

Step 5: Encoding

The quantized data is compressed further using lossless encoding (Huffman coding).

PNG Compression: Lossless

PNG uses a completely different approach:

1. Filtering — Each row of pixels is compared to adjacent rows. Differences are stored (often smaller numbers).
2. DEFLATE compression — The filtered data is compressed using the same algorithm as ZIP files.
3. No data is lost — The original pixels can be perfectly reconstructed.

Why JPEG Is Smaller Than PNG for Photos

Photos have lots of subtle color variations (high-frequency data). JPEG's quantization step removes these variations, which are barely visible. PNG must preserve every subtle variation, requiring more data.

Why PNG Is Better for Graphics

Graphics have large areas of identical color and sharp edges. PNG excels here because:

• Identical pixels compress extremely well with filtering
• Sharp edges are preserved perfectly (JPEG adds artifacts around edges)