How to reduce total image weight
Best practices1 min readFixes 2 checks image-count-and-weight, images-heavy-files
Images are usually the heaviest part of a page. Compress, resize and use modern formats to cut their weight by half or more.
Step by step, with screenshots: Image optimisation plugins compared honestly →
Check your own site
Runs these 2 checks and the other 185, free, in about 45 seconds.
What a passing site looks like
- Total image weight: passeswarning · −2 ptseffort M
- Heavy image files: passeswarning · −1.5 ptseffort M
1. Total image weight
Why it matters. Images are usually the heaviest part of a page. Over 1.5 MB in total, or a single image over 500 KB, adds seconds on mobile and costs visitors real data.
How to fix it.
- Resize images to the size they are shown at (a 400 px wide photo does not need a 4000 px file).
- Convert to WebP or AVIF and compress to about 80 % quality; CMS plugins and CDNs can do this automatically.
2. Heavy image files
Why it matters. A single image over a few hundred kilobytes takes longer to download on mobile than the rest of the page. Uploading the original camera file is the usual cause.
How to fix it.
- Export each listed image at the size it is displayed and save it as WebP or AVIF at about 80 % quality.
- Let your CMS or CDN resize on upload so this does not come back with the next photo.