The Complete Guide to Image Optimisation for Web Performance

According to HTTP Archive, images account for over 50% of the average web page's total weight. They are the single largest opportunity to improve load time, Core Web Vitals scores, and user experience — and they require no code changes, only smart preparation before upload.

Why Image Size Directly Affects Revenue

Google's Core Web Vitals framework includes Largest Contentful Paint (LCP), which measures how long the main content — usually an image — takes to appear. A score above 2.5 seconds is classified as "poor" and impacts search ranking. Additionally, a one-second delay in page load time reduces conversions by approximately 7% according to consistent research findings. A 3MB unoptimised hero image is one of the most common causes of failing both metrics simultaneously.

Compression vs Resizing

These are distinct operations addressing different problems. Compression reduces file size at existing dimensions by discarding pixel data the eye is least sensitive to. Resizing changes the pixel dimensions. Both are necessary before uploading any image to a website. The correct order is always: resize first to match display dimensions, then compress to optimise file size at those dimensions.

Choosing the Right Quality Setting

The quality slider in the Image Compressor ranges from 0.05 to 1.00. For web use, 0.65–0.75 typically achieves 50–70% file size reduction with no perceptible quality degradation. For hero images where detail is critical, 0.80–0.85 maintains excellent quality. For thumbnails and decorative elements, 0.50–0.60 is entirely sufficient. Always review the live preview at your chosen setting before downloading.

Practical File Size Targets

Blog post hero images: under 200KB. Product images: under 150KB. Thumbnails and listing images: under 50KB. Full-screen background images: under 400KB. Icons and logos: under 20KB — and ideally served as SVGs rather than raster images, which scale without quality loss. Use the Image Resizer to hit exact pixel targets, then compress the result.

Measuring Image Performance Impact

Google's PageSpeed Insights provides a detailed breakdown of image-specific performance issues for any URL. The Opportunities section identifies images that could be served in next-generation formats (WebP/AVIF), images sized larger than their display dimensions, images without explicit width and height attributes causing layout shift, and images that should be lazy loaded. Each opportunity shows the estimated potential savings in kilobytes and milliseconds — allowing prioritisation by impact.

Chrome DevTools' Lighthouse audit (F12 → Lighthouse → Performance) provides the same analysis locally before deployment, enabling image optimisation to be validated before publishing. The Coverage tab shows which resources are used in the initial viewport (and therefore should not be lazy loaded) versus which are loaded but not displayed until scroll. This distinction is critical for correct lazy loading implementation — lazy loading a hero image that is visible in the initial viewport actually worsens LCP by deferring a critical resource.

Image CLS Prevention

Cumulative Layout Shift (CLS) — the Core Web Vitals metric measuring unexpected visual instability — is commonly caused by images without explicit dimensions. When a browser encounters an img element without width and height attributes, it cannot reserve the correct space before the image loads. As the image loads and displays, surrounding content shifts to accommodate it, causing layout shift. The fix is simple: always specify width and height attributes on img elements matching the intrinsic dimensions of the image.

The width and height attributes set the aspect ratio used to reserve space, even when CSS resizes the image to a different display size. An image with width='1200' height='630' (1.9:1 ratio) and CSS width: 100%; height: auto renders at the correct aspect ratio regardless of the container width. The browser reserves the correct proportional space before the image loads, eliminating CLS. This fix applies to all images, not just large hero images — small inline images without dimensions contribute to the page's cumulative shift score.