How to compress images without visibly losing quality

A modern phone produces photographs of six or eight megabytes. Almost nothing you do with those photos requires that much data. A web page displays them at a fraction of the resolution; an email attachment does not need it; a marketplace listing will resize it anyway.

That excess is invisible to viewers and expensive to everyone: slow uploads, rejected attachments, and pages that crawl on a phone connection.

Why compression can be nearly invisible

JPG compression works by discarding information human vision is bad at noticing. Our eyes are highly sensitive to brightness detail and comparatively insensitive to fine colour variation, so the encoder keeps the former and aggressively simplifies the latter.

This is why an 80% quality setting can remove most of a file's size while looking identical at normal viewing distance. You are not throwing away detail you would have seen — you are throwing away detail you were never going to perceive.

Push too far and it becomes visible. Below roughly 60%, blocky artefacts appear in smooth gradients like skies, and edges start to show halos. The art is finding the point just before that begins.

How to compress an image well

1. Crop first, removing anything you do not need.
2. Resize to the dimensions you will actually display.
3. Then compress, choosing a quality level around 80%.
4. Compare the preview against the original at full zoom.
5. Step the quality back up if you can see degradation.

The order matters enormously and is the single most useful thing in this article. Compressing a 4000-pixel photo that will be displayed at 800 pixels is optimising the wrong thing — you are carefully compressing five times more pixels than anyone will ever see.

Resizing before compressing usually saves more than any quality setting can, and it costs nothing visually.

Choose the right format first

Format choice affects file size more than any slider. The three common options solve genuinely different problems.

• JPG — excellent for photographs. Cannot store transparency, and smears sharp edges like text.
• PNG — lossless and supports transparency. Right for screenshots, logos and diagrams; badly wrong for photographs, where it produces enormous files.
• WebP — handles both jobs at roughly 25-35% smaller than either, and is supported by every current browser.

The most common expensive mistake is saving photographs as PNG. A photo stored as PNG is frequently five to ten times larger than it needs to be, because PNG cannot compress continuous tone efficiently. Converting those to JPG or WebP is often the single biggest saving available.

The opposite mistake is saving screenshots as JPG, which puts visible halos around text and UI edges. Screenshots belong in PNG.

Why this matters for websites

Images are typically the largest thing on any web page, and page weight directly affects both how many visitors stay and how the page ranks in search. Compressing images before uploading is the most effective performance improvement available to most sites, and it is free.

For web use, one extra consideration: export at twice the display size to stay sharp on high-density phone and laptop screens. An image displayed at 800 pixels wide should be exported at around 1600, then compressed. This sounds contradictory but is not — a compressed 1600px image is usually smaller than an uncompressed 800px one, and looks better on a modern display.

Things worth remembering

Compression is one-way. The discarded detail cannot be recovered, so always keep your originals somewhere. This matters most for photographs you may want to print at size later.

Repeated compression accumulates damage. Each JPG-to-JPG round trip discards a little more, so always work from your original rather than from a file you compressed last week.

And check the result at full zoom before publishing, particularly for images with fine detail or text. Ten seconds of checking prevents the awkward discovery that your hero image has visible blocking in the sky.