How to compress images for a faster website

Images are usually the heaviest part of a page, and the largest one on screen is normally what Largest Contentful Paint measures. Fixing images is the highest-return speed work available.

JPG, PNG or WebP. Everything is processed on your device.

Up to 50 MB per file. Files are processed in your browser.

Full options and FAQs on the Image Compressor page.

Resize before you compress

A 4000-pixel-wide photo displayed in a 800-pixel column wastes about 96% of its data. Resize to roughly twice the display width — enough for high-density screens — and only then compress. Doing it in this order routinely cuts file size by 90%.

Sensible targets

  • Hero images: under 200 KB.
  • In-article photographs: under 100 KB.
  • Thumbnails and avatars: under 30 KB.
  • Logos and icons: SVG where possible, otherwise a small PNG.

The rest of the checklist

  • Serve WebP with a JPG fallback.
  • Set width and height on every image so the layout does not shift as it loads.
  • Lazy-load anything below the fold, but never the hero image.

Step by step

  1. 1Work out the widest size the image is ever displayed at.
  2. 2Resize to about twice that width with the resizer.
  3. 3Compress at a medium level and compare against the original.
  4. 4Convert to WebP if your site can serve it.
  5. 5Re-measure the page and repeat for the next heaviest image.

Frequently asked questions

How much quality loss is acceptable?
Most photos survive 70-80% JPEG quality with no visible difference at normal viewing size. Compare side by side at 100% before committing.
Do smaller images help SEO?
Indirectly but genuinely: page speed is part of the page experience signals, and faster pages hold visitors better. No image setting ranks a page on its own.

Keep reading

Tools used in this guide