How to Reduce Image Size for a Faster Website (Core Web Vitals Guide)

Updated November 1, 2026 · 3 min read

Open almost any slow website and the culprit is the same: a 4 MB hero photo straight from the camera, a dozen 1 MB product shots, a logo saved as a 600 KB PNG. Images are typically half to two-thirds of total page weight, so they are the first place to look when a page feels sluggish or your Core Web Vitals report shows a poor Largest Contentful Paint (LCP).

You don't need a build pipeline to fix this. Five habits cover 90% of the gain.

1. Serve images at the size they are displayed

If your content column is 800 px wide, a 4000 px photo is 25× more pixels than needed. Resize to roughly the largest display width × 2 (for high-DPI screens): 1600 px for an 800 px column, 2400 px for a full-width hero. Thumbnails should be thumbnails — 400 px, not 2000 px scaled down with CSS.

2. Use WebP

WebP is 25–35% smaller than JPEG and ~26% smaller than PNG at equal quality, and supported by every current browser. Convert your existing library in batches with the JPG to WebP and PNG to WebP converters. Keep the originals; serve WebP.

If you want to go further for a handful of hero images, AVIF saves another 20–30%, but check that your CMS and all target browsers handle it.

3. Pick a sane quality setting

Quality 100 is a trap: it doubles file size for detail nobody can see. For photos, WebP quality 75–80 or JPEG 75–85 is visually indistinguishable on screen. For screenshots and UI graphics with text, use lossless WebP or an 8-bit PNG so edges stay crisp.

4. Strip metadata

EXIF, colour profiles and embedded thumbnails add 10–100 KB per image and do nothing in a browser. Any serious compressor removes them; ours does by default.

5. Lazy-load everything below the fold

Add loading="lazy" to <img> tags that are not visible on first paint (most CMSs do this automatically now). Do not lazy-load the hero image — that delays LCP. Instead, give it explicit width and height attributes so the browser reserves space (that fixes Cumulative Layout Shift) and consider fetchpriority="high".

A quick before/after

A typical small-business home page we see:

That is a 10× reduction with no visible change and no code beyond swapping files.

How to do it in bulk

1. Export or download the originals from your CMS.
2. Drop up to 20 at a time into the WebP compressor, set width to your target (e.g. 1600) with "keep aspect ratio", quality 78.
3. Download the ZIP and re-upload. Repeat per batch.

For images that must stay JPEG (e.g. e-mail newsletters, which don't render WebP in Outlook), use the JPG compressor with the same dimensions and quality 80.

Measure

Run the page through PageSpeed Insights before and after. Look at LCP (should be under 2.5 s), the "Properly size images" and "Serve images in next-gen formats" audits, and total page weight. If LCP is still slow after optimising images, the next suspects are render-blocking scripts and server response time — different articles.

Related guides

• How to Compress an Image to 100 KB (Without It Looking Terrible)
• How to Compress Images for Email Attachments Under 25MB
• How to reduce PNG file size without losing transparency