How Image Compression Works

The clear explanation of lossy vs lossless compression, JPG's DCT blocks, PNG's DEFLATE, and how to reduce image file size without visible quality loss.

🔬 Technical + Practical 📸 Lossy vs Lossless 💡 Pro Tips ⚡ Compress Free
⚡ Compress Images Free

The Two Types of Image Compression

❌ Lossy Compression

Permanently discards image data that the algorithm determines is imperceptible to human vision. Produces much smaller files. Quality cannot be fully recovered. Used by JPG and lossy WebP. Best for photographs where small file size matters most.

✅ Lossless Compression

Reduces file size by encoding data more efficiently — without discarding any information. The original image can be reconstructed perfectly. Used by PNG and lossless WebP. Best for graphics, logos, and images that will be edited further.

How JPG Compression Works (Step by Step)

  1. 1
    Color space conversion

    The image is converted from RGB (red, green, blue) to YCbCr — a format that separates brightness (luma) from color information (chroma). The human eye is far more sensitive to brightness than to color, so this separation allows color data to be compressed more aggressively than brightness data.

  2. 2
    Chroma subsampling

    The color channels (Cb and Cr) are reduced in resolution — typically to half size — while the brightness channel is kept at full resolution. Since our eyes don't notice color detail as sharply as brightness detail, this step alone typically reduces data by 50% with negligible visible impact on photographic content.

  3. 3
    Block division (8×8 DCT)

    Each channel is divided into 8×8 pixel blocks. Each block is then processed by a Discrete Cosine Transform (DCT) — a mathematical operation that converts the spatial pixel values into frequency components. Low-frequency components describe broad color areas; high-frequency components describe fine detail and sharp edges.

  4. 4
    Quantization (where data is lost)

    This is the step that actually loses information. The DCT coefficients — especially the high-frequency ones — are divided by a quantization table and rounded to integers. The higher the compression level, the more aggressively coefficients are rounded, discarding fine detail. This step is irreversible. This is why JPG degrades with every re-save and why JPG compression causes blurring around sharp edges.

  5. 5
    Entropy encoding

    The quantized values are compressed further using Huffman coding — a lossless step that assigns shorter binary codes to more common values. This final step squeezes out remaining redundancy without any additional quality loss. The result is the final JPG file.

How PNG Compression Works

PNG uses an entirely different approach: lossless compression. No data is ever discarded. The PNG algorithm works in two stages. First, a filter is applied to each row of pixels to make the data more compressible. The filter predicts the value of each pixel based on its neighbors and stores only the difference (the "delta") rather than the absolute value. Images with smooth gradients and flat areas produce very small delta values that compress well.

Second, the filtered pixel data is compressed using DEFLATE — the same algorithm used in ZIP files. DEFLATE finds repeated patterns in the data and replaces them with shorter references. For images with large flat areas of the same color (logos, icons, screenshots), this produces dramatic size reductions. For photographs with complex natural variation in every pixel, DEFLATE finds few repeated patterns, producing large files.

Because no data is discarded, a PNG can always be decompressed back to the exact original pixel values. You can save, open, edit, and re-save a PNG file an unlimited number of times with zero quality degradation — unlike JPG.

How WebP Compression Works

WebP offers both lossy and lossless modes. Lossy WebP is based on the VP8 video codec's intra-frame compression — it uses a similar block-based DCT approach to JPG but with more sophisticated prediction and entropy coding, achieving roughly 25–35% smaller files than JPG at equivalent quality. The visual quality profile of lossy WebP also tends to be better than JPG — fewer ringing artifacts around sharp edges.

Lossless WebP uses a different algorithm called WebP Lossless, which applies more sophisticated spatial prediction than PNG's row-filter approach, plus a transform-based compression stage. The result is files approximately 26% smaller than equivalent PNG while perfectly preserving every pixel. WebP also supports animation (animated WebP) and alpha transparency in both lossy and lossless modes.

Practical Tips to Reduce Image File Size

📸
Use JPG quality 75–85 for photos

Quality 80 typically cuts a photo's file size by 60–70% versus quality 100 with no visible difference. Going below 70 starts to introduce noticeable artifacts. The sweet spot is 75–85 for most use cases.

🌐
Switch web images to WebP

WebP at quality 80 produces files 25–35% smaller than JPG at the same quality. Since all modern browsers support WebP, switching your web images to WebP is one of the highest-impact performance improvements you can make.

📐
Resize before compressing

A 4000×3000px image displayed at 800×600px on screen wastes bandwidth. Resize the image to the maximum display size before compressing. This is often the single biggest file size reduction available — dimensions matter more than compression settings.

🔄
Never re-save JPGs repeatedly

Each time you open and re-save a JPG, another round of lossy compression is applied on top of existing compression — causing cumulative generation loss. Always keep master files in PNG format and export to JPG only as a final delivery step.

🖼️
Use PNG for graphics, not photos

PNG's lossless compression works well for graphics with flat colors but compresses photos poorly. A photograph saved as PNG is typically 3–5x larger than the same photo as JPG. Only use PNG for photos when you need to preserve absolute quality for further editing.

📊
Strip metadata from production images

Photos contain EXIF metadata — camera settings, GPS coordinates, timestamps — that can add 30–100KB to a file. Removing metadata before publishing web images is a free size reduction with no visual impact. ImgSwift removes metadata automatically when you compress.

Frequently Asked Questions

What is the difference between lossy and lossless compression?

Lossy compression permanently discards some image data to achieve smaller file sizes — JPG and WebP (in lossy mode) use this approach. Lossless compression reduces file size without discarding any data, so the image can be perfectly reconstructed — PNG uses lossless compression. Lossy files are smaller but cannot be restored to the original; lossless files are larger but preserve every pixel exactly.

Does compressing an image reduce quality?

It depends on the method. Lossy compression (JPG, lossy WebP) permanently removes some image data, which reduces quality — the degree of quality loss depends on the compression level. Lossless compression (PNG, lossless WebP) reduces file size without any quality loss at all. ImgSwift lets you adjust the quality level when compressing, so you can find the right balance for your needs.

What is the best way to compress images without losing quality?

To reduce file size without visible quality loss, use WebP format at quality 80–85 for photos, or PNG with lossless compression for graphics. For JPG images, quality settings of 75–85 typically cut file size by 60–70% with no perceptible difference. ImgSwift's browser-based compression lets you preview results before downloading.

Why do JPG files get worse quality each time you save them?

JPG uses lossy compression, which discards some data every time the file is saved. Each save applies another round of compression on top of the already-compressed data, causing cumulative quality degradation — called generation loss. To avoid it, keep master files in PNG format and only convert to JPG as a final export step — never edit and re-save the same JPG repeatedly.

How much can I compress an image before quality suffers?

For JPG, quality settings of 75–85% produce files 60–70% smaller than uncompressed with no visible quality difference to most viewers. Below 60% quality, compression artifacts become clearly visible. For WebP, quality 75–80 is typically the sweet spot. For lossless PNG, all compression levels produce identical image quality — only file size varies.

⚡ Try it yourself — compress an image for free

ImgSwift compresses JPG, PNG, and WebP images directly in your browser. No file uploads, no server, no signup. Your images stay on your device.

Open Image Compressor

Related Tools & Articles