QuickPix

Image Fundamentals

How Image Compression Works: Lossy vs Lossless Explained

A deep dive into the algorithms behind image compression, the trade-offs between quality and file size, and practical advice for choosing the right approach.

What Is Image Compression?

Every digital image is a grid of pixels, and each pixel stores color information as numbers. A raw, uncompressed 12-megapixel photo at 24 bits per pixel weighs in at roughly 36 megabytes. That is impractical for storage, transmission, or display on the web. Image compression is the set of techniques that reduce the amount of data required to represent an image while preserving enough visual information to be useful.

At the highest level there are two families of compression: lossy, which permanently discards some information to achieve smaller files, and lossless, which reduces file size without losing a single pixel of data. Understanding how each works will help you make better decisions every time you export, upload, or convert an image.

How Lossy Compression Works

Lossy compression exploits the limitations of human vision. Our eyes are far more sensitive to changes in brightness than to changes in color, and we are poor at noticing fine high-frequency detail. Lossy algorithms take advantage of these facts to remove information we are unlikely to miss.

JPEG: The Classic Lossy Format

JPEG compression proceeds through several stages. First, the image is converted from RGB color space to YCbCr, which separates luminance (brightness) from chrominance (color). Because our eyes resolve brightness at roughly twice the spatial resolution of color, the chroma channels (Cb and Cr) can be downsampled — typically halved in each dimension — without visible degradation. This step alone can reduce data by 50%.

Next, the image is divided into 8x8 pixel blocks, and each block undergoes a Discrete Cosine Transform (DCT). The DCT converts spatial pixel data into frequency coefficients: low-frequency coefficients capture the broad tonal gradients in the block, while high-frequency coefficients capture fine detail and sharp edges.

The critical step is quantization. Each frequency coefficient is divided by a value from a quantization table and rounded to the nearest integer. High-frequency coefficients — the ones encoding tiny details — are divided by larger numbers, which drives many of them to zero. The quality slider in a JPEG encoder controls how aggressive this quantization is. At low quality, more coefficients are zeroed out, producing smaller files but introducing visible artifacts.

Finally, the quantized coefficients are entropy-coded using Huffman coding (or arithmetic coding in some encoders) to squeeze out any remaining statistical redundancy. The result is a dramatically smaller file that, at moderate quality settings, looks virtually identical to the original.

Modern Lossy Formats: WebP and AVIF

WebP and AVIF build on the same principles but use more sophisticated transforms and prediction models. WebP uses block prediction derived from VP8 video codec technology, achieving 25-35% better compression than JPEG at equivalent visual quality. AVIF, based on the AV1 video codec, pushes this further with advanced intra-frame prediction, larger transform blocks, and better chroma handling. Both formats also support transparency and animation — features JPEG lacks entirely.

How Lossless Compression Works

Lossless compression guarantees that every pixel in the decompressed image is identical to the original. No information is lost — ever. This makes it essential for medical imaging, technical diagrams, screenshots, and any workflow where an image will be edited multiple times.

PNG: Prediction + Entropy Coding

PNG compression works in two phases. First, a prediction filter is applied to each row of pixels. Rather than storing raw pixel values, the filter stores the difference between each pixel and a prediction based on its neighbors (the pixel to the left, above, or a combination). In regions of smooth gradients or solid color, these differences are very small — often zero — which makes them highly compressible.

PNG offers five filter types (None, Sub, Up, Average, and Paeth) and the encoder selects the best filter for each row independently. The filtered data is then compressed using the DEFLATE algorithm, which combines LZ77 dictionary-based matching with Huffman coding. LZ77 finds repeated byte sequences and replaces them with back-references, while Huffman coding assigns shorter bit sequences to more frequently occurring values.

The result is a file that can be 50-70% smaller than raw pixel data for photographs and up to 90% smaller for images with large areas of uniform color, such as screenshots or diagrams — all without losing any quality whatsoever.

Other Lossless Formats

WebP also supports a lossless mode that typically produces files 26% smaller than PNG. It uses a more advanced prediction model with multiple reference pixels, color-space transforms, and a backward-reference approach tuned for images rather than general-purpose data. TIFF with LZW compression and GIF (limited to 256 colors) are other lossless options, though both are less efficient than PNG or lossless WebP for most use cases.

Visual Quality vs File Size: The Trade-Off

The relationship between quality and file size is not linear. Reducing JPEG quality from 95 to 80 typically cuts file size by 50-60% with almost no visible difference on screen. Dropping from 80 to 60 saves another 30-40% but starts to become noticeable in gradients and fine textures. Below 40, artifacts become obvious and distracting.

This means the sweet spot for most web images is a quality setting between 70 and 85. At this range you capture the bulk of the file-size savings while keeping visual quality indistinguishable from the original for the vast majority of viewers. You can test this yourself with our Image Compressor — it shows a side-by-side preview so you can see exactly what you are trading.

Common Compression Artifacts and How to Avoid Them

Blocking

The most recognizable JPEG artifact. Because JPEG processes 8x8 blocks independently, at low quality settings the boundaries between blocks become visible as a grid pattern. This is most obvious in smooth gradients like blue skies. To avoid it, keep quality above 60 or switch to WebP, which uses variable block sizes and in-loop deblocking filters.

Ringing and Mosquito Noise

These appear as halos or buzzing patterns around sharp edges — particularly where dark text meets a light background. They result from discarding high-frequency DCT coefficients that are needed to reconstruct sharp transitions. Using a higher quality setting or saving text-heavy images as PNG eliminates the problem.

Color Banding

Smooth gradients can break into visible steps of color, especially after heavy quantization or when converting from a higher bit depth. Saving at higher quality or using dithering during format conversion helps preserve gradient smoothness.

Generation Loss

Every time you open, edit, and re-save a JPEG, the image goes through another round of lossy compression. After several cycles, artifacts accumulate and quality degrades noticeably. Always keep a lossless master copy (PNG or TIFF) and export to JPEG only as the final step.

When to Use Lossy vs Lossless

Use Lossy (JPEG, WebP, AVIF)

  • Photographs and complex images with millions of colors
  • Web images where page load speed is critical
  • Social media uploads (platforms re-compress anyway)
  • Email attachments where size limits apply
  • Hero images, product photos, and blog illustrations

Use Lossless (PNG, Lossless WebP)

  • Screenshots and UI mockups with sharp text
  • Logos, icons, and graphics with flat colors
  • Images requiring transparency (alpha channels)
  • Medical, scientific, or legal images
  • Master files that will be edited or re-exported later

Practical Recommendations

For websites: Serve photographs as WebP at quality 75-80 with a JPEG fallback. Use PNG for logos and icons, or better yet, SVG where possible. Implement responsive images with the srcset attribute to serve appropriately sized files to each device.

For archiving: Keep originals as lossless PNG or TIFF. Never use JPEG as an archival format because every re-save degrades quality.

For social media: Export at the platform's recommended resolution and use JPEG quality 85-90. Platforms will re-compress your upload, so starting with a slightly higher quality gives better results after their processing.

For email: Compress images to under 200KB each. Total email size including all images should stay below 1-2MB. Our Image Compressor makes it easy to hit a specific file-size target.

Need to switch between formats? Our Format Converter handles conversions between JPEG, PNG, WebP, and more — entirely in your browser with no uploads required.

Wrapping Up

Image compression is not a one-size-fits-all problem. The right choice depends on the content of the image, where it will be displayed, and whether it needs to survive future editing. By understanding how lossy and lossless compression work at a mechanical level — DCT transforms, quantization tables, prediction filters, entropy coding — you gain the intuition needed to make smart trade-offs every time. Start with a lossless master, export to lossy for distribution, choose the right quality setting for the context, and avoid re-compressing already-compressed files. Follow those principles and your images will be sharp, fast-loading, and efficiently stored.