The Practical Image Optimisation Guide

Published 27 April 2026

Modern websites are mostly images. Across the median web page, images account for around 50% of total bytes — more on visually-rich sites. Optimising image delivery is the single highest-impact performance lever for most sites: better formats, smaller sizes, smarter delivery, lazy-loading, and CDNs. Done well, image optimisation cuts page weight by 60%+ and improves Core Web Vitals across the board.

This guide is the practical playbook. No theory, just what to do.

The Five Layers

Format — JPEG, WebP, AVIF, or PNG.
Compression — quality settings, encoder choice.
Sizing — actual display dimensions, responsive variants.
Delivery — CDN, lazy-loading, preload.
Markup — width/height attributes, picture elements, fetchpriority.

Each layer is independent and additive. You don't need all five; doing two or three well already produces big improvements.

Format Choice

Modern image formats produce dramatically smaller files at equivalent quality:

JPEG — universal support; the baseline. Use for photos.
PNG — lossless. Use for screenshots, logos, illustrations with sharp edges or transparency.
WebP — Google's modern format. ~25-35% smaller than JPEG at equivalent quality. Supported by all current browsers (97%+ market share). Default choice for new content.
AVIF — newer still. ~50% smaller than JPEG at equivalent quality. Browser support is 93%+. Encoding is slow, but worth it for static assets.
GIF — only for animated images you can't convert to video. Use WebP or AVIF for static images, MP4/WebM for animations.

The pattern: serve modern formats with fallbacks.

<picture>
    <source srcset="hero.avif" type="image/avif">
    <source srcset="hero.webp" type="image/webp">
    <img src="hero.jpg" width="1200" height="630" alt="...">
</picture>

Browsers pick the first format they support. AVIF gets served to Chrome and Firefox; WebP to Safari and slightly older browsers; JPEG to anything else.

Compression Settings

Quality settings matter more than format choice for most images:

JPEG quality 75-85 is the sweet spot for photos. Quality 90+ is wasted; 60 and below shows visible artifacts.
WebP quality 75-80 — slightly more aggressive than JPEG since the encoder is more efficient.
AVIF quality 50-65 — much more aggressive due to AVIF's efficient encoding.
PNG — no quality setting, but use a compressor like oxipng or pngquant to remove unnecessary data.

Tools like Squoosh (Google's image optimisation web app), ImageOptim (Mac), or build-tool plugins (sharp, vite-imagetools) handle compression automatically.

Sizing

An image displayed at 800×600 doesn't need a 4000×3000 source. Most performance issues we audit involve images served at 5-10× the resolution they're displayed at.

Determine the actual maximum display dimensions of each image (across breakpoints) and resize accordingly. For responsive images, generate multiple sizes:

<img src="hero-1200.jpg"
     srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w, hero-1600.jpg 1600w"
     sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
     width="1200" height="630" alt="...">

Browsers pick the smallest version that still meets display needs at the device's pixel ratio. A retina mobile shows the 800px version (400×2); a desktop shows 1200px; a 4K monitor pulls the 1600px.

Lazy-Loading

Above-the-fold images should always load eagerly. Below-the-fold images should lazy-load — they're not visible until the user scrolls.

<img src="hero.jpg" alt="...">                       <!-- above-fold, eager -->
<img src="below.jpg" loading="lazy" alt="...">       <!-- below-fold -->

Critical mistake: loading="lazy" on the LCP element. The browser explicitly defers it, destroying LCP. Reserve lazy-loading for genuinely below-the-fold images.

Modern browsers support native lazy-loading; no JavaScript library needed. The browser handles the IntersectionObserver internally and only loads images as they approach the viewport.

CDN Image Transformation

For sites with many images and frequent content updates, manually generating size and format variants doesn't scale. Image CDNs do it on the fly:

Cloudflare Images — bundled with Cloudflare; URL parameters control format and size.
Imgix — purpose-built image CDN; rich transformation API.
Cloudinary — full image management platform with transformations.
Bunny Optimizer / KeyCDN — competitive options with simpler APIs.

The pattern: store one high-resolution master image; the CDN serves automatically resized, compressed, format-optimised variants based on request parameters or the Accept header.

<img src="https://cdn.example.com/hero.jpg?w=1200&f=auto&q=80" alt="...">

f=auto serves AVIF to AVIF-supporting browsers, WebP to WebP-supporting, JPEG to others — based on the Accept header. No need to maintain three copies of every image.

The Markup Layer

Even with perfect images, markup affects performance:

Always set width and height attributes. Even if you set width: 100%; height: auto in CSS. The HTML attributes establish aspect ratio for layout, preventing CLS.
Use fetchpriority="high" on the LCP image to prioritise its download.

Preload the LCP image from the head:

<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">

Add descriptive alt text for accessibility and SEO.
Use <picture> for format negotiation; srcset for size negotiation; both together for both.

Common Anti-Patterns

Massive uncompressed PNGs for hero images

2MB PNG hero shipped to every visitor. Convert to AVIF/WebP/JPEG; use the right format. Hero should be under 200KB.

One giant image scaled by CSS

4000×3000 image displayed at 800×600. Bytes wasted on pixels nobody sees. Resize to actual display dimensions.

Lazy-loading everything

Including the LCP element. The browser defers loading; LCP suffers proportionally. Lazy-load only below-fold.

No responsive variants

Desktop hero served to mobile devices. Use srcset + sizes to serve appropriately sized variants per device.

SVG bloat

SVGs exported from design tools often contain bloat — embedded base64 images, redundant metadata, unused tags. Run through svgo or similar to strip; SVGs typically shrink 70%.

JavaScript-injected images

Images set via JS (img.src = '...') aren't discovered by the browser's preload scanner. They arrive late, hurting LCP. Use regular <img> tags wherever possible.

The Audit Workflow

Run Site Speed Check on the page — reports image weight, dimensions, and format issues.
Check Lighthouse → "Properly size images" and "Serve images in next-gen formats" — actionable suggestions ranked by potential savings.
Look for the largest image on each key page; that's typically the LCP element. Optimise it first.
Spot-check responsive variants on mobile devices — load Chrome DevTools, switch to mobile mode, see what was actually downloaded.

The Pragmatic Order of Operations

Convert hero images to WebP/AVIF with proper compression. Single largest impact.
Resize images to actual display dimensions. Stop shipping 4× more pixels than needed.
Add width and height attributes on every image. Eliminates CLS.
Lazy-load below-fold images; eager-load above-fold.
Add fetchpriority="high" to LCP images.
Set up an image CDN (Cloudflare Images, Imgix, etc.) for ongoing automation.
Audit and prune unused images — old uploads in /wp-content/uploads/ that are no longer referenced.

For most sites, doing 1-3 produces the bulk of the improvement. 4-5 are CLS and INP fixes. 6 is for sites with lots of images and active content. 7 is good housekeeping.

Run Site Speed Check before and after each change to track impact. Image optimisation is one of those rare cases where the technical work has visible, measurable, immediate results.