Images are usually the largest files on a page and the most common cause of slow Largest Contentful Paint. Optimising them — right size, modern format (WebP/AVIF), compression and lazy loading — often delivers the biggest speed improvement for the least effort.
Oversized, uncompressed images slow every page load and hurt Core Web Vitals. Serving appropriately sized images in modern formats, with lazy loading for below-the-fold content, keeps quality high while making pages feel dramatically faster.
Check your website
See how your site handles image optimization: the biggest easy win for page speed — free, no account needed.
For business owners
On most sites images are the main reason pages feel slow. A hero image that is 4 MB when 200 KB would look identical costs you seconds of load time and real customers who leave. Image optimisation is usually the fastest, cheapest performance win — often achievable in an afternoon.
How it works (technical)
Key techniques:
- Resize to the display dimensions — never ship a 4000px image into a 400px slot.
- Compress with tools or build pipelines (TinyPNG, Squoosh, ImageOptim).
- Modern formats — WebP and AVIF beat JPEG/PNG at equal perceived quality; use
<picture>with fallbacks. - Lazy loading —
loading="lazy"on below-the-fold images. - Dimensions — always set
widthandheight(or aspect-ratio) to prevent layout shift (CLS).
Preload only the LCP (hero) image; lazy-load the rest.
Real-world example
An e-commerce site's product pages used full-resolution camera JPEGs as thumbnails. Converting to WebP, resizing to actual display size and lazy-loading gallery images cut LCP from 5.2s to 1.8s and lifted conversions on mobile.
Why it matters
Images dominate page weight and LCP. Scanners flag slow response and poor PageSpeed scores where unoptimised images are often the root cause.
How to fix it
Audit the largest images on your key pages (DevTools Network tab, sort by size).
Resize each image to its maximum display size — no larger.
Convert to WebP or AVIF with JPEG/PNG fallbacks via
<picture>.Add
loading="lazy"to images below the fold.Set explicit width and height to prevent layout shift.
Best practices
Automate compression and format conversion in your build or CMS pipeline.
Preload only the single LCP image; lazy-load everything else.
Use a CDN with automatic image optimisation if available.
Common mistakes
Uploading multi-megabyte originals and letting the CMS serve them raw.
Lazy-loading the hero/LCP image (delays the most important paint).
Omitting width/height, causing layout jumps (bad CLS).
Frequently asked questions
WebP or AVIF — which should I use?
AVIF compresses better but has slightly less universal support. WebP is a safe default with broad browser support. Use picture elements to serve AVIF/WebP with JPEG fallback.
Will compressing images hurt quality?
Judicious compression is visually lossless at normal viewing sizes. The problem is usually images that are both oversized and uncompressed — fixing size matters as much as compression.
Put this into practice
See how your site scores with Plexa Trust — start with a free scan, then unlock the complete audit on Pro.
Scan your website free