How to Compress Images for the Web Without Losing Quality

If a web page feels sluggish, images are usually the culprit. They routinely make up more than half of a page’s total weight, and an unoptimised photo straight from a phone can be 5 MB on its own. Multiply that across a gallery and you have a page that takes ages to load — frustrating visitors and quietly hurting your search ranking.

The fix is not complicated. It is a three-step routine done in the right order. Do it once and it becomes second nature.

Step 1: Resize to the size you actually display

This is the step people skip, and it is the most important one. A modern camera produces images 4000+ pixels wide. If that image only ever shows up 800 pixels wide on your page, the other 3200 pixels are pure wasted weight — the browser downloads them, then throws them away while shrinking the picture to fit.

Before anything else, resize the image to roughly the largest size it will be displayed (a little extra for high-resolution screens is fine). This single step often cuts the file size by 80% or more, before you have compressed a thing.

Step 2: Pick the right format

Format decides how efficiently those pixels are stored. The short version:

• Photos → JPG, or WebP for even smaller files on modern sites.
• Logos, icons, graphics with flat colour or transparency → PNG, or WebP.
• Want the smallest possible file on a site you control → WebP almost always wins.

If your image is in the wrong format, the Convert Image tool switches it in seconds without you having to re-export anything. We cover the trade-offs in detail in our guide on JPG vs PNG vs WebP.

Step 3: Compress

Now squeeze out the remaining fat. Compress Image reduces file size by removing detail your eye will not miss. The trick is to find the point just before quality visibly drops:

1. 1Start at a moderate quality setting (around 75–80% is the sweet spot for most photos).
2. 2Preview the result at full size and look closely at smooth areas like skies and skin — that is where artefacts appear first.
3. 3If it still looks clean, nudge the compression higher. If you see blocky patches, ease off.

Why the order matters

Resize, then format, then compress — in that sequence. Compressing a giant image first just wastes effort, because resizing it afterwards throws away the pixels you spent time optimising. Shrink the dimensions first so every later step is working on a smaller, cleaner starting point.

A realistic before-and-after

Take a typical 4.2 MB phone photo destined for a blog post. Resize it to 1200px wide and it drops to roughly 700 KB. Keep it as JPG and compress to 80% and you land around 180 KB — a file more than 20 times smaller that looks identical in the article. That is the difference between a page that loads instantly and one that makes visitors wait.

Best of all, every step here runs in your browser. Your images are never uploaded, so optimising a whole folder of photos is both fast and completely private.