How to compress images for the web without wrecking them

Resize before you compress

The single biggest saving is usually not compression at all — it is dimensions. A photo straight from a phone is often 4,000 pixels wide, and a blog post displays it at 800. Those extra pixels are downloaded, decoded and thrown away.

Decide the widest the image will ever be displayed, double it for high-density screens, and resize to that. A 1,600-pixel-wide image covers almost every article layout. Do this first: compressing a huge image well still leaves you with a huge image.

Pick the format by what the image contains

Photographs compress well with lossy formats because their detail is irregular and the eye forgives small errors. Use WebP, or JPEG if you need maximum compatibility.

Screenshots, logos, diagrams and anything with text or hard edges do badly as JPEG — the artefacts cluster around the edges and look like dirt. Keep those as PNG, or use WebP, which handles both cases and supports transparency.

Choose a quality setting by looking, not by rule

Around 80% quality is a good starting point for photographs and typically removes more than half the file size. But the right number depends on the picture: large areas of smooth gradient — skies, skin, studio backgrounds — show banding earlier than busy textures do.

Compare the compressed version against the original at the size it will actually be displayed. Judging a web image at 400% zoom will make you keep far more data than any reader needs.

Check what the numbers mean

Aim to get typical content images under about 200KB and hero images under about 400KB. These are guidelines, not limits — one well-chosen 300KB image beats five thoughtless 60KB ones.

If compression makes a PNG larger, that is normal: PNG is already losslessly compressed, so re-encoding adds overhead. Convert it to WebP instead.

A note on metadata

Re-encoding an image through a browser canvas drops its EXIF metadata, including camera details and any GPS coordinates. For images you are publishing that is usually a benefit — but if you rely on that metadata, keep an untouched original.