How Image Compression Works — Lossy vs Lossless Explained

The basic idea

An image is a grid of pixels. Each pixel stores colour data. An uncompressed 4000 by 3000 photo contains 12 million pixels — uncompressed, around 100 MB. Compression finds patterns and redundancy in that data and represents it more efficiently.

Lossy compression

Lossy compression permanently discards some image data to achieve smaller file sizes. JPG uses lossy compression — it divides the image into 8x8 blocks, applies a mathematical transform separating broad shapes from fine detail, then discards high-frequency detail based on the quality setting.

Key rule: never re-save a JPG as JPG. Each re-save applies another round of lossy compression, degrading quality further. Always keep your original.

Lossless compression

Lossless compression reduces file size without discarding any data. PNG uses DEFLATE compression — it finds repeated patterns and stores them more efficiently without losing information. Lossless works best for images with large flat-colour areas.

Choosing the right method

Photographs: JPG or WebP lossy. Logos and icons: PNG or SVG. Screenshots: PNG for sharp edges. Web images: WebP for best compression ratio.

Quality settings

Quality 90 keeps most detail, larger file. Quality 60 discards more detail, smaller file, may show artefacts. Practical web starting points: 80 to 85 for photos, 70 to 75 for thumbnails.

FAQ

Does compressing an image change its dimensions? No. Compression only affects the data representation. Width and height remain the same.

What is the difference between compress and resize? Compression reduces file size without changing dimensions. Resizing changes the dimensions.