/ Learning Hub / Image Optimisation Fixes

How to Fix Every Image Optimisation Finding

The Image Optimisation audit measures every image on your page โ€” file size, format, dimensions, alt text, lazy-load behaviour, CLS contribution and CDN delivery. Images are the single largest performance line item on most websites. This index covers fixes for every category of finding.

New here?
Start with the Image Optimisation Guide for the basics, or the beginner tutorial.

By finding type

Findings fall into these categories. Pick yours:

๐Ÿ“ฆ Fix oversized image files LIVE
Hero images over 200KB, product photos over 100KB, blog images over 80KB hurt LCP. Compress to those targets without visible quality loss. Tools: Squoosh, ImageOptim, server-side via Sharp/imagemagick.
๐Ÿ†• Fix wrong image format LIVE
AVIF beats WebP beats JPEG/PNG on size. Serve modern formats via <picture> with fallback. The browser-support matrix in 2026 (AVIF is safe for 95%+ of users now).
๐Ÿ“ Fix wrong image dimensions LIVE
Serving 4000ร—3000 images displayed at 800ร—600 wastes bandwidth and CPU. Generate responsive sizes via srcset, use Cloudinary/Imgix transformations, or build-time generation.
๐Ÿ’ค Fix missing lazy-load LIVE
loading="lazy" on every below-the-fold image. NEVER on the LCP image (lazy-load on LCP destroys LCP score). The fetchpriority="high" attribute for hero images.
๐Ÿท๏ธ Fix missing or weak alt text LIVE
Every meaningful image gets descriptive alt. Decorative images use alt="". The good-vs-bad alt-text examples, the AI-generated-alt-text tools and their limits.
๐Ÿ“ Fix layout shift from images LIVE
Images without explicit width and height attributes cause CLS as they load. Set the attributes, use aspect-ratio CSS, or reserve space with a placeholder.
โ˜๏ธ Fix image CDN delivery LIVE
Serve images from a CDN closer to the user. Cloudflare Images, BunnyCDN, Imgix, Cloudinary trade-offs. The cost-vs-performance decision.
๐ŸŽจ Fix decorative vs content image confusion LIVE
Background patterns, icons-with-text, decorative dividers should use CSS or alt="". Content images (product, illustration, infographic) need descriptive alt. Why getting this wrong hurts accessibility.

By platform

Image-handling patterns by platform:

๐Ÿ“ฐ Fix images in WordPress PLANNED
ShortPixel / EWWW / Smush plugin patterns, the WP 6.5 native AVIF support, responsive image generation, and the page-builder image bloat.
๐Ÿ›’ Fix images in Shopify PLANNED
Theme image-tag patterns, auto-WebP from Shopify CDN, product-image variant management, the apps that further optimise.
โš›๏ธ Fix images in Next.js PLANNED
next/image component, the priority prop for LCP, sizes prop for responsive, the AVIF/WebP automatic generation, and the Sharp dependency.

What our Image Optimisation audit checks

The audit measures every image on your page โ€” file size, format, dimensions, alt text, lazy-load attribute, CLS contribution, CDN delivery. Recommendations are prioritised by impact on LCP and bandwidth. For the full reference, see the Image Optimisation Guide.

๐Ÿ–ผ๏ธ Audit your images first

Image optimisation typically delivers 30-50% LCP improvement on poorly-optimised sites.

Run Image Optimisation โ†’
Related Guides: Image Optimisation Guide  ยท  Beginner Tutorial  ยท  Core Web Vitals Guide  ยท  Page Speed Guide
๐Ÿ’ฌ Got a problem?