The Complete Guide to Image Compression

Image compression is one of those topics that seems simple on the surface but has surprising depth. Understanding how it actually works — not just which button to press — will help you make better decisions every time you need to compress, convert, or optimise an image.

What Is Image Compression?

An uncompressed image is just a grid of pixels, where each pixel stores a colour value. A 1920×1080 image contains 2,073,600 pixels. If each pixel uses 3 bytes of colour data (red, green, blue at 8 bits each), the raw file is about 6 MB — before any compression.

Image compression reduces this by finding patterns and redundancies in the pixel data and representing them more efficiently. A blue sky that is essentially the same colour across hundreds of pixels does not need to store each pixel individually — it can store "blue, 800 times" in far fewer bytes.

The challenge is that different compression approaches make different trade-offs between file size, image quality, and computational cost. Understanding these trade-offs is what this guide is about.

Lossy Compression Explained

Lossy compression achieves much smaller file sizes by permanently discarding some image data. The key is discarding data that the human visual system is unlikely to notice.

JPEG compression (used in JPG files) works by:

Converting the image from RGB colour space to YCbCr, which separates brightness (luma) from colour (chroma). Our eyes are much more sensitive to brightness differences than colour differences.
Downsampling the chroma channels — reducing the colour resolution while keeping the full brightness resolution. Most people cannot tell the difference.
Dividing the image into 8×8 pixel blocks and applying a Discrete Cosine Transform (DCT) to each block, converting pixel values into frequency components.
Quantising these frequency components — rounding small values to zero. High-frequency detail (fine texture) is discarded more aggressively than low-frequency information (broad shapes and gradients). The quality setting controls how aggressively this happens.
Applying lossless compression (Huffman coding) to the quantised data to achieve the final file size.

This is why JPG compression artefacts look the way they do: blocky, pixelated squares (the 8×8 DCT blocks becoming visible), and ringing artefacts around sharp edges (where high-frequency data was discarded). At high quality settings these are invisible; at very low quality settings they become obvious.

Lossless Compression Explained

Lossless compression reduces file size without discarding any data. Every single original pixel is preserved exactly. When you decompress a losslessly compressed image, you get a bit-perfect replica of the original.

PNG uses a combination of two techniques:

Delta filtering — instead of storing absolute pixel values, PNG can store the difference between adjacent pixels. Smooth gradients and solid areas produce very small differences that compress well.
DEFLATE compression — the same algorithm used in ZIP files. It finds repeated patterns in the filtered data and replaces them with shorter references.

Because no data is discarded, lossless compression cannot achieve the extreme file size reductions of lossy compression for photographs. A photograph contains a huge amount of varied pixel data with relatively few large repeating patterns — making it resistant to lossless compression. But for an image with large solid-colour areas (logos, UI screenshots), lossless compression can be very effective.

Understanding Quality Settings

JPEG quality settings (0–100) are not a linear scale. The perceptual difference between quality 95 and 85 is much smaller than the file size difference. The perceptual difference between quality 60 and 50 is much larger than the file size difference.

The sweet spot for most web photographs is quality 70–85. Below this range, artefacts become visible in detailed areas. Above this range, the file size increases rapidly with little visible benefit.

Different tools report quality differently. Photoshop's quality 8 (out of 12) corresponds roughly to 65–70 on a 0–100 scale. Lightroom's quality 70 corresponds roughly to 45–50 on a software quality scale. When comparing quality between tools, always compare the resulting files visually rather than relying on the numbers.

Binary-search compression: Some tools — including our browser-based image compressor — use a binary-search algorithm to hit an exact target file size while maximising quality. Instead of you choosing a quality number, you specify a target size (e.g., 50 KB) and the algorithm finds the highest quality that fits. This is particularly useful for government form uploads and other situations where the file size limit is fixed.

How Browsers Handle Images

When a browser loads an image, it decodes the compressed file back into raw pixel data to display it. This decoding happens in memory — the browser holds the uncompressed image in RAM while it is visible on screen.

This means a 100 KB JPEG might require 20 MB of memory when decoded at full resolution. Loading many large images simultaneously can cause memory pressure, particularly on mobile devices with limited RAM. This is one reason why serving correctly sized images matters even when you have good compression — a 400×300 thumbnail displayed in a 400×300 space should be served at those dimensions, not as a 2000×1500 original that the browser scales down.

Modern browsers support lazy loading (loading="lazy") which defers loading off-screen images until the user scrolls toward them. Combined with properly compressed images, this is one of the most effective performance improvements for image-heavy pages.

When Compression Hurts More Than It Helps

Compression is not always the right answer. Here are situations where it can make things worse:

!
Over-compressing images for printing.
Screen resolution (72–96 DPI) looks fine on a monitor but prints poorly. For anything going to a professional printer, keep images at 300 DPI and use minimal compression.
!
Compressing images you will edit again later.
Each compression cycle degrades quality. Always keep an uncompressed master file and only compress the copy you are delivering or publishing.
!
Compressing logos and text images as JPG.
Lossy compression creates visible ringing artefacts around hard edges. A logo or screenshot compressed as JPG will look worse than the same file as PNG or WebP lossless, even at a smaller size.
!
Compressing an already-compressed JPG.
JPEG compression artefacts compound with each re-save. What was invisible at quality 85 becomes ugly blocks at quality 70 on a second save. Compress from the original source, not from an already-compressed file.

Quick Reference: Best Compression Approach by Use Case

Web photograph: WebP lossy, quality 75–80. JPG as fallback.
Logo with transparency: WebP lossless or PNG. Never JPG.
Government form photo: JPG, compressed to target KB (e.g. 50KB). Use binary-search tool.
Email attachment photo: JPG at quality 70–75. Keep under 500KB for reliable delivery.
Social media image: JPG at quality 80–85. Platforms will re-compress anyway.
Print document: JPG at quality 90+ or PNG. 300 DPI minimum.

Free Image Compression Tools

Apply what you have learned with these free browser-based tools — no uploads, no account: