What Is Image Compression and How Does It Work?
By ImgForge Team — Published November 5, 2025
Every image on the web has been compressed in some way. Understanding how compression works helps you make smarter decisions about file formats, quality settings, and page load times.
What Is Image Compression?
Image compression is the process of reducing the number of bytes needed to store or transmit an image. Uncompressed raster images are enormous — a 4000x3000 pixel photo with 24-bit color takes up roughly 34 MB of raw data. Compression algorithms analyze the pixel data and find ways to represent the same (or nearly the same) visual information using far fewer bytes.
The two fundamental approaches are lossy compression, which permanently discards some data to achieve smaller file sizes, and lossless compression, which reduces size without losing any information. Choosing between them depends on your use case.
Lossy Compression
Lossy compression permanently removes image data that the human eye is unlikely to notice. The algorithm exploits known limitations of human vision — we are much more sensitive to changes in brightness than color, for example — to discard information selectively.
The result is a significantly smaller file, but re-saving a lossy image repeatedly causes quality to degrade further each time. Formats that use lossy compression include:
- JPEG — the most widely used lossy format, ideal for photographs
- WebP (lossy mode) — delivers JPEG-quality images at roughly 25-35% smaller file sizes
- AVIF (lossy mode) — the newest standard, offering even better compression than WebP
Lossless Compression
Lossless compression reduces file size without discarding any pixel data. Every bit of the original image can be perfectly reconstructed from the compressed file. This is essential for images that need to remain editable, contain sharp text or logos, or will be processed further in a pipeline.
Lossless compression is generally less aggressive than lossy — file sizes are larger, but quality is guaranteed. Formats that use lossless compression include:
- PNG — the go-to lossless format for the web, using the Deflate algorithm
- WebP (lossless mode) — lossless WebP files are typically 26% smaller than equivalent PNGs
- AVIF (lossless mode) — lossless AVIF can match or beat WebP lossless for complex images
How JPEG Compression Works
JPEG compression is one of the most sophisticated lossy algorithms ever designed for general use. Developed in the early 1990s by the Joint Photographic Experts Group, it remains the dominant format for photographic content on the web more than three decades later.
The JPEG pipeline involves several steps: color space conversion from RGB to YCbCr (separating brightness from color), chroma subsampling (reducing color resolution since humans see it less clearly), and the Discrete Cosine Transform.
The Discrete Cosine Transform (DCT)
The DCT is the mathematical core of JPEG. The image is divided into 8x8 pixel blocks, and the DCT transforms each block from a grid of pixel values into a grid of frequency coefficients. Low-frequency coefficients represent broad areas of similar color; high-frequency coefficients represent fine details and sharp edges.
A quantization step then divides each coefficient by a value from a quantization table — controlled by the quality setting you choose. High-frequency coefficients are quantized more aggressively, rounding small values to zero. This is where data loss actually occurs. Finally, the quantized coefficients are entropy-coded using Huffman coding, which losslessly compresses the resulting sparse data. The quality slider in any JPEG encoder directly controls how aggressively this quantization is applied.
How PNG Compression Works
PNG uses a two-stage lossless process. First, a filter is applied row by row to the raw pixel data. Filters like Sub, Up, Average, and Paeth predict each pixel's value based on its neighbors and store only the difference (the delta). These deltas tend to be much smaller numbers than the raw pixel values and compress more efficiently.
The filtered data is then compressed with the Deflate algorithm, a combination of LZ77 (dictionary-based) compression and Huffman coding. Because no data is discarded, PNG files are significantly larger than JPEG files for photographs — but they are the right choice whenever perfect fidelity is required.
Modern Formats: WebP and AVIF
The web has moved well beyond JPEG and PNG. Two modern formats now dominate the conversation for new projects:
WebP
Developed by Google and released in 2010, WebP supports both lossy and lossless compression, transparency (alpha channel), and animation. Its lossy mode is based on the VP8 video codec and typically produces files 25-35% smaller than JPEG at equivalent visual quality. Lossless WebP files are around 26% smaller than equivalent PNGs. Browser support is now universal across all modern browsers.
AVIF
AVIF (AV1 Image File Format) is derived from the AV1 video codec and offers the best compression ratios available today. At equivalent quality, AVIF files are typically 20-50% smaller than JPEG and 10-20% smaller than WebP. AVIF also supports HDR (high dynamic range), wide color gamut, and 10/12-bit color depth. The main trade-off is slower encoding speed compared to WebP or JPEG.
Format Compression Comparison
The table below summarizes typical compression ratios relative to an uncompressed baseline and the best use cases for each format:
| Format | Type | Typical Ratio | Best For |
|---|---|---|---|
| JPEG | Lossy | 10:1 – 20:1 | Photographs, complex imagery |
| PNG | Lossless | 2:1 – 4:1 | Graphics, logos, screenshots, transparency |
| WebP | Both | 15:1 – 25:1 | Web images replacing JPEG and PNG |
| AVIF | Both | 20:1 – 40:1 | High-quality web images, HDR content |
Practical Tips for Web Developers
Knowing the theory is useful, but these practical guidelines will make the biggest difference to your site's performance:
- Use AVIF as your primary format with a WebP fallback using the HTML picture element for broad browser coverage
- For photographs, a JPEG quality of 75-85 is generally indistinguishable from higher settings at a fraction of the file size
- Never re-save a JPEG from another JPEG — always compress from the original lossless source to avoid generation loss
- Use lossless formats for images with text, sharp edges, logos, or anything that will be edited further
- Resize images to their display dimensions before compressing — serving a 4000px wide image displayed at 800px wastes bandwidth regardless of compression
Ready to compress your images? Read our detailed guides on the JPG format, WebP format, and AVIF format to choose the right format for your project.