How to compress images for the web

An image file is large for two separate reasons: how many pixels it holds, and how much detail each pixel keeps. Compression attacks the second. Resizing attacks the first. Knowing which one you need is most of the job.

Step 1: choose the format for the job

• JPEG — photographs. Lossy, no transparency, opens in everything ever made.
• PNG — screenshots, diagrams, logos, flat colour, transparency. Lossless, so it stays large for photographs.
• WebP — photographs and most other things, with transparency where you need it, and usually the smallest file of the three. Every current browser displays it.

Converting an existing file is one step: Image Format Converter turns PNG into JPEG or WebP without installing anything.

Step 2: resize before you compress

A photo from a phone or camera is often 3000–4000 pixels wide, while the space it fills on a page may be 800. Halving the pixel width removes roughly three quarters of the data before quality is even part of the conversation. Image Resizer sets the width you actually need — 1600 pixels is generous for a full-width image, 800 is plenty inside an article.

Step 3: pick a quality, then look at the result

Lossy formats take a quality setting. Around 75% is a sensible starting point for photographs: the file shrinks dramatically and the difference is usually invisible at normal viewing size. Text, sharp edges and fine patterns suffer first, so check those areas specifically.

Image Compressor shows the size before and after every attempt, so you can lower the quality, switch to WebP and keep whichever file is genuinely smaller. If it reports that the new file is not smaller, that is the honest answer rather than a failure: a file that was already optimised will not shrink much.

Step 4: check it where it will be seen

Judging an image in a full-screen viewer is misleading. Look at it in the place it will be published — in the page layout, in the listing, at the size a phone shows it.

When compression is the wrong answer

• Screenshots of text — PNG keeps letters crisp; JPEG makes them fuzzy around the edges.
• Anything going to print — keep the original resolution.
• Files you may edit again — keep the original and compress a copy.

A workflow that takes two minutes

1. Resize to the width you need.
2. Convert to WebP, or JPEG where compatibility matters.
3. Compress at around 75%.
4. Compare the sizes the tool reports.
5. Look at the result at the size it will be shown.

Tools used here: Image Compressor · Image Resizer · Image Format Converter