Image Optimisation Without Quality Loss

Image Optimisation Without Quality Loss: WebP, Lazy Loading, and Responsive Images

Introduction

Images are the biggest contributor to page weight on most service business websites — and page weight is one of the primary causes of slow loading times, poor Core Web Vitals scores, and lost leads. The challenge is that for service businesses, images are also critical for trust and conversion: photos of finished jobs, team members, and before/after comparisons are among the most persuasive elements on any trade website.

The solution isn't fewer images. It's smarter image delivery. This guide covers the three techniques that deliver the greatest file size reductions with the least visible quality impact: WebP format conversion, lazy loading, and responsive image implementation.

Why Image Optimisation Directly Impacts Your Lead Volume

An unoptimised hero image that's 3MB will single-handedly push your LCP (Largest Contentful Paint) score well above the 2.5-second threshold Google uses as a ranking benchmark. On a 4G mobile connection — the most common scenario for someone searching "plumber near me" while standing in a flooded kitchen — a 3MB image can take 5–8 seconds to fully load.

Research consistently shows that conversion rates drop sharply after a 3-second load time. For service businesses where every lead is valuable, image bloat translates directly into lost enquiries.

WebP: The Baseline Standard for Service Business Images

WebP is an image format developed by Google that achieves 25–35% smaller file sizes than JPEG at equivalent visual quality, and 25–34% smaller than PNG for images with transparency. In 2026, browser support for WebP is effectively universal — all major browsers (Chrome, Firefox, Safari, Edge) support it fully.

Converting to WebP

For new images: Use tools like Squoosh (squoosh.app — free, browser-based), ImageOptim, or Sharp (Node.js) to save images in WebP format. Aim for a quality setting of 80–85% — this produces files that are visually indistinguishable from 100% quality at a fraction of the file size.

For existing images on WordPress: Plugins like ShortPixel, Smush, or Imagify automatically convert uploaded images to WebP and serve them to browsers that support the format, with JPEG/PNG fallbacks for older browsers.

Implementing WebP with HTML fallback:

html

<picture>
  <source srcset="/images/completed-kitchen.webp" type="image/webp">
  <img src="/images/completed-kitchen.jpg" alt="Completed kitchen tiling in Leeds" width="800" height="600">
</picture>

The <picture> element serves WebP to browsers that support it, and falls back to JPEG for browsers that don't. The <img> tag inside is the fallback and must include proper width, height, and alt attributes.

AVIF: The Next-Generation Format

AVIF offers even better compression than WebP (roughly 50% smaller than JPEG) but has slightly less consistent browser support in 2026. For forward-looking implementations, you can add AVIF as a first preference in the <picture> element:

html

<picture>
  <source srcset="/images/completed-kitchen.avif" type="image/avif">
  <source srcset="/images/completed-kitchen.webp" type="image/webp">
  <img src="/images/completed-kitchen.jpg" alt="Completed kitchen tiling in Leeds" width="800" height="600">
</picture>

Lazy Loading: Only Load What's Visible

Lazy loading defers the loading of images below the fold until the user scrolls near them. Instead of loading every image on the page when it first opens, the browser loads only what's visible in the viewport — and fetches additional images progressively as the user scrolls.

Implementing Native Lazy Loading

HTML's native lazy loading is now widely supported and requires a single attribute addition:

html

<img src="project-photo.webp" loading="lazy" alt="Driveway installation in Manchester" width="600" height="400">

The loading="lazy" attribute tells the browser to defer loading this image until it's close to entering the viewport. No JavaScript required.

Important: Never apply lazy loading to above-the-fold images. Your hero image and any other content visible on first load should use loading="eager" (or omit the attribute entirely, which defaults to eager). Lazy loading above-fold images is one of the most common causes of poor LCP scores.

WordPress Lazy Loading

WordPress automatically adds loading="lazy" to all images inserted below the first image on a page as of version 5.5. For more granular control, plugins like Perfmatters allow you to configure lazy loading behaviour precisely.

Responsive Images: Serving the Right Size for Every Device

A 2400px-wide hero image served to a mobile device with a 375px-wide screen is delivering 6x more pixels than needed. The browser has to download the full 2400px image and then scale it down — wasting bandwidth and slowing load time.

Responsive images use the srcset and sizes attributes to tell the browser which image size is appropriate for each viewport.

Implementing srcset

html

<img
  src="/images/hero-sm.jpg"
  srcset="
    /images/hero-sm.webp 480w,
    /images/hero-md.webp 800w,
    /images/hero-lg.webp 1200w,
    /images/hero-xl.webp 1920w
  "
  sizes="(max-width: 480px) 480px, (max-width: 800px) 800px, (max-width: 1200px) 1200px, 1920px"
  alt="Electrician completing consumer unit upgrade in Leeds"
  width="1920"
  height="1080"
>

The srcset attribute provides the browser with multiple image options and their widths. The sizes attribute tells the browser which image size will actually be displayed at each viewport width, allowing it to select the most appropriate source before downloading.

WordPress Responsive Images

WordPress automatically generates multiple image sizes when you upload a media file (thumbnail, medium, large, and full). With a WebP conversion plugin active, it will also generate WebP versions of each size. Ensure your theme uses wp_get_attachment_image() or the_post_thumbnail() functions, which automatically output proper srcset attributes.

Image Compression: Striking the Right Balance

Beyond format choice, compression level determines the final file size vs. quality trade-off. General guidelines for service business images:

• Hero images: Target under 150KB in WebP format at 80–85% quality

• Service page project photos: Target under 80KB per image

• Team photos: Target under 60KB per image

• Thumbnail images: Target under 20KB per image

Use Google's PageSpeed Insights to identify specific images that are contributing most to your page weight. The "Properly size images" and "Serve images in next-gen formats" audit items will tell you exactly which images need attention.

Building an Image Optimisation Workflow

Rather than retrospectively optimising images, build optimisation into your upload workflow:

1. Resize before upload — Never upload full-resolution camera files (often 5–20MB). Resize to the maximum display size before uploading.

2. Convert to WebP locally — Use Squoosh or a batch conversion tool before uploading to your CMS.

3. Use a CDN with image transformation — Services like Cloudflare Images or Imgix can transform, resize, and convert images on-the-fly, serving the optimal format and size automatically.

4. Automate with a WordPress plugin — If you're on WordPress, ShortPixel or Imagify handles conversion and compression automatically on upload.

Conclusion

Image optimisation is one of the highest-impact, most accessible performance improvements available to service business websites. Converting to WebP, implementing lazy loading for below-fold images, and serving responsive image sizes appropriately can reduce total page weight by 50–70% — translating directly into faster load times, better Core Web Vitals scores, and more leads from visitors who don't bounce before your page finishes loading.

Need a full performance audit of your service website's images? Zava Build identifies and fixes the optimisation issues costing you leads. Book a free strategy session →