How to Compress Images Without Losing Too Much Quality

Every image on the web is a trade-off between file size and visual quality. Compress too little, and pages load slowly and eat storage; compress too much, and images turn visibly blocky or blurry. The good news is that for most photographic images, there's a wide middle ground where file size drops substantially with a change in quality that's difficult for most viewers to notice at all. Understanding how compression actually works makes it much easier to find that middle ground quickly instead of guessing.

Lossy vs. Lossless Compression

Image compression falls into two broad categories.

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. This is ideal when exact pixel accuracy matters (screenshots, logos, diagrams with sharp edges and flat colors), but it generally can't shrink photographic images nearly as much as lossy compression can, because photos have far more visual complexity for a lossless algorithm to work with.

Lossy compression discards some image data permanently, choosing what to discard based on models of human visual perception, details that are hard for the eye to notice get removed first. JPEG and WebP (in its lossy mode) both use lossy compression. This is what makes dramatic size reductions possible for photographic content, because it doesn't need to preserve information that most viewers won't consciously perceive as missing.

How Quality Settings Work

When a tool asks you to choose a "quality" from 0–100 for JPEG or WebP export, that number controls how aggressively the lossy algorithm discards information. At quality 100, very little is discarded and the file stays large. As quality drops, the algorithm discards progressively more detail, starting with information that's least perceptible (fine texture, subtle color gradients) and, at very low settings, moving on to information that becomes obviously visible as blocky artifacts, especially around sharp edges and areas of high contrast.

The relationship between quality setting and perceived visual difference is not linear. Dropping from quality 100 to quality 85 often produces a barely perceptible visual change but a substantial file size reduction, because the highest-quality range spends a lot of data preserving detail most people can't consciously see. Dropping further, from 85 to 50, continues to reduce file size but the visual degradation becomes more noticeable, especially in areas with smooth gradients (skies, skin tones) where compression artifacts show up as visible blocky bands.

A practical starting point: for photographic images, quality settings in the 75–85 range usually offer a strong balance, meaningfully smaller than the original with a visual difference most viewers won't notice unless they're specifically comparing side by side.

What Compresses Well, and What Doesn't

Not all images respond to compression the same way:

• Photographs with natural detail, smooth gradients, and varied color compress very well under lossy algorithms, because there's a lot of information the algorithm can discard without a viewer noticing.
• Screenshots and UI graphics with sharp edges, flat color regions, and text compress poorly under lossy algorithms, JPEG in particular tends to introduce visible ringing artifacts around sharp edges and text, since the algorithm is optimized for photographic content, not flat graphics. These usually compress better with a lossless format like PNG.
• Images with a lot of fine texture (foliage, fabric, gravel) compress less predictably, the fine detail that makes the texture "read" as realistic is exactly the kind of information lossy compression tends to discard first, so overly aggressive settings can turn texture into visible mush faster than smoother images.

A Practical Compression Workflow

1. Start with the original, uncompressed (or minimally compressed) source if you have it. Compressing an already-compressed JPEG repeatedly ("generation loss") compounds quality loss unnecessarily.
2. Pick a format based on content type: photographs generally suit JPEG or WebP, graphics with flat colors and sharp edges suit PNG, unless file size for those is a major concern, in which case WebP's lossless mode is worth trying.
3. Start around quality 80 for lossy formats and adjust from there.
4. Compare before/after file sizes, not just the visual preview, a tool that shows the percentage reduction makes it obvious whether a quality adjustment is actually worth the trade-off.
5. Zoom in on detail-heavy areas (faces, text, fine texture) when checking quality, since compression artifacts are usually most visible there first, even when the image looks fine at a glance.
6. Resize before compressing if the image is larger than it needs to be for its intended use, a 4000px-wide photo displayed at 800px wide is wasting far more space on unnecessary resolution than any quality setting will save. Our Image Resizer handles this half of the equation.

Why Client-Side Compression Makes Sense

Image compression is a computationally straightforward operation that modern browsers can perform quickly using the HTML canvas API, there's no inherent need to upload an image to a server just to re-encode it at a different quality level. Doing it in the browser has two concrete advantages: it's typically faster, since there's no upload/download round trip, and it's more private, since the image never leaves your device. This matters more than it might seem, screenshots, personal photos, and internal documents are all commonly run through compression tools, and not having to trust a third-party server with that content is a meaningful benefit.

Try It

Our Image Compressor runs entirely in your browser using the canvas API: drag in a JPEG, PNG, or WebP image, adjust the quality slider, and see the before/after size comparison update instantly. Nothing is uploaded anywhere. For choosing between formats in the first place, see our companion article on JPEG vs. PNG vs. WebP.