Why image optimisation is the highest-impact technical SEO fix

The same image. The same quality perception. 30 40 smaller file size. The entire difference is format and compression and it is a 30-minute fix.

The five image optimisation techniques that matter

Technique 1: Convert to WebP format

WebP is Google's open image format. It achieves 25 40% smaller file sizes than JPEG and 25 35% smaller than PNG at equivalent visual quality. Every modern browser (Chrome, Safari, Firefox, Edge) supports WebP.

How to convert:

• Squoosh.app (free, browser-based): Drag and drop your image, select WebP format, adjust quality (70 80% is typically optimal), and download.
• cwebp command-line tool: cwebp -q 80 image.jpg -o image.webp
• WordPress plugin: Imagify, ShortPixel, or Smush can auto-convert uploads to WebP on existing sites.
• Build pipeline: For static sites, include an image optimisation step (imagemin-webp) in the build process.

Technique 2: Serve at the correct display size

An image uploaded at 4000 3000 pixels but displayed at 400 300 pixels on mobile is downloading 100 more data than needed. The browser downloads the full 4MB image and then scales it down to display at the smaller size.

Fix: serve different image sizes for different screen sizes using the srcset attribute:

`html `

This tells the browser to download the appropriately sized image for the device a mobile phone gets the 400px version, a desktop gets the 1200px version.

Technique 3: Set explicit width and height attributes

Every tag should have explicit width and height attributes matching the image's displayed dimensions:

`html `

Without these, the browser does not know how much space to reserve for the image before it loads. As the image loads, other content shifts to accommodate it this is exactly what CLS (Cumulative Layout Shift) measures. Adding width and height attributes eliminates this shift and typically improves CLS from a failing score to a passing one.

Technique 4: Use lazy loading for below-the-fold images

Images that are below the fold (not visible when the page first loads) should be lazy-loaded deferred until the user scrolls toward them:

`html `

This reduces the initial page load time by not downloading images the user has not yet seen.

Critical exception: The LCP image (usually the hero) must NOT be lazy-loaded. Use loading="eager" (or omit the attribute, as eager is the default) on the hero image:

`html `

Technique 5: Preload the LCP image

For further LCP improvement, add a preload hint in the for the hero image:

`html `

This tells the browser to begin downloading the LCP image before the full HTML is parsed, reducing the time until the main content appears.

What results to expect

For a typical Mumbai business website with unoptimised hero images:

Before: LCP 4.2 seconds, CLS 0.15 (both "Poor" or "Needs Improvement") After WebP conversion + explicit dimensions + lazy loading + LCP preload: LCP 1.8 seconds, CLS 0.02 (both "Good")

This is a representative improvement, not a guarantee actual improvement depends on your specific site, server, and image characteristics.

Frequently asked questions

Does image optimisation affect image quality visibly? At WebP quality 75 85%, the visible difference from a JPEG at equivalent perceived quality is imperceptible in normal viewing conditions. Test with Squoosh.app to find the sweet spot for your specific images.

What about images already uploaded to our WordPress site? Use an optimisation plugin (Imagify, ShortPixel, or Smush) to bulk-convert existing uploads to WebP and generate multiple sizes. Most plugins handle the srcset generation automatically.

Is there a size below which image optimisation does not matter? Images under 50KB have minimal impact on page speed. Focus your optimisation effort on images above 100KB, especially the hero/LCP image on key pages.