How to compress images without visibly losing quality

Image weight is usually the largest single cost on a page. Most of it is recoverable without anyone noticing.

Pick the format by content, not habit

• Photographs → JPEG or WEBP. Lossy compression suits continuous tone.
• Screenshots, logos, flat graphics → PNG or WEBP lossless. Sharp edges and large flat areas compress badly under JPEG and produce halos.
• Anything modern → WEBP usually beats both by 25–35% at matching quality.

Quality is not linear

Dropping from 100% to 85% typically halves the file with no visible change. Going from 85% to 70% saves far less and starts to show on gradients and skin tones. 85% is the default worth starting from.

Resize before you compress

A 4000-pixel-wide photo displayed in a 800-pixel column wastes most of its bytes. Resizing to roughly twice the display width — enough for high-density screens — beats any amount of quality tuning.

Check the result at real size

Judge compression at the size the image will actually be shown, not zoomed to 400%. Artefacts that are obvious under magnification are invisible in the layout.