How Images Affect Website Speed and SEO

On most business websites images are more than half the page weight. They are also the easiest thing to fix, which makes the fact that they are usually ignored slightly remarkable.

Size them for where they display

A 4000px photograph displaying in an 800px slot sends roughly 25 times more pixel data than needed.

WordPress generates multiple sizes automatically, but only helps if the theme requests the right one. Check what is actually being served — DevTools shows both the intrinsic size and the displayed size, and the gap between them is your waste.

Use srcset so the browser picks an appropriate size for the device rather than sending the desktop image to a phone.

Use a modern format

AVIF and WebP with a JPEG fallback covers everything. PNG for a photograph is a common and expensive mistake.

Compress properly

Most photographs lose nothing visible at around 80% quality and shed most of their weight doing it. Compare before and after at full size once, satisfy yourself, then apply it everywhere.

The lazy-loading trap

Lazy loading defers images until they approach the viewport. Correct for images below the fold. Wrong for the hero image, and this is a common automatic behaviour rather than a deliberate choice.

The hero is usually the element LCP measures. Lazy-loading it means the browser waits before even requesting the thing being timed. A site can look optimised and score badly for exactly this reason.

Explicitly set loading="eager" on the hero, or exclude it in whatever plugin applies lazy loading globally.

Always set width and height

Without them the browser cannot reserve space, and everything below reflows when the image arrives. That is Cumulative Layout Shift and it is entirely preventable.

Set both even when CSS handles the sizing — the attributes give an aspect ratio to reserve against. How to fix CLS covers the rest.

Alt text

Two jobs: describe the image for anyone who cannot see it, and tell search engines what it shows.

• Describe what is in the image. "Kitchen extension with bifold doors onto a garden" is useful.
• Do not stuff keywords. "kitchen extension builder kent kitchen extension cost" helps nobody and reads as spam.
• Decorative images get empty alt (alt=""), so screen readers skip them rather than announcing a filename.
• Filenames matter a little. kitchen-extension-bifold-doors.jpg beats IMG_4821.jpg.

Where images help SEO rather than hurt it

• Image search is genuine traffic for some sectors, particularly anything visual
• Images reduce bounce on long content by breaking it up
• Product images are a conversion factor on eCommerce, which is a ranking factor on marketplaces

The goal is not fewer images. It is images that cost what they are worth.

A quick audit

1. Open your heaviest page in DevTools, Network tab, filter to images
2. Sort by size — anything over 200KB deserves a look
3. Compare intrinsic against displayed dimensions
4. Check the hero is not lazy-loaded
5. Confirm width and height are present

That takes ten minutes and frequently finds the largest single performance problem on the site.