How Image Compression Works (Without Losing Quality)

What Does Compression Actually Do?

Image compression reduces the number of bytes needed to store or transmit an image. Every digital image is fundamentally a grid of pixels, where each pixel has a color value. An uncompressed 1920x1080 photograph contains over 6 million pixels, each with red, green, and blue values — that adds up to roughly 6 megabytes of raw data. Compression algorithms find patterns and redundancies in this data to represent the same image (or a close approximation of it) in fewer bytes.

Lossless vs. Lossy: The Fundamental Split

There are two categories of image compression, and understanding the difference is essential.

Lossless compression reduces file size without removing any information. When you decompress a losslessly compressed image, you get back the exact same pixels that went in. PNG and GIF use lossless compression. Think of it like a ZIP file for images — the data is reorganized more efficiently, but nothing is thrown away.

Lossy compression reduces file size by permanently removing information that is deemed less important. JPEG is the classic lossy format. The "lost" data is gone forever — you cannot recover it by re-saving. This sounds alarming, but the algorithms are designed to remove the kinds of detail that human eyes are least sensitive to. At reasonable quality settings, the visual difference is imperceptible.

How JPEG Compression Works

JPEG compression is a multi-step process that is surprisingly clever. First, the image is converted from RGB color to YCbCr, which separates brightness (luminance) from color (chrominance). Human eyes are much more sensitive to brightness differences than color differences, so the color channels can be downsampled — reduced in resolution — without visible impact.

Next, the image is divided into 8x8 pixel blocks. The exact mechanics of why this matters are discussed in more depth in the JPEG vs PNG vs WebP comparison. Each block undergoes a Discrete Cosine Transform (DCT), which converts the spatial pixel data into frequency components. High-frequency components represent fine detail, while low-frequency components represent broad areas of color.

The quality setting controls quantization — the step where frequency components are rounded to fewer distinct values. At high quality, the rounding is gentle and most detail is preserved. At low quality, the rounding is aggressive and fine details are lost, which can produce the blocky artifacts that JPEG compression is known for.

MozJPEG: Better JPEG Compression

MozJPEG is an improved JPEG encoder created by Mozilla. It produces files that are 100% compatible with every JPEG decoder — any device or browser that can display a standard JPEG can display a MozJPEG-encoded JPEG. The difference is that MozJPEG is smarter about how it encodes.

MozJPEG uses optimized Huffman coding, trellis quantization, and better progressive scan orders to produce JPEG files that are typically 5-15% smaller than those produced by standard encoders at the same quality level. The visual quality is identical or better — the compression is purely more efficient. For a deeper look, see MozJPEG vs Standard JPEG.

WebP Compression

WebP uses a fundamentally different approach. For lossy compression, it uses prediction-based coding (related to the VP8 video codec) where each block is predicted from already-decoded neighbors, and only the prediction error is stored. For lossless compression, WebP uses a technique involving transforms, color caching, and LZ77 backreferences.

The result is consistently smaller files than JPEG at equivalent visual quality, at the cost of slightly more CPU time for encoding and decoding.

Practical Tips for Compression

The single most impactful thing you can do is match the format to the content. Photographs should use lossy compression (JPEG or lossy WebP). Graphics with flat colors and sharp edges should use lossless compression (PNG or lossless WebP).

Quality settings of 75-85% for lossy compression give the best balance of file size and visual quality for most photographs. Below 70%, artifacts start becoming noticeable on close inspection. Above 90%, you are paying a large file size premium for improvements that are invisible to most viewers.

A Worked Example: Where the Bytes Go

Imagine a 1920×1080 photograph straight from a camera, uncompressed. Each pixel uses 3 bytes (red, green, blue), so the raw file is 1920 × 1080 × 3 = roughly 6.2 MB. Save it as a high-quality JPEG at quality 90 and the file lands at about 800 KB — eight times smaller. Drop to quality 80 and you reach about 480 KB. Drop to quality 60 and you get about 280 KB but JPEG artifacts start to become visible around sharp edges and faces.

What changed? The image, visually, is the same. What's gone is high-frequency detail that the human eye doesn't notice — subtle gradient steps in flat areas, micro-noise from the camera sensor, color variations the brain glosses over. Quality 80 with MozJPEG strikes the practical sweet spot for almost every photograph: most people cannot tell it apart from the original at viewing size.

Common Misunderstandings

• Lossy compression is not "destructive" in any moral sense. It removes data the human visual system was never going to use. The original 6.2 MB raw file does not look better than the 480 KB compressed version — only the file size differs.
• Higher quality settings have diminishing returns very quickly. Going from quality 80 to quality 95 typically doubles the file size and produces a difference that is invisible at normal viewing distances.
• Re-saving a JPEG repeatedly does degrade it. Each re-encoding cycle adds quantization error. If you need to edit a photo, keep the original (RAW or high-quality TIFF) and export to JPEG only when you're done.

Frequently Asked Questions

Q: Why do compressed images sometimes look worse near edges and text?

JPEG works in 8×8 blocks and prefers smooth content. Sharp edges (like text or logo outlines) span multiple blocks and produce "ringing" artifacts — faint halos around the edge. This is why screenshots and graphics with sharp lines should use PNG or lossless WebP instead. See the format comparison for guidance.

Q: Does TinImg ever upload my images?

No. The compression libraries are loaded from a CDN once, then run entirely in your browser via WebAssembly. Your image data never leaves your device. This is the only reason the tool can be free at any scale — there are no server-side compute costs.

Q: How does compression affect image SEO and Core Web Vitals?

Smaller images load faster, which directly improves Largest Contentful Paint (LCP) — one of the three Core Web Vitals that Google uses for ranking. A well-compressed hero image at 80–120 KB versus a poorly compressed one at 600+ KB can mean the difference between "good" and "needs improvement" on Core Web Vitals. See best image sizes for the web for target file sizes.