Image Compressor

Image compression is the single highest-leverage optimization for almost any website, email, or document. A typical phone photo straight out of the camera weighs 4–8 MB, and that's wildly excessive for anything except printing or archival storage. Cutting that down to 300–500 KB at quality 80 produces a file that's essentially indistinguishable to the eye but loads five to twenty times faster over a cellular connection. Multiply that by the number of images on a typical blog post or product listing and the cumulative effect on page speed is dramatic.

The compressor exposes a single quality slider because that's the variable that matters. JPG and WebP are lossy formats: they work by discarding visual information the human eye is unlikely to notice — high-frequency detail, subtle color shifts, smooth gradients that can be approximated by simpler curves. The quality value controls how aggressively the encoder discards. At 100 you get a near-perfect copy of the source. At 80 you typically save 50–70% of the file size with no visible difference. Below 50, you start to see artifacts: blocky edges in flat regions, color banding in skies, ringing around hard contrast boundaries.

PNG behaves differently because PNG is lossless. PNG compression rearranges and packs pixel data without throwing any of it away, which is great for screenshots, line art, and anything with crisp edges or transparency — but it's a poor fit for photographs. If you compress a photo as PNG, the result will usually be much larger than the same photo at JPG quality 85, with no advantage. For photos with transparency, WebP is almost always the right choice instead: it supports an alpha channel and compresses photographic content the way JPG does.

Underneath, the compressor uses a Web Worker so the actual encoding runs on a background thread. That means the page stays responsive even when you queue dozens of files. You can scroll, hover over previews, and remove or reorder items while the worker chews through the queue. Each file gets a per-image progress indicator and a size badge showing exactly how many kilobytes you've saved, which is useful when you're trying to hit a specific upload limit or page-weight budget.

The hover-to-compare preview is worth using. After processing, hover over any result and you'll see the original underneath, full-resolution, full-quality, side-by-side at the same dimensions. This is the only honest way to evaluate a quality setting. Many people pick a number, look at the file size badge, and ship it — but if you spend ten seconds comparing at quality 70 versus quality 80, you'll often find one is dramatically better-looking than the other and decide accordingly.