How to compress an image for the web without it looking worse

A photo straight from a phone is around 4,000 pixels wide and 3–6 MB. The slot it will fill on a web page is rarely wider than 1,200 pixels and should weigh well under 300 kB. Getting from one to the other is three decisions, and people usually make them in the wrong order: they reach for a quality slider first, when the biggest saving comes from something else entirely.

Step 1: resize to the size it will be displayed

Pixels you never display are pure waste. An image shown at 800 pixels wide but delivered at 4,000 is sending 25 times the data it needs, and no quality setting recovers that. So the first step is always to find out how big the image will actually appear, then resize to that width, or double it if you want it sharp on high-density screens.

If you are not sure what you are starting with, the image dimensions inspector reports the pixel size, aspect ratio and the CSS size it would occupy. Then use the image resizer to set a new width with the aspect ratio locked. For most content images 1,200–1,600 pixels wide is plenty; for thumbnails and avatars, 400 is generous.

Step 2: choose the format

The format decides how efficiently the remaining pixels are stored:

• JPEG for photographs where a transparent background is not needed. Universally supported, small, and lossy in ways that suit photos.
• PNG for screenshots, diagrams, logos and anything with flat colour, sharp edges or transparency. Lossless, so it is large for photos and small for line art.
• WebP for either, when you control the site. It is typically 25–35% smaller than an equivalent JPEG and supports transparency, and every current browser reads it.

Screenshots saved as JPEG get fuzzy text; photos saved as PNG balloon to several megabytes. If a photo has ended up as a PNG, converting it is the single biggest saving you can make. The image to WebP converter converts between all three, with a quality slider for the lossy outputs.

Step 3: set the quality

Only now does the slider matter. For JPEG and WebP, quality 75–85 is the range where the file shrinks a lot and the picture is still indistinguishable from the original at normal viewing sizes. Below 60, compression artefacts appear around edges and in smooth gradients like skies. Above 90, the file grows quickly for no visible gain.

If you have a hard target, say an upload form that refuses anything over 200 kB, work backwards from the number instead of guessing. The compress to kB tool searches for the highest quality that lands under the limit you give it.

Step 4: strip the metadata

A camera embeds EXIF data in every photo: the model, the lens, the exposure settings and, on phones, the GPS location where it was taken. It adds a few kilobytes and, more importantly, it publishes where you were standing. The EXIF stripper removes it losslessly, without re-encoding the pixels. Do this last so that a later save does not put it back.

A quick checklist

1. Resize to the display width, or twice it for high-density screens.
2. Photos to JPEG or WebP; flat graphics and screenshots to PNG or WebP.
3. Quality 75–85, or search for an exact file size if you have a limit.
4. Strip EXIF before publishing anything taken on a phone.

None of these tools upload the image. The resizing, conversion and compression all happen in your browser, so the original never leaves your machine.