A single uncompressed photo straight from a phone or camera can weigh 5–12 MB. Put a few of those on a web page and it will crawl on mobile data — and visitors leave. The good news: most images can be made 70–80% smaller with no visible difference. This guide explains how compression works and exactly how to do it well.

Why image size matters more than you think

Images are usually the heaviest thing on a web page — often more than all the text, code, and fonts combined. Page speed affects:

  • Bounce rate. People abandon pages that take more than a few seconds to load.
  • Search ranking. Google uses page-loading performance (Core Web Vitals) as a ranking signal.
  • Bandwidth costs. Smaller images mean lower hosting bills and less mobile data for your visitors.

Shrinking your images is one of the highest-impact, lowest-effort improvements you can make to any site.

Lossy vs lossless compression

There are two ways to make an image smaller, and knowing the difference is the key to compressing well.

Lossless compression reorganises the data so it takes up less space without discarding anything. The image is mathematically identical when reopened. It’s safe but only shrinks files modestly (often 10–30%). PNG uses this.

Lossy compression permanently removes data the human eye is least likely to notice — subtle colour gradients, fine high-frequency detail. It shrinks files dramatically (often 70–90%). JPG, WebP, and AVIF use this. The trick is finding the point where the file is tiny but the loss is still invisible.

For photographs on the web, lossy compression is almost always the right choice — the savings are enormous and, done correctly, no one can see the difference.

The quality setting: where the magic happens

Most lossy formats let you choose a “quality” value from 0 to 100. Here’s how to think about it:

  • 90–100: Near-perfect, but files are large. Overkill for the web.
  • 75–85: The sweet spot. Visually indistinguishable from the original for most photos, with major size savings.
  • 60–75: Still acceptable for backgrounds and thumbnails; you may start to see artifacts on close inspection.
  • Below 60: Visible blocky artifacts. Only for tiny thumbnails or where size is critical.

Start at 80 and adjust. With our image compressor you can drag the quality slider and preview the result in real time, so you can stop exactly at the point where it still looks perfect.

A step-by-step compression workflow

  1. Resize first, then compress. If an image will display at 800 pixels wide, don’t serve a 4000-pixel original. Resizing it down first is the single biggest size saving you can make.
  2. Pick the right format. Use WebP for the best size-to-quality ratio, or JPG for universal compatibility. (See our format guide.)
  3. Set quality to ~80 and preview.
  4. Check the result at full size. Look especially at smooth areas like skies and skin — that’s where artifacts appear first.
  5. Compare the file size. Aim to keep most web photos under 200 KB and hero images under 500 KB.

Common mistakes to avoid

  • Serving full-resolution camera files. A 12-megapixel photo has far more detail than any screen needs. Resize before you compress.
  • Compressing PNGs that should be JPGs. A photo saved as PNG is huge. Convert it to JPG or WebP first, then compress.
  • Re-compressing the same JPG repeatedly. Each save loses a little more quality. Always compress from the highest-quality original you have.
  • Over-compressing logos and text. Lossy compression mangles sharp edges. Keep graphics as PNG or WebP-lossless.

Does compression happen on a server?

It doesn’t have to. Our compression tool runs entirely in your browser using WebAssembly — your images are never uploaded anywhere. That’s faster (no upload/download round trip), completely private, and works even on large batches of files.

How small should my images be?

As a rough target for the web:

  • Thumbnails: 10–30 KB
  • In-article images: 50–150 KB
  • Full-width hero images: 150–500 KB
  • Background images: under 300 KB where possible

The bottom line

Compression is the easiest way to make any website faster. Resize your images to the size they’ll actually display, choose an efficient format like WebP, set quality to around 80, and preview the result. You’ll typically cut file sizes by three-quarters or more — and your visitors (and your search ranking) will thank you.