Image optimisation done properly
On most business sites images are the majority of page weight, which makes them the cheapest large improvement available. Four decisions, in the order they matter.
Format
WebP is the sensible default. Roughly 25–35% smaller than an equivalent-quality JPEG, supported by every browser in current use.
AVIF is smaller again, often substantially, but encodes slowly and support is good rather than universal. Worth serving with a WebP fallback if you have the tooling.
SVG for logos, icons and anything geometric. Scales perfectly, usually tiny.
PNG only when you need lossless or sharp transparency. A photograph saved as PNG is a common and expensive mistake.
Dimensions
The most wasted bytes on the web are images served far larger than they display. A 3000px photo in a 600px slot means the browser downloads roughly 25 times the pixels it will use.
`srcset` is the fix: provide several sizes and let the browser pick based on the device and viewport. Modern frameworks generate these automatically; on WordPress the theme has to be doing it, and many do not.
Rule of thumb: no image should be more than about twice its maximum display width. Twice, not equal, so it stays sharp on high-density screens.
Loading behaviour
Below the fold: lazy load. `loading="lazy"` is one attribute and it is well supported.
Above the fold: never lazy load, and consider `fetchpriority="high"` on the LCP image so the browser prioritises it over other resources.
The mistake that undoes all of this is a blanket lazy-load rule applied by a plugin to every image including the hero. Check the rendered HTML of your most important page rather than trusting the setting.
Always set `width` and `height` on every image. The browser uses them to reserve space before the file arrives, which is the main fix for Cumulative Layout Shift. It costs nothing and it is missing on a surprising number of sites.
Compression, and the point of diminishing returns
For photographs, quality around 75–85 is usually indistinguishable from the original at a fraction of the size. Below about 65 artefacts start showing on detailed images.
Do not spend hours squeezing the last few kilobytes from an already-optimised set. Going from 4MB to 200KB is the win. Going from 200KB to 180KB is not where your remaining time should go — that time is better spent on the render-blocking CSS.
Common questions
Should I use WebP or AVIF?
WebP as the default — smaller than JPEG and universally supported. AVIF if your tooling can produce it with a WebP fallback; it compresses better but encodes slowly and support is not quite universal.
What size should my images be?
No more than about twice the maximum width they display at, so they stay sharp on high-density screens without wasting bytes. Use srcset to serve smaller versions to smaller devices rather than one size for everyone.
Does lazy loading help or hurt?
Helps below the fold, hurts above it. Lazy-loading your hero image delays the exact element LCP measures. Apply it selectively rather than site-wide.
Do image compression plugins work?
The good ones do — they convert formats and generate sizes, which is most of the value. What they cannot fix is a theme that ignores the generated sizes and outputs the full-size image anyway, which is why results vary so much between sites running the same plugin.
Want us to look at your site?
We will tell you whether the problem is hosting, plugins, architecture or something else entirely — including when the answer is that you should not rebuild and should spend the money on traffic instead. No charge for the assessment.
Pricing: US clients (USD) · India clients (INR)
Related guides
- How to fix a slow LCP, step by step
- Why your WordPress site is slow — and what actually fixes it
- Technical SEO checklist for a business website