How image compression affects quality

Lossy and lossless compression make different promises

Lossless compression represents the same pixel information more efficiently, so decoding recreates it exactly. PNG is commonly used this way and suits graphics with transparency, flat colours and sharp edges. It can be unnecessarily large for a detailed photograph.

Lossy compression discards some visual information to reach a smaller file. JPEG and lossy WebP can work very well for photographs, where small changes are hard to notice. Repeatedly opening and re-saving a lossy source can accumulate damage, so retain an original master.

• Use PNG when exact edges or transparency are central.
• Test JPEG or WebP for photographs and textured artwork.
• Keep the source file outside the optimisation workflow.

Quality controls are not percentages of retained detail

A quality value is an instruction to an encoder, not a universal measurement. A setting of 80 in one browser or format is not guaranteed to match 80 elsewhere. File size also depends on the image: smooth skies compress differently from leaves, hair or text-heavy screenshots.

Lower quality often introduces blockiness, ringing around high-contrast edges, smearing in fine texture or colour banding in gradients. Inspect faces, small text, logos and shadow detail because artefacts can hide in an overall scaled preview.

Dimensions often matter more than the quality slider

A 5000-pixel-wide photograph used in a 900-pixel content column carries far more pixels than most visitors can see. Resizing close to the largest real display size can produce a larger saving than aggressive quality reduction, often with a cleaner result.

Do not enlarge a small source expecting new detail; interpolation only estimates additional pixels. When responsive layouts need several sizes, create them from the master rather than repeatedly resizing an already compressed derivative.

• Confirm the largest rendered dimensions before export.
• Preserve the aspect ratio unless deliberate cropping is required.
• Check high-density displays when the image contains fine interface text.

Format choice affects transparency and compatibility

JPEG cannot store transparency. Transparent pixels must be flattened onto a chosen background, and choosing the wrong background can create visible boxes or halos. PNG and WebP can retain transparency when the encoder supports it.

Modern formats may reduce size, but the final delivery system must accept them. Test the actual content management system, social platform or email workflow. Conversion through a browser canvas may also remove camera metadata, colour profiles or animation; that can be desirable for privacy, but it should not be accidental.

Measure the real outcome

Compare output bytes with the original rather than assuming re-encoding always helps. A tiny or previously optimised image can become larger. If that happens, keep the original or try a more suitable format and dimensions.

Finally, inspect the image on a small phone and a larger screen, test any text for readability, and verify transparency against the page background. Local browser processing keeps the source on the device, but the downloaded output should still be checked before replacing a production asset.

• Reject an output that is larger without a clear quality or compatibility benefit.
• Check visible quality in context, not only in an isolated preview.
• Use descriptive filenames and keep a reversible master copy.

Avoid common compression mistakes and know the limits

Compression cannot restore focus, recover clipped highlights or create detail absent from the source. Heavy noise and sharpening can actually make a photograph harder to compress because they add high-frequency detail. If the output remains large, first consider a more appropriate crop, dimensions or source edit rather than repeatedly lowering quality until the subject breaks down.

A file-size target should come from a delivery constraint, not a belief that one number suits every page. Hero images, tiny thumbnails and downloadable artwork have different needs. Automated encoders also vary, so document the format, dimensions and acceptable visual result rather than relying on an encoder quality value alone. Recheck important assets after a browser or processing pipeline changes.

• Do not overwrite the only full-quality original.
• Do not compare files at different rendered dimensions without noting the difference.
• Avoid repeated lossy exports from the previous compressed output.
• Treat animated images, vector graphics and professional print colour as separate workflows.

Put this guide into practice

These free PipFoxy tools are directly related to the method above. No account is required, and current tool content stays in your browser.

Or browse the full image tools category.