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

How the .JPG Format Works 🖼️

Understanding Image Compression Through Human Perception

---

Summary

Image compression is a fascinating process that cleverly takes advantage of the limits of human perception to optimize digital storage. By understanding how image formats like JPG and PNG work, we can make better technical decisions—whether we’re working in photography, web development, UI/UX design, or any digital context where images matter.

This article breaks down how JPG compression works internally, why it’s so effective, and how it compares to PNG—without hand-waving or buzzwords.

---

How Does JPG Compression Work and Why Is It So Effective?

The JPG (Joint Photography Experts Group) format revolutionized digital photography when it was introduced in 1992. Its success is based on a simple but powerful insight:

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

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.

Let’s walk through the core steps.

---

Step 1: RGB → YCbCr Conversion

Images are typically stored in RGB (Red, Green, Blue). JPG converts this into YCbCr, separating brightness from color:

• Y → Luminance (brightness)
• Cb → Blue chroma
• Cr → Red chroma

This separation allows the algorithm to compress color data more aggressively while preserving brightness—which humans notice most.

---

Step 2: Block Division (8×8 Pixels)

The image is split into small blocks, usually 8×8 pixels each.

This makes it possible to:

• Compress each block independently
• Apply different levels of compression based on local detail

However, this step also explains why overly compressed JPGs show visible block artifacts.

---

Step 3: Discrete Cosine Transform (DCT)

Each block undergoes a cosine-based mathematical transformation that converts pixel values into frequency components.

In simple terms:

• Low frequencies → smooth areas (very important)
• High frequencies → fine detail (less noticeable)

This transformation prepares the data for efficient reduction.

---

Step 4: Quantization (Where Loss Happens)

Quantization reduces precision—especially for high-frequency color data.

This step:

• Discards information the eye is unlikely to notice
• Traverses data in a zigzag pattern to prioritize important values
• Is the only truly lossy stage of JPG compression

This is why repeatedly saving a JPG degrades quality over time.

---

Step 5: Reconstruction and Final Encoding

Finally:

• The compressed data is converted back to RGB
• Everything is packed into a .jpg file using entropy encoding

At this point, the image looks “the same” to us—but contains far less data.

---

What Determines JPG Image Quality?

The block size and quantization level determine final quality:

• ✅ Smaller blocks → higher detail, larger file size
• ❌ Larger blocks → more compression, visible artifacts

In practice, JPG can remove ~75% of color detail while keeping luminance nearly intact—an excellent trade-off for photographs.

---

JPG vs PNG — Key Differences

🟦 PNG (Portable Network Graphics)

Feature	JPG	PNG
Compression	Lossy	Lossless
Transparency	❌ No	✅ Yes
Best for	Photos	UI, logos, text
File size	Smaller	Larger

PNG Variants

• PNG-8

  • Limited color palette
  • Single-color transparency
  • Jagged edges

• PNG-32

  • Millions of colors
  • True alpha transparency
  • Smooth edges (ideal for UI)

---

Display Media: RGB vs CMYK

🖥️ Digital Screens (RGB)

• Light-based
• Red + Green + Blue
• Black = no light
• White = full intensity

🖨️ Print Media (CMYK)

• Ink-based
• Cyan, Magenta, Yellow, Black
• Requires color conversion
• JPG/PNG are not print-native formats

This explains why images may look different on screen versus print.

---

Final Thoughts

Choosing between JPG and PNG is not about which format is “better”—it’s about intent:

• 📸 Photography → JPG
• 🎨 UI / Logos / Transparency → PNG
• 🌐 Bandwidth-sensitive apps → JPG
• 🖨️ Professional print → Converted formats

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

---

💬 Have you noticed quality differences between JPG and PNG in your projects?

Which format do you reach for—and why?

Let’s discuss 👇

---

📚 Reference

https://www.freecodecamp.org/news/how-jpg-works-a4dbd2316f35/