Lossy vs lossless image compression — picking the right one for the web

Every image compressor asks you to pick a quality level or a format, and most people just drag the slider until the preview looks fine and move on. That works, but understanding what's actually happening underneath makes it much faster to get a good result on the first try instead of the fifth.

Lossless: smaller file, identical pixels

Lossless compression finds more efficient ways to describe the exact same image data — it removes redundancy without discarding any information. Decompress a losslessly compressed image and you get back pixel-for-pixel the same picture you started with. PNG is the common lossless format for the web; it works by spotting patterns (repeated colors, flat regions, gradual gradients) and encoding them more compactly than storing every pixel's exact value individually.

The catch: lossless compression has a ceiling. Once the redundancy is squeezed out, the file can't get meaningfully smaller without throwing information away — and photographs, which have constant subtle variation in every pixel, have very little redundancy to begin with. This is why a PNG photo is often several times larger than the same photo saved as a JPEG.

Lossy: smaller file, some information discarded — on purpose

Lossy compression (JPEG is the classic example, WEBP is a newer one) deliberately throws away information the human eye is less likely to notice. It doesn't do this randomly — it's built around how vision actually works. We're much more sensitive to changes in brightness than in color, so lossy compression reduces color detail more aggressively than brightness detail. We also don't notice fine detail loss in busy, high-frequency areas of an image nearly as much as in smooth ones, so compression targets texture-heavy regions harder than flat ones.

This is why the same "80% quality" JPEG setting can look flawless on a busy photo of foliage and show visible blocky artifacts on a smooth photo of a clear sky — the algorithm is spending its "error budget" the same way in both cases, but a flat sky has nowhere to hide the discarded information.

When to use which

Use lossless (PNG) for: logos, icons, screenshots with text, illustrations with flat colors and sharp edges, and anything that needs a transparent background. These images have exactly the kind of redundancy lossless compression is good at removing, and they're the images where visible artifacts (a slightly fuzzy logo edge, banding on a flat color) are most noticeable.

Use lossy (JPEG/WEBP) for: photographs, and anything with continuous tone, gradients, or natural texture — skin, landscapes, fabric. The eye tolerates the kind of information loss lossy compression introduces much better here, and the file size difference is large enough to matter for page load speed.

Why quality percentage isn't a universal number

An "80% quality" setting on one image and the same setting on another can produce very different visible results, because quality settings control how much error the algorithm is allowed to introduce, not a fixed visual outcome — a photo with lots of fine detail can absorb more compression before it looks degraded than a photo with large smooth areas. This is why we recommend comparing the compressed result against the original at actual size rather than trusting a percentage number blindly; what looks acceptable depends entirely on the image.

Compress your own images with the Image Compressor — everything runs in your browser, so you can compare quality settings side by side without waiting on an upload each time.