How Image Compression Works: JPEG, PNG, and WebP Explained

If you have ever compressed an image and wondered why JPEG gets blurry at low quality settings, or why a PNG of a simple logo is larger than a photograph in JPEG format, the answer lies in how each format approaches the same basic problem: storing pixel data as efficiently as possible.

This guide explains how the three most common web image formats — JPEG, PNG, and WebP — handle compression, and when to use each one.

What Is Image Compression?

An uncompressed image stores the exact colour value of every single pixel. A 4000 × 3000 pixel photograph contains 12 million pixels. If each pixel stores three colour channels (red, green, blue) at 8 bits each, that is 36 megabytes of raw data for a single photo.

Compression reduces that file size by finding smarter ways to represent the same visual information. There are two fundamental approaches:

• Lossless compression — The original data can be perfectly reconstructed. No information is discarded. Every pixel is exactly the same before and after compression.
• Lossy compression — Some information is discarded in ways that the human eye is unlikely to notice. The file is smaller, but the original data cannot be perfectly recovered.

JPEG: Lossy Compression for Photographs

JPEG (Joint Photographic Experts Group) was designed specifically for photographs and uses lossy compression. The algorithm works by exploiting a property of human vision: we are much better at detecting differences in brightness than differences in colour.

JPEG breaks an image into 8×8 pixel blocks and applies a mathematical operation called a Discrete Cosine Transform (DCT) to each block. This converts the pixel data into frequency components — essentially separating coarse detail from fine detail. The algorithm then discards the fine-detail (high-frequency) components first, because human eyes are least sensitive to them.

The "quality" slider in a compression tool controls how aggressively the fine detail is discarded. At high quality (90–100), almost nothing is thrown away and the result is nearly indistinguishable from the original. At low quality (below 40), the 8×8 blocks become visible — that is the characteristic JPEG "blocky" or "muddy" artefact you see when a JPEG is over-compressed.

PNG: Lossless Compression for Sharp Edges

PNG (Portable Network Graphics) uses lossless compression. It applies a two-step process: first a filter that predicts each pixel's value based on its neighbours, then DEFLATE compression (the same algorithm used in ZIP files) to reduce the resulting data.

Because PNG is lossless, it can perfectly reconstruct every pixel. This makes it the right format for images that contain text, sharp lines, or large areas of flat colour — the kinds of images where JPEG's blurring would be visually obvious.

PNG also supports full transparency (an alpha channel), which JPEG does not. This is why logos, icons, and illustrations with transparent backgrounds are almost always saved as PNG.

The tradeoff is that PNG is not efficient for photographs. The lossless approach means the file size can be much larger than an equivalent JPEG, because photographs contain complex colour variations that compress poorly with lossless methods.

WebP: A Modern Alternative to Both

WebP was developed by Google and introduced in 2010. It supports both lossy and lossless compression in a single format, and generally achieves better compression ratios than both JPEG and PNG for equivalent visual quality.

For lossy compression, WebP uses a similar principle to JPEG but with a more modern algorithm (based on VP8 video codec technology) that handles block boundaries more gracefully, reducing the characteristic JPEG blocking artefacts at the same file sizes.

For lossless compression, WebP typically produces files 25–35% smaller than equivalent PNGs, according to Google's benchmarks.

WebP also supports transparency (like PNG) and animation (like GIF), making it a versatile single format for the web. The main reason WebP has not completely replaced JPEG and PNG is compatibility: older software and some email clients still do not support WebP natively, though all major browsers have supported it since 2020.

Format Comparison at a Glance

Practical Tips for Web Images

• For photographs on a website, use WebP at quality 75–85. This gives excellent visual quality at a fraction of the file size of JPEG.
• For logos and icons, use PNG or WebP lossless. Avoid JPEG, which will blur the sharp edges.
• For hero images (large background photographs), compress aggressively — quality 60–75 is often acceptable and can cut file size by 70% or more.
• For thumbnails, lower quality settings (50–70) are usually fine since the images are viewed small.
• Resize before compressing. A 4000px wide photo served at 800px width wastes bandwidth no matter how well compressed it is. Scale the image to its display dimensions first.

How Compression Affects Page Load Speed

Image files are typically the largest assets on a web page. Unoptimised images are one of the most common causes of slow page loads, and page speed directly affects both user experience and search engine rankings. A single uncompressed photograph can be 5–10 MB; the same image compressed at 80% JPEG quality might be 200–400 KB — a 90% reduction with no visible quality difference on screen.

Web performance guidelines recommend keeping individual images under 200 KB where possible, and total page weight under 2 MB. For most websites, achieving this requires deliberate image compression as part of the publishing workflow.

Compressing Images Without Uploading Them

Many image compression tools require you to upload your files to a server. This works, but it means your images — which may include private photos, client work, or unreleased designs — pass through a third party's infrastructure.

Browser-based compressors like PixLite compress images entirely within your browser. The original file never leaves your device. This is particularly useful for compressing sensitive photographs, confidential design assets, or personal images you would prefer not to upload to an unknown server.

The technical mechanism is straightforward: JavaScript reads the image file into memory, the browser's Canvas API re-encodes it at the chosen quality level, and the result is made available for download — all locally, with no network request for the image data.