How to Compress Images for a Faster Website (and Better Core Web Vitals)

On a typical website, images account for well over half the total page weight. If your site feels slow, they are almost certainly the reason — and unlike most performance work, fixing them requires no code.

Why it matters beyond the stopwatch

Google’s Core Web Vitals include Largest Contentful Paint — the time until the biggest visible element finishes loading. On most pages that element is an image. A hero photo that takes four seconds to appear fails the assessment on its own.

There is also the plain commercial reality: people leave. Mobile visitors on a patchy connection abandon slow pages quickly, and they rarely come back to find out whether it was a one-off.

The order of operations

Most people jump straight to compression and are disappointed. Do these three in order and the results are dramatic.

1. Resize first — this does the heavy lifting

This is the step almost everyone skips, and it matters more than the other two combined.

A phone photo is around 4000 pixels wide. Your blog column is maybe 800 pixels wide. The browser downloads all four thousand and throws away three quarters of them. You have paid for data nobody will ever see.

File size falls roughly with the square of the dimensions. Halve the width and you cut the data by about 75 per cent — before compressing anything.

Sensible maximum widths:

• Full-width hero images — 1920px
• Blog content images — 1200px
• Thumbnails and cards — 600px
• Logos and icons — the exact size they display at

Use Resize Image for exact dimensions, or let Compress Image cap the width for you as part of the same pass.

2. Then compress

With sensible dimensions in place, compression trims what remains. Quality around 75 to 80 per cent is the sweet spot — indistinguishable from the original at normal viewing size, at a fraction of the weight.

Below roughly 50 per cent you start to see blockiness in skies, skin and smooth gradients. Above 90 per cent you are paying for detail nobody can perceive.

3. Then convert to WebP

WebP is supported by every browser in current use and typically saves another 25 to 35 per cent over JPG at matching quality. It is the easiest remaining win. Convert to WebP and upload those instead.

What this looks like in numbers

A single phone photo destined for a blog post:

From 4.8 MB to 145 KB — a 97 per cent reduction, with no visible difference on screen. Multiply that across twenty images on a page and you have transformed the site.

Two things to fix in your HTML

Optimised files still need to be used properly.

Always set width and height attributes. Without them the browser does not know how much space to reserve, so the page jumps around as images arrive. That is Cumulative Layout Shift, another Core Web Vital, and it is trivially avoidable.

Lazy-load anything below the fold. Add loading="lazy" to images that are not visible when the page first opens. Do not add it to your hero image — that delays the very thing Largest Contentful Paint is measuring.

Common mistakes

• PNG photographs. The single most common cause of a heavy page. PNG is for graphics and screenshots; photographs belong in JPG or WebP.
• Compressing an already-compressed file. Each pass discards more detail permanently. Always start from the original.
• Relying only on a plugin. Optimisation plugins help, but they are working with whatever you gave them. A 5 MB upload becomes a smaller 5 MB-derived file, not a properly sized one.
• Uploading enormous originals “just in case”. Your media library balloons, backups slow down, and nobody benefits.

Do the whole batch at once

You can select an entire folder and process it in one go:

• Compress Image — set quality and a maximum width together, and see the exact saving before you download
• Resize Image — exact pixels or percentage, batch or single
• Image to WebP — the final conversion

Everything runs in your browser, so nothing is uploaded and there is no waiting for a queue. It is also free for life with no sign-up and no daily limit — run a hundred images today and another hundred tomorrow, without an account, a watermark or a paywall.