How to Compress Images Without Losing Quality

"Compress" gets treated like one lever, but there are really two: how many pixels the image has, and how much detail you throw away per pixel. Most bloated images have a pixel-count problem, not a quality-setting problem.

That distinction matters because the two are not equally costly. Reducing pixel count is close to free — if an image is displayed at 800px, the pixels beyond that were never visible in the first place. Reducing quality actually discards detail you might have wanted. Do the free one first.

Resize before you compress

A photo straight off a phone is often 4000 × 3000 pixels or larger — several times bigger than it will ever display on a web page. Compressing that at high quality still leaves you with a multi-megabyte file, because you are preserving detail nobody will see at the display size. Resize to the dimensions the image actually needs first, then compress.

Here is what that looks like measured. Same screenshot, same encoder, same quality setting of 85 — the only variable is the width.

Note the oddity in the PNG column: resizing to 1200px produced a larger file than the 1600px original. That is not a typo. Downscaling blends neighbouring pixels into new intermediate colours, and PNG's compression relies on long runs of identical colour. It is a good argument for not shipping resized PNGs at all.

Quality settings: 80–85 is the sweet spot

For JPG and WEBP, quality below 60 starts showing visible blocky artifacts, especially around text and hard edges. Above 90 you are paying real file size for detail that is genuinely hard to see on a screen. Most photos hold up fine at 80–85.

• 90 and above: reserve for images people will zoom into, or print-ready assets
• 80–85: the standard for hero images, product photos, and anything prominent
• 70–75: aggressive but usually fine for thumbnails and background images
• Below 60: visible artifacting on text and edges — only for images displayed very small

One caveat about quality numbers: they are not comparable across formats. JPG quality 85 and WEBP quality 85 are different encoders making different decisions, and in the table above they produced 161.5 KB and 44.8 KB from the same source. Do not assume matching the number matches the result.

Switching format often beats compressing harder

If an image is already a reasonably compressed JPG, pushing the quality slider lower gets ugly fast. Converting it to WEBP at the same visual quality usually saves more than another 10 points of JPG quality would, and without the artifacts. Google's corpus study puts WEBP 25–34% below equivalent JPG; on flat-colour images like screenshots the gap is far wider.

Format is the first thing to check when an image feels heavy, not the last.

Do not recompress an already-compressed JPG repeatedly

Every JPG save is lossy. Open a JPG, edit it, save as JPG again, and you are compounding artifacts on top of artifacts — generation loss. If an image is going to be edited more than once, keep a PNG or a source file as your working copy and export to JPG only as the final step.

Worth being precise about this, because it gets overstated: re-saving a JPG at the same quality with the same encoder is nearly idempotent, since the data is already quantised on the same grid. The damage comes from editing between saves, or from changing quality or dimensions. That is the common case, which is why the advice holds.

Strip metadata you do not need

Photos from phones and cameras carry EXIF data — camera model, GPS coordinates, timestamps — that adds a few kilobytes. The kilobytes barely matter. The GPS coordinates do: they pin the location the photo was taken, which for anything shot at home is worth removing before you publish.

Any tool that re-encodes through a canvas, including every image tool on this site, drops metadata as a side effect. If you need to inspect or selectively edit tags rather than discard them all, that is a different job.

Where the artifacts show up first

When you are checking whether a compressed image still holds up, three places give it away before anything else does.

• Text and hard edges — halos and fuzz around letters, the first thing to fail
• Flat gradients like a clear sky — banding, where a smooth transition becomes visible steps
• Skin tones — blotchy patches, because the eye is unusually sensitive to them

Rule of thumb: resize to the size you will actually display, convert to WEBP, set quality to 85, and only go lower if the file still feels heavy.