How to reduce image size for a website

Oversized images are the most common reason a site feels slow, and the easiest thing to fix.

Compress images
Whichever tool you use here, the file stays on your device. How that works

Step by step

  1. 1Work out how wide the image is actually displayed on your page.
  2. 2Resize to roughly twice that width, which covers high density screens.
  3. 3Compress at around 80 per cent quality, or convert to WebP for a smaller file again.
  4. 4Check it still looks right at the size it will be shown.

Displayed size is what matters

A 4000 pixel photograph shown in a 600 pixel column is downloaded in full and then thrown away by the browser. The visitor waits for every one of those pixels and sees none of them, which is pure cost.

Twice the displayed width is the sensible target. That covers high density screens, where two device pixels are used for each layout pixel, and going beyond it buys nothing anyone can see.

WebP typically saves another quarter to a third over JPG at the same quality, and is supported by every current browser. For a site with many images that adds up quickly.

Questions

What quality setting should I use?

Around 80 per cent suits photographs. Flat graphics and screenshots often need more, or a different format.

JPG or WebP?

WebP for smaller files and broad modern support. JPG if you need to support very old software.

Are my images uploaded?

No, which also means your unpublished assets stay unpublished.