To fix unoptimised images, resize each image to its display dimensions, compress with a quality tool or plugin, convert to WebP or AVIF, add width/height attributes, lazy-load below-the-fold images only, and preload the hero/LCP image. Re-scan to confirm reduced page weight.
Oversized images are the most common performance problem on content sites. Fixing them is usually the fastest path to better LCP and PageSpeed scores. This guide is the action checklist — see also our Image Optimisation article for the full explanation.
Check your website
See how your site handles how to fix unoptimised images slowing your site — free, no account needed.
Business impact
Large images slow every page load, especially on mobile data. Visitors on slow connections abandon before images finish. Optimisation is often a one-time effort with permanent gains.
Why this happens
Problems: uploading 4000px originals for 400px slots; PNG where JPEG/WebP suffices; no compression; missing dimensions causing CLS; lazy-loading the hero. Fix with resize → compress → modern format → correct loading strategy.
How to confirm the issue
Manually: DevTools → Network → sort by size — images usually dominate.
With Plexa Trust: PageSpeed image opportunities; re-scan after optimisation.
Step-by-step fix
Audit largest images in DevTools Network tab.
Resize to maximum display size (2x for retina where needed).
Compress with Squoosh, TinyPNG, or a CMS plugin.
Serve WebP/AVIF with JPEG fallback via
<picture>.Add width and height on every image.
Lazy-load below-fold only; preload the LCP hero.
Re-scan.
Platform-specific fixes
WordPress
Install ShortPixel, Imagify, or Smush — bulk optimise existing library.
Enable WebP conversion in plugin settings.
Regenerate thumbnails if you change size rules.
Shopify
Compress before upload; Shopify serves responsive sizes automatically.
Avoid uploading images larger than needed for product display.
Cloudflare
Enable Polish (lossless or lossy) and WebP in Speed settings.
Static sites
Add an image build step (sharp, imagemin) in your CI pipeline.
Use srcset for responsive images.
How to verify the fix
Automate optimisation in upload/build pipeline.
Never lazy-load the LCP image.
Set dimensions to prevent CLS.
Common mistakes
Serving multi-megabyte hero images.
Lazy-loading above-the-fold images.
Using PNG for photos instead of JPEG/WebP.
Frequently asked questions
What size should I upload?
No larger than 2× the maximum display width. A 800px-wide slot needs at most ~1600px source.
WebP or AVIF?
WebP is widely supported; AVIF compresses better. Use picture element with fallbacks.
Will compression look bad?
At quality 80–85, JPEG/WebP is usually visually identical at a fraction of the size.
Should I use a CDN for images?
Yes — image CDNs resize and format per device automatically.
Do SVGs need optimisation?
SVGs are already small for icons/logos. Run SVGO for complex SVGs.
What about background images in CSS?
Optimise the file and consider responsive image-set() or media queries.
Can I bulk-fix old images?
Yes — WordPress plugins and CLI tools batch-process media libraries.
How do I confirm it worked?
Total page weight drops in DevTools; PageSpeed image audits pass; re-scan improves.
Think you've fixed it?
Run a free scan to verify the issue is resolved. Upgrade to Pro on Plexa Trust for the full audit, monitoring alerts, and score history.
Verify with a free scan