Best way to compress images for websites

Web performance · 2025-01-22 · 7 min read

Images are the single biggest contributor to slow websites. The average page now ships 2+ MB of images — more than HTML, CSS and JavaScript combined. Optimising those images is the fastest way to improve Core Web Vitals, Google rankings, and conversion rates.

The three levers of image optimisation

1. Format. WebP < JPG < PNG (for photos). PNG/WebP for graphics with transparency.
2. Quality. 78–85% JPEG / WebP is the sweet spot — visually indistinguishable from the original.
3. Resolution. Cap the longest side to what you actually need. A 4000px image displayed at 800px is 25× over-sized.

WebP is the right default in 2025

WebP is supported by every modern browser (Chrome, Firefox, Safari, Edge) and ships images 25–35% smaller than JPG with the same visual quality. For graphics with transparency, WebP can be 5–10× smaller than PNG.

Step-by-step: compress images for the web

1. Open shrink44.com/compress-image.
2. Drop your images (up to 1000 at a time).
3. Set output format to WebP.
4. Quality: 82%.
5. Cap longest side to 1920px for desktop or 1080px for mobile-first sites.
6. Compress, then download the ZIP.

Core Web Vitals impact

Image optimisation hits three Core Web Vitals directly:

• LCP (Largest Contentful Paint): The hero image is usually the LCP element. Halving its size cuts LCP nearly proportionally.
• CLS (Cumulative Layout Shift): Always set width and height attributes so the browser reserves space.
• INP (Interaction to Next Paint): Smaller images mean less main-thread decode work.

Use srcset for responsive delivery

One image at one size is no longer enough. Ship at least three sizes — for example 1920px, 1200px, and 800px — and let the browser pick:

<img srcset="hero-800.webp 800w, hero-1200.webp 1200w, hero-1920.webp 1920w"
     sizes="(max-width: 768px) 100vw, 1200px"
     src="hero-1200.webp" width="1200" height="675" alt="...">

Bulk-process your whole library

For existing sites with hundreds or thousands of images, the Bulk Compress tool handles 1000+ files at once with a single ZIP download. Use it once to convert your entire /images folder to optimised WebP.

What about CDN-side optimisation?

Cloudflare Polish, Vercel Image Optimization, and Imgix all do server-side optimisation. They're great but cost money at scale, and don't help if your source images are over-sized to begin with. Always optimise at the source first.