Lossy vs Lossless Compression

Lossless compression shrinks a file and restores every pixel exactly; lossy compression discards detail to shrink it much further. For photographs on a website, lossy at a sensible quality setting is the right default — the difference is invisible to visitors and the file is often a third of the size. Lossless earns its place for screenshots, line art, logos and anything you will edit again.

The difference in one table

How lossless works

Lossless encoders find patterns and store them more efficiently: a run of 200 identical white pixels becomes "white × 200", and repeated sequences are referenced rather than repeated. Removing metadata — camera model, GPS position, editing history — is also lossless as far as pixels go, and stripping GPS data is a privacy win as well as a small saving.

Because nothing visual is removed, the savings are limited by how much redundancy the image has. Flat graphics compress superbly; photographs, full of noise and subtle gradients, barely shrink.

How lossy works

Lossy encoders exploit how vision works. They keep brightness detail and drop colour detail, which the eye resolves less sharply; they average out fine texture in busy areas, where loss is hard to see; and they quantise — round off — values according to a quality setting.

At high quality, the changes are invisible. As quality drops, artefacts appear in recognisable forms:

• Blockiness in smooth gradients such as skies.
• Ringing — halos — around sharp edges and text.
• Colour banding and smeared fine detail.

That is why text in screenshots is the first casualty of lossy compression, and why the same setting that is perfect for a landscape is wrong for a screenshot of a settings page.

Compression is not resizing

Compression reduces the bytes needed to store a given number of pixels. Resizing reduces the number of pixels. A 4000 × 3000 photo shown at 800 pixels wide carries 25 times the pixels it needs; no quality setting recovers that. Resize to the display size first, then compress — the order matters more than the choice between lossy and lossless.

Which to choose

• Photographs → lossy. JPEG quality 80–85, or WebP/AVIF at the encoder's default, is the usual sweet spot.
• Screenshots and UI captures → lossless PNG or WebP-lossless; try lossy WebP at high quality and compare at 100% zoom.
• Logos and icons → SVG if vector; otherwise lossless PNG or WebP.
• Images you will edit again → keep a lossless or original master and export lossy copies from it.
• Product photos with fine text or texture → lossy at a slightly higher quality setting, checked at full size.

Lossy, lossless — and "smart"

Many image tools now offer a single "smart" or "perceptual" mode instead of a quality slider. These measure visual difference between the original and the output and pick the strongest compression that stays below a threshold, per image. A busy photo gets compressed hard; a flat graphic with text gets compressed gently. For a site with thousands of mixed images that nobody will tune individually, that per-image decision is more useful than one global quality number.

In WordPress

WordPress itself compresses lossy: every generated JPEG size is re-encoded at a quality of 82 by default, adjustable with the wp_editor_set_quality filter, as shown in how to optimise images in WordPress. That means an image you already compressed at quality 70 is decoded and re-encoded — a second lossy pass — for each image size WordPress creates.

To avoid compounding loss:

1. Upload a high-quality original rather than a pre-compressed one.
2. Let one tool do the lossy compression — either WordPress's setting or an optimizer plugin, not both plus a desktop tool.
3. Keep originals, so a bad choice can be redone.

An optimizer plugin applies lossy or "smart" compression to every generated size and can convert to WebP or AVIF in the same pass. Imagify, for example, uses a smart compression mode rather than asking you to pick a quality number, and keeps the original as a backup. The wider criteria for choosing one are in choosing an image optimization plugin, and the format decision in WebP and AVIF in WordPress.

Common mistakes

• Using PNG for photos because "lossless is better quality". The file is several times larger and looks the same.
• Re-saving JPEGs after each small edit, adding a lossy generation every time.
• Judging compression on a thumbnail. Artefacts show at full size, on a large screen.
• Applying one quality setting to everything, so screenshots ring while photos stay heavier than they need to be.

Verify

1. Open the original and the compressed file side by side at 100% zoom and look at gradients and edges.
2. Compare file sizes: a lossy photo should be a fraction of the lossless one; if it is not, the setting is too high.
3. Check text-heavy images specifically — they reveal lossy artefacts first.