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

Every image on the web is a trade-off between visual quality and file size. Choose the wrong format or quality setting, and you either bloat page load times with unnecessarily large files, or degrade visual quality until compression artifacts become visible. Understanding how compression actually works — not just which button to click — lets you make that trade-off deliberately rather than by guesswork.

Lossy vs Lossless Compression

Lossless compression reduces file size without discarding any image data — the decompressed image is pixel-for-pixel identical to the original. PNG uses lossless compression, which is why it's the standard choice for screenshots, logos, and graphics with sharp edges and text, where any degradation would be immediately visible. Lossy compression achieves much greater size reduction by selectively discarding information the human eye is less likely to notice — subtle colour gradations, high-frequency detail in busy areas of a photo. JPEG is the classic lossy format, and this is why a JPEG at 70% quality can be 80-90% smaller than the same image losslessly compressed, at the cost of some quality loss that's often imperceptible at normal viewing sizes.

How JPEG Compression Actually Works

JPEG compression is based on the Discrete Cosine Transform (DCT), a mathematical technique that converts an image from the spatial domain (pixel values) into the frequency domain (patterns of how quickly colour and brightness change across the image). The image is divided into 8×8 pixel blocks, each transformed via DCT, and the algorithm then discards high-frequency components more aggressively than low-frequency ones — because human vision is naturally less sensitive to fine, high-frequency detail than to broad, low-frequency shapes and gradients. This is why JPEG excels at photographs (which have lots of smooth gradients) but performs poorly on sharp-edged graphics like text or line art, where the harsh contrast produces visible "ringing" artifacts around edges after compression.

Why PNG Is Different

PNG uses DEFLATE, the same lossless compression algorithm family used in ZIP files, applied to pixel data after a prediction filtering step that exploits the similarity between neighbouring pixels. Because it's lossless, PNG file size depends heavily on image complexity — a simple logo with large flat colour areas compresses extremely well, while a detailed photograph compresses poorly compared to JPEG, often resulting in files several times larger for equivalent visual content. PNG also supports an alpha (transparency) channel, which JPEG does not — this is the primary reason PNG remains essential for logos, icons, and any image requiring a transparent background.

WebP: The Modern Alternative

Developed by Google and now supported by all major browsers, WebP offers both lossy and lossless modes in a single format, typically achieving 25-35% smaller file sizes than JPEG at equivalent visual quality, and smaller than PNG for images that need transparency. WebP's lossy mode uses a compression technique derived from the VP8 video codec, exploiting similar redundancy patterns to modern video compression. The main historical drawback — inconsistent browser support — is now largely resolved; WebP has been supported in Chrome, Firefox, Safari, and Edge since 2020, making it a safe default choice for most modern websites.

Choosing the Right Format

Quality Settings: Finding the Sweet Spot

JPEG and WebP quality is typically expressed as a percentage or a 0-100 scale. The relationship between quality setting and perceived visual difference is not linear — dropping from 100% to 90% quality often produces a barely noticeable difference while cutting file size substantially, because the highest quality settings preserve redundant information the eye doesn't need. Below roughly 50% quality, artifacts become increasingly visible: blocky patterns in flat colour areas, blurring of fine detail, and colour banding in gradients. For most web content, 70-85% quality offers the best balance — visually indistinguishable from the original at normal viewing distance, while achieving significant file size reduction.

Resizing Matters More Than You Think

A common mistake is uploading a large image (e.g., a 4000×3000 pixel photo straight from a camera) and relying on CSS or HTML width/height attributes to display it smaller. The browser still downloads the full-resolution file even though it displays a shrunk version — wasting bandwidth and slowing page load. Always resize the actual image file to match its maximum display dimensions before compressing it; this single step often reduces file size more dramatically than any quality setting adjustment.

You don't need desktop software to compress images properly. Our Image Compressor runs entirely in your browser using the Canvas API — adjust quality with a live slider, resize to a maximum width, and compare before/after file sizes instantly, with nothing ever uploaded to a server.