How Image Compression Works: A Plain-English Technical Guide

Image compression is the process of reducing the number of bits required to store or transmit image data. To understand why it matters, start with the baseline: an uncompressed image.

A 1920×1080 photograph stored as a raw 24-bit bitmap requires 1920 × 1080 × 3 bytes = 5,971,968 bytes - roughly 6 MB. That is 3 bytes per pixel (one each for red, green and blue channels), for just under two million pixels. Before any compression has been applied, a single Full HD photo occupies 6 MB of storage and requires 6 MB of network transfer every time it is served.

After JPEG compression at quality 85, that same photo typically lands around 300-500 KB, a reduction of 90-95%. How? Compression algorithms exploit two properties of image data:

• Spatial redundancy: Adjacent pixels in a photograph tend to be very similar in colour and brightness. A blue sky is mostly the same shade of blue across hundreds of pixels. Good compression finds and eliminates these repetitions.
• Perceptual irrelevance: The human visual system is not a perfect sensor. We are significantly less sensitive to high-frequency colour changes than to high-frequency brightness changes. Algorithms like JPEG deliberately discard the colour detail our eyes are least likely to notice.

Every image compression algorithm falls into one of two fundamental categories:

• Lossless compression reduces file size through mathematical transforms that are perfectly reversible. Decode the file and you recover every original bit. PNG, GIF and WebP lossless all work this way. Size reduction is typically 20-50%.
• Lossy compression permanently discards data to achieve far greater size reductions : typically 60-95%. JPEG, WebP lossy and AVIF lossy all work this way. Once data is discarded it cannot be recovered, which is why repeatedly re-saving a JPEG degrades quality progressively.

Neither category is universally better. Photographs almost always benefit from lossy compression because the discarded data is genuinely imperceptible. Screenshots, logos and text-heavy graphics often require lossless compression because even small data losses introduce visible artifacts around sharp edges.

JPEG (Joint Photographic Experts Group, standardised in 1992) remains the most widely deployed image format in history. Its compression pipeline is a masterpiece of applied psychoacoustics adapted for vision: each step deliberately exploits a limitation of the human eye.

Step 1: Colour Space Conversion: RGB → YCbCr

The image is converted from RGB (red, green, blue) into YCbCr, which separates luma (Y) (perceived brightness) from chroma (Cb, Cr) (colour information). This matters because the human visual system has roughly four times more spatial resolution for brightness than for colour. JPEG exploits this immediately in the next step.

Step 2: Chroma Subsampling

The two colour channels (Cb and Cr) are downsampled to half their original resolution in both directions (the 4:2:0 scheme) used in most JPEG files. This alone discards 50% of the colour data with minimal perceptible quality loss, because our eyes genuinely cannot resolve colour at full luma resolution.

Step 3: Block Division

Each channel is divided into 8×8 pixel blocks. These 64-pixel blocks are the fundamental unit of JPEG compression and also the source of JPEG's most visible artifact at low quality: the blockiness (macroblocking) that makes heavily-compressed images look like mosaics.

Step 4: Discrete Cosine Transform (DCT)

Each 8×8 block is transformed from the spatial domain (pixel values) into the frequency domain (64 frequency coefficients). The first coefficient (DC) represents the average colour of the block. The remaining 63 (AC) coefficients represent progressively finer patterns of variation across the block. High-frequency coefficients capture fine detail; low-frequency coefficients capture broad structure.

Step 5: Quantization (Where the Quality Setting Lives)

This is the lossy step. Each of the 64 DCT coefficients is divided by a corresponding value from a quantization table, then rounded to the nearest integer. The quality setting (1-100) you choose in any JPEG encoder directly controls how aggressively these tables round the coefficients. Quality 85 uses a fine-grained quantization table that preserves most coefficients; quality 50 uses coarse tables that round many high-frequency coefficients to zero, discarding fine detail permanently. Zero coefficients compress better in the next step: that is where the size savings come from.

Step 6: Entropy Coding (Huffman)

Finally, the quantized coefficients are compressed with Huffman coding, a lossless variable-length encoding that assigns shorter bit sequences to more-frequent values. This step is fully reversible and accounts for roughly 20-30% of JPEG's total compression ratio.

The key insight: the quality slider controls only Step 5. Everything else is fixed. Raising quality from 75 to 95 does not change the algorithm: it changes only how aggressively coefficients are rounded.

PNG (Portable Network Graphics, released 1996) was designed as a patent-free replacement for GIF. Its compression is entirely lossless (mathematically reversible), which is both its greatest strength and the reason it produces larger files than JPEG for photographic content.

Step 1: Filtering

Before compression begins, PNG applies a filter to each row of pixels. Filters do not discard data: they transform the raw pixel values into a form that is easier to compress. The key insight: instead of storing the absolute value of each pixel, a filter stores the difference between a pixel and its neighbour. For a smooth gradient image, raw pixel values might range across the full 0-255 range; differences between adjacent pixels might almost all be 0, 1, or −1. Small numbers compress dramatically better than large ones.

PNG defines five filter types that can be applied per row:

• None: raw pixel values, no transformation
• Sub: difference from the pixel immediately to the left
• Up: difference from the pixel directly above
• Average: difference from the average of left and above
• Paeth: difference from a predicted value using left, above and upper-left pixels

Encoders typically test multiple filter strategies and choose the one that produces the best compression for each row. The Paeth filter tends to perform best for photographic content; Sub or None are often better for simple graphics.

Step 2: DEFLATE Compression

The filtered data is compressed with DEFLATE (the same algorithm used in ZIP archives) and gzip. DEFLATE is a combination of two techniques: LZ77, which finds repeated sequences in the data stream and replaces them with back-references and Huffman coding, which assigns shorter codes to more-frequent byte values.

Because DEFLATE is lossless, the entire PNG pipeline is reversible. A PNG decoder can reconstruct the exact original pixel values every single time.

Why PNG Is Larger Than JPEG for Photos

DEFLATE is an excellent general-purpose compressor, but it cannot exploit psychovisual tricks. It cannot say "these high-frequency colour details are imperceptible, so discard them." It must preserve everything perfectly, which limits how far it can compress complex photographic content. A 1920×1080 photograph that encodes to 450 KB as JPEG quality 85 will typically be 4-6 MB as PNG-24.

PNG-8 vs PNG-24 vs PNG-32

• PNG-8: palette-based, maximum 256 colours. Dramatically smaller than PNG-24 for simple graphics, icons and illustrations with flat colours. Not suitable for photographs.
• PNG-24: full 24-bit colour (16.7 million colours), no transparency. The standard choice for logos and screenshots.
• PNG-32: PNG-24 plus an 8-bit alpha channel for per-pixel transparency. Use this when you need a logo or graphic to appear over an arbitrary background.

WebP was developed by Google and released in 2010, based on technology from the VP8 video codec. It supports both lossy and lossless modes, plus alpha transparency in both modes: something JPEG cannot do at all.

WebP Lossy: VP8-Based Intra-Frame Prediction

WebP lossy shares its foundation with VP8 video compression. The key architectural differences from JPEG that produce better compression ratios are:

• Larger transform blocks: where JPEG is limited to 8×8 pixel blocks, VP8 uses macro-blocks up to 16×16 pixels. Larger blocks mean fewer block boundaries, which means the blocky "macroblocking" artifact visible in low-quality JPEG is far less prominent in WebP at equivalent compression ratios.
• Intra-frame prediction: before the DCT transform is applied, WebP predicts each block's content from surrounding already-encoded blocks, then encodes only the residual (prediction error). Accurate predictions produce small residuals, which compress better. JPEG encodes each block independently with no inter-block prediction.
• Arithmetic entropy coding: WebP uses arithmetic coding instead of JPEG's Huffman coding. Arithmetic coding is theoretically optimal for entropy coding and consistently outperforms Huffman by 5-10% in practice.
• In-loop deblocking filter: a filter applied during decoding that smooths block boundaries, further reducing the visual impact of block-based compression.

WebP Lossless

WebP lossless uses a proprietary algorithm (not DEFLATE) that is specifically tuned for image data. It uses spatial prediction, colour transforms and a two-dimensional LZ77 variant that finds repeated 2D patches rather than just 1D byte sequences. The result is files approximately 26% smaller than equivalent PNG on average.

Real-World Compression Comparison

Format	Type	Typical Size (vs JPEG baseline)
JPEG quality 85	Lossy	Baseline (100%)
WebP quality 80	Lossy	65-75% (25-35% smaller)
AVIF quality equivalent	Lossy	45-55% (45-55% smaller)
PNG-24	Lossless	800-1200% (much larger)
WebP lossless	Lossless	600-900% (26% smaller than PNG)

You can convert your images to WebP directly using the WebP compressor or convert from JPEG with the JPEG compressor.

Almost every JPEG and WebP encoder exposes a "quality" slider from 1 to 100. This number is almost universally misunderstood : the misunderstanding leads to unnecessarily large files, unnecessary quality loss and a false belief that "quality 100 = lossless."

Quality 100 Is Not Lossless

JPEG quality 100 still applies quantization. It uses a very fine-grained quantization table that rounds most DCT coefficients to the nearest value rather than rounding them aggressively, but it still rounds them. A JPEG at quality 100 is slightly degraded compared to the original. It is also enormous (typically 3-5× larger than quality 90) with barely perceptible visual improvement. If you need lossless, use PNG or WebP lossless. Quality 100 JPEG is not the answer.

The Quality-Size Trade-off Is Not Linear

The quality scale is perceptual, not linear. Moving from quality 95 to quality 85 typically reduces file size by 40-50% while producing a difference that is nearly invisible to the human eye at normal viewing distances on screen. Moving from quality 75 to quality 60 reduces file size by 25-35% but begins introducing visible artifacts for photographs with fine texture.

JPEG Quality	Typical Use Case	Relative File Size	Visible Artifacts?
95-100	Professional archiving, print originals	Very large	None
85-94	High-quality web images, photography portfolios	Large	None at normal viewing
75-84	General web use: the sweet spot	Medium	Rarely visible
60-74	Thumbnails, previews, bandwidth-constrained	Small	Subtle, detectable on close inspection
40-59	Extreme compression only	Very small	Noticeable, especially on edges
1-39	Effectively unusable for most purposes	Tiny	Severe blocking and ringing

Quality Numbers Are Not Comparable Across Formats

JPEG quality 80 and WebP quality 80 are not equivalent visual qualities: they use different quantization approaches and different underlying algorithms. WebP quality 75 typically produces better visual quality than JPEG quality 80 at a smaller file size. Always compare output files visually and by file size rather than assuming equal quality numbers produce equal results.

Use the image compressor to experiment with quality settings on your own images and see the file size impact in real time.

Understanding compression artifacts helps you diagnose problems in existing images, choose the right format for each use case and set quality targets that avoid visible degradation.

JPEG Artifacts

1. Macroblocking: At low quality settings (below ~50), JPEG's 8×8 block structure becomes clearly visible. The image appears to be made of a grid of small squares, each a slightly different shade. This is caused by aggressive quantization reducing all high-frequency DCT coefficients within a block to zero, leaving only the DC (average) component.

2. Mosquito noise (ringing): Sharp edges (especially text, logos and lines) develop a "halo" of lighter and darker pixels surrounding them. This is a consequence of the DCT treating sharp edges as high-frequency signals, then having those high-frequency coefficients zeroed out by quantization. The effect looks like ripples around edges and is especially visible on black text on white backgrounds.

3. Colour banding: Smooth gradients (sky, skin tones) develop visible steps instead of continuous transitions. Chroma subsampling and quantization both contribute. Most visible in images with large areas of slowly varying colour.

4. Chroma bleeding: Colour "bleeds" across sharp luminance edges due to chroma subsampling. A bright red object on a white background may show a faint pinkish smear extending beyond the object's edge.

PNG Artifacts

True PNG-24/32 has no compression artifacts: it is mathematically lossless. However, PNG-8 introduces palette quantization artifacts: because only 256 colours are available, smooth gradients become visibly banded (dithering can mitigate this but adds its own texture). Never use PNG-8 for photographs or images with complex colour gradients.

Why Some Images Compress Worse Than Others

Images with high spatial frequency content (fine textures like grass, gravel, brick and fabric) compress poorly under JPEG. The many fine-detail coefficients cannot be zeroed out without visible quality loss, so the quantization tables must remain fine-grained and file sizes stay large. A photograph of a clear blue sky compresses dramatically better than a photograph of a stone wall at the same resolution and quality setting, because the sky has very low spatial frequency content.

Images with sharp edges and text compress much better as PNG or WebP lossless: JPEG's psychovisual optimisations are calibrated for photographic content, not line art.

The right compression strategy depends entirely on the destination of the image. The table below consolidates the practical guidance from all previous sections into a quick reference.

Use Case	Recommended Format	Quality Setting	Expected Output
Website photos (hero, blog)	WebP lossy	75-82	60-75% smaller than JPEG original
E-commerce product images	WebP lossy or AVIF	80-85	Best quality-to-size on modern browsers
Social media uploads	JPEG	85-90	Platforms re-encode anyway; start with quality source
Email newsletter images	JPEG	75-80	Target under 200 KB per image
Print-ready files	JPEG or TIFF	92-95	300 DPI, minimal visible loss
Logos and icons (web)	PNG-24 or SVG	Lossless	Crisp edges at all sizes
Screenshots with UI/text	PNG-24	Lossless	No ringing artifacts around text
Thumbnails and previews	WebP lossy	65-72	Prioritise size; minor artifacts acceptable
Long-term archives	PNG-24 or original RAW	Lossless	Preserve all data for future re-processing

For most web images, running them through the image compressor at WebP quality 78-82 is the single highest-impact optimisation you can make. For JPEG specifically, use the JPEG compressor. For PNG files that need to stay as PNG, use the PNG compressor, which applies lossless DEFLATE optimisation and optionally palette quantisation.

If you have a target file size constraint (for example a platform that requires images under 100 KB), use the compress to 100 KB tool, which automatically finds the quality setting that hits your target.

Most image quality disasters are avoidable. They follow the same patterns repeatedly.

Mistake 1: Re-saving JPEG Multiple Times

Every JPEG save cycle applies quantization again to already-quantized data. The artifacts introduced by the first save are re-compressed, amplified and mixed with new artifacts from the second save. After four or five save cycles at moderate quality, the image can be noticeably degraded even if each individual save seemed fine. Always keep a lossless master (PNG, TIFF, or original RAW) and export JPEG from that master every time. Never edit and re-save JPEG files as JPEG.

Mistake 2: Compressing Already-Compressed Images

Converting a JPEG to WebP and compressing it is not the same as compressing the original photograph to WebP. The JPEG source already has quantization artifacts baked in. The WebP encoder sees those artifacts as real image content and attempts to faithfully preserve them, resulting in a larger file than if you had encoded from the original. Start from the highest-quality source available.

Mistake 3: Using Quality 100 Thinking It Is Lossless

As covered earlier, JPEG quality 100 is still lossy. It is also typically 3-5× the file size of quality 90 with no perceptible quality difference for photographic content. For archival purposes, use PNG or original RAW, not JPEG quality 100.

Mistake 4: Compressing Without Resizing First

A 4000×3000 pixel photograph at JPEG quality 90 might be 3 MB. The same photograph resized to 1400×1050 (the maximum width most web layouts need) at the same quality will be 400-600 KB, without any perceivable quality difference on a monitor. Resize to your target display dimensions before compressing. Serving a 4000px-wide image into a 1400px container wastes 5-7× the bandwidth even at the same quality setting.

Mistake 5: Using PNG for Photographs

PNG is the right format for logos, screenshots and graphics. For photographs, PNG-24 produces files that are 8-12× larger than a visually equivalent WebP and 5-8× larger than a visually equivalent JPEG. There is no quality benefit to storing a photograph as PNG unless you need it as a lossless intermediate for further editing.

Mistake 6: Ignoring Metadata

JPEG files routinely contain 20-100 KB of EXIF metadata: GPS coordinates, camera model, lens data, timestamps and thumbnail previews. This data adds no visual quality and is often irrelevant for web use. Stripping it is free file size reduction. Be aware of the privacy implications too: GPS metadata in images posted publicly reveals where photographs were taken.

The Correct Workflow

Start from RAW or high-quality source → resize to target display dimensions → compress to target quality or file size using the appropriate format → strip unnecessary metadata → deliver. Every shortcut in this chain costs either file size, quality, or both.