Every image you see on the web has been compressed. Sometimes aggressively, sometimes gently — but almost never is it the raw pixel dump your camera or graphics editor originally produced. Understanding how that compression works helps you make better decisions about quality, file size, and format choice.
Two Families of Compression
All image compression falls into one of two buckets: lossless or lossy.
Lossless compression means you can reconstruct the original image perfectly from the compressed file. Every pixel value survives intact. PNG is lossless. So is GIF and WebP in its lossless mode.
Lossy compression throws some data away in exchange for much smaller files. JPEG is the canonical example. The key insight behind lossy formats is that human vision is not a perfect recording instrument — your eyes are far more sensitive to certain kinds of information than others. Lossy codecs exploit that gap.
How JPEG Works: Frequency and Forgetting
JPEG compression is built on a clever observation: an image's visual information can be separated into "coarse structure" and "fine detail," and humans care much more about the former.
The algorithm starts by dividing your image into 8×8 pixel blocks. Each block goes through a Discrete Cosine Transform (DCT), which is a mathematical operation that converts the block from the spatial domain (actual pixel values) into the frequency domain (how much low-frequency variation and high-frequency variation the block contains).
Think of it like audio: a deep bass note is low frequency, a high-pitched hiss is high frequency. For images, low frequencies represent gradual color changes — a smooth sky gradient. High frequencies represent sharp edges and fine textures.
After the DCT, each 8×8 block is represented as 64 frequency coefficients arranged in a grid. The top-left coefficient (DC coefficient) captures the average color of the block. Moving right and down, you get progressively higher frequencies.
Then comes quantization: each coefficient is divided by a value from a quantization table, and the result is rounded to the nearest integer. This is where data is actually lost — the rounding is irreversible. Higher-frequency coefficients use larger divisors, so they get rounded more aggressively. Fine details get discarded; coarse structure survives.
The quality slider in any JPEG export tool controls how aggressive this quantization is. Quality 95 uses a nearly flat quantization table (very little rounding). Quality 30 uses much larger divisors and throws away most of the high-frequency information, resulting in the characteristic blocky JPEG artifacts you've seen on over-compressed images.
After quantization, the coefficient data is run-length encoded and Huffman-compressed (both lossless steps). The final file is smaller both because quantization zeroed out lots of high-frequency values and because zeros compress extremely well.
Chroma Subsampling: Your Eyes Don't See Color as Well as You Think
JPEG also exploits another quirk of human vision: our eyes resolve luminance (brightness) at much higher spatial resolution than chroma (color).
Before running the DCT, JPEG converts the image from RGB to YCbCr — a color model with one luminance channel (Y) and two color-difference channels (Cb and Cr). Then it can downsample the Cb and Cr channels without most people noticing.
The most common setting is 4:2:0 subsampling, where each 2×2 block of pixels shares a single Cb and Cr value instead of having four separate ones. The chroma channels are sampled at one-quarter of the luminance resolution (half horizontally and half vertically), cutting total YCbCr data to 50% of what 4:4:4 would require. The luminance channel stays at full resolution so edges and contrast remain sharp.
4:4:4 subsampling keeps full color resolution — useful for text or graphics with sharp colored edges. 4:2:2 is a middle ground often used in video.
How PNG Works: Filter Then Compress
PNG takes a completely different approach. It's lossless, so it can't throw anything away. Instead, it makes the data more compressible before applying DEFLATE compression (the same algorithm used in ZIP files).
Before compressing, PNG applies a filter to each row of pixels. The filter replaces absolute pixel values with differences from neighboring pixels. For example, the Sub filter encodes each pixel as the difference from the pixel to its left. The Up filter uses the pixel above. The Paeth filter uses a prediction based on left, above, and upper-left.
Why do this? Because pixel differences tend to be small numbers clustered near zero, and small repeated values compress much better than arbitrary large ones. A smooth gradient that sweeps from RGB(100,100,100) to RGB(200,200,200) becomes a long run of small positive differences — easy for DEFLATE to encode efficiently.
DEFLATE then applies LZ77 (finding and back-referencing repeated byte sequences) followed by Huffman coding. The net result: lossless compression that typically achieves 3-5x size reduction on photographic images, and much more on synthetic images with flat regions or repeating patterns.
What the Quality Slider Actually Does
When you export a JPEG and move the quality slider, you're directly scaling the quantization tables. Most implementations use tables derived from the original JPEG specification, multiplied by a factor that varies with the quality setting.
At quality 100, the quantization divisors are all 1 — no rounding loss from quantization — but chroma subsampling (if still applied) and finite-precision arithmetic in the DCT mean JPEG remains technically lossy. At quality 1, divisors are enormous and nearly all coefficient data collapses to zero.
The relationship between quality number and perceptual quality is not linear. Dropping from 95 to 85 is barely noticeable. Dropping from 60 to 50 looks dramatically worse. Most web images hit a useful sweet spot between 70 and 85 — meaningful file size reduction with negligible visible degradation.
Tools like Image Compressor let you experiment with this interactively. For format conversion experiments, try Image Converter to compare WebP output against JPEG at equivalent settings.
Perceptual Quality vs SSIM
When engineers measure compression quality, they often use SSIM (Structural Similarity Index). Unlike simple pixel-difference metrics, SSIM tries to model how humans perceive image changes — weighting luminance, contrast, and structural information separately.
An image with a single misplaced bright pixel has terrible pixel-difference metrics but high SSIM. An image with a slight blur across the whole frame has reasonable pixel-difference metrics but lower SSIM. The point is that not all information loss is equal — compression algorithms are tuned to discard what SSIM (and human perception) considers least important.
Modern formats like WebP and AVIF were designed with perceptual quality metrics in mind from the start, which is why they typically achieve better visual quality at the same file size as JPEG.
What Gets Thrown Away First
Lossy compression always follows the same priority order:
- High-frequency detail — fine texture, grain, subtle edge sharpness
- Color accuracy — exact hue and saturation in gradual transitions
- Local contrast — small differences between adjacent regions
What survives longest: large-scale luminance structure, sharp high-contrast edges, coarse color regions.
This is why JPEG struggles with text (sharp high-frequency edges create ringing artifacts), hard-edged logos (flat regions get degraded boundaries), and screenshots (block artifacts become visible against uniform backgrounds). Those content types are better served by lossless PNG or SVG.
For a broader look at how data reduction techniques apply across different domains, see How Data Compression Works.
Practical Takeaways
Match your format to your content:
- Photos: JPEG at 75-85 quality, or WebP at equivalent setting — roughly 25-35% smaller
- Screenshots, UI graphics, text: PNG lossless, or WebP lossless
- Icons, logos: SVG where possible; PNG fallback
- Animations: WebP or AVIF animated; avoid GIF (terrible compression ratio)
The Mozilla JPEG Encoder Guide has a solid breakdown of format support across browsers if you're deciding what to serve in production.
Use Image Compressor when you need to reduce a photo or WebP for a web page — it gives you direct control over the quality parameter and shows you the size delta before you commit.