How to Compress Images Without Losing Quality

What “losing quality” actually means

Quality loss in image compression isn't binary. It's a spectrum. At one end, you have a near-perfect copy of the original. At the other end, you have a blocky mess that looks like it was rendered on a Game Boy. The point is that most images compress well into the lower-half of that spectrum before quality loss becomes visible to the average person.

Your eyes are good at seeing faces, text and sharp edges. They're less good at noticing subtle color shifts in a blue sky or slight softness in a patch of grass. This is exactly what compression algorithms exploit. They throw away information your eye won't miss, and keep the stuff it will.

The technical term for this approach is “lossy compression”. JPG and WebP use it. PNG does not — PNG is lossless, which is why PNG files are often bigger.

The quality number actually means something

Most compression tools give you a quality slider from 0 to 100. Here's a rough guide to what those numbers actually do:

• 90-100% — Barely any compression. File size reduction is minimal. Useful for archiving or printing.
• 75-90% — The sweet spot for web. File sizes drop dramatically, quality loss is nearly invisible to the eye.
• 60-75% — Aggressive. You might start to see artefacts in high-detail areas, but social media thumbnails are usually fine here.
• Below 60% — Visible degradation. Fine for tiny previews. Bad for anything displayed at full size.

For most website images, 80% is the number. Run with it until you have a specific reason to deviate.

Format matters as much as quality setting

Two images at the same “quality 80%” setting will have different file sizes if they use different formats. WebP typically produces files 25-35% smaller than JPG at equivalent visual quality. PNG will produce lossless files that are often larger than both.

If you have a JPG photo on your website and you want to compress it, the best move is often to convert it to WebP first, then apply compression. You'll end up with a much smaller file than if you just squashed the JPG further.

PNG is different. Since it's lossless, “compressing” a PNG means optimising the encoding, not throwing away data. You can reduce file size this way, but not nearly as aggressively as with JPG or WebP. If a PNG needs to be much smaller, the real answer is often to convert it to WebP.

How to compress without visible quality loss: the practical steps

Here's the actual workflow that works for most people.

Step 1: Start with the right format. Photos should be JPG or WebP. Graphics, logos, screenshots with text should be PNG or WebP. Animated content should be GIF or WebP.

Step 2:Resize before compressing. If you're displaying an image at 800px wide on your website, don't compress a 4000px wide version of it — resize it first. Fewer pixels means a smaller file regardless of compression.

Step 3: Use 80% quality for web images. This removes the redundant data without touching anything your eye cares about. Compare the before and after at actual screen size — not zoomed in — before deciding if quality is acceptable.

Step 4: Check the result at actual display size. Zooming in to pixel-peep a compressed image is how you drive yourself crazy. Your users will see the image at normal screen zoom. Look at it the way they will.

When compression genuinely hurts quality

There are cases where compression does cause real, visible problems. Text in images is one. JPG compression introduces blocky artefacts around high-contrast edges — exactly the kind you find around letters. If you have an image with text overlay, either use PNG, use WebP at high quality, or accept that the text will look slightly soft.

Fine repeating patterns are another weak spot. Fabrics, grids, detailed illustrations — these can develop “ringing” artefacts at lower quality settings. If your image has lots of fine detail, test at 85% instead of 80%.

And obviously, if you're preparing images for print, don't use lossy compression at all. Print requires much higher resolution and quality than screen viewing. Keep your print files as high-quality originals.

How much can you actually save?

A lot more than you might expect. A typical uncompressed or lightly compressed photo from a phone camera might be 5-8MB. The same photo at 80% quality, resized to web dimensions, might be 200-400KB. That's a 15-25x reduction. With WebP instead of JPG, you can push that even further.

For a website with 20 product images, the difference between unoptimised and properly compressed could be 80MB vs 4MB on the page. That's the difference between a slow, frustrating experience and a fast, smooth one.

Frequently asked questions

What quality setting should I use for web images?

75-85% covers most use cases. At 80%, you'll typically see file sizes drop by 50-70% with no visible quality difference when viewed at normal screen zoom.

Does JPG or WebP compress better?

WebP compresses 25-35% better than JPG at equivalent visual quality. For websites, WebP is generally the better choice where browser support isn't a concern — and since it's supported in all modern browsers, it rarely is.

Can you compress a PNG without losing quality?

PNG uses lossless compression, so it can be optimized without throwing away any image data. But file sizes won't shrink as dramatically as JPG. For web use, converting to WebP is often a better approach than trying to squeeze a PNG.