Why Ecommerce Image Optimisation Affects Your Rankings
Images do two entirely separate jobs on a shop and most advice runs them together. They are the largest cause of slowness. They are an underused source of traffic in their own right. Those need different work.
Two Different Jobs
Images affect a shop in two unrelated ways. They are the main reason pages are heavy and slow. They are also a route by which people find products, through image search.
The first job: weight. Size, format and delivery. It affects speed, which affects rankings and how much of a large catalogue gets worked through at all.
The second job: discovery. Naming, describing and surrounding an image with enough context to be understood. It affects whether image search reaches you.
Why running them together causes problems. Because the work pulls in opposite directions.
The first pushes towards fewer and smaller images. The second rewards more images, larger and better. A shop optimising only for weight can strip out exactly what made it findable. A shop optimising only for discovery ends up slow.
How to hold both. Decide the quality you need for selling, then deliver it as efficiently as possible. Quality is a commercial decision. Delivery is a technical one. Confusing the two produces shops with beautiful photography nobody waits to see.
Why Images Are The Biggest Weight On A Shop
On almost every shop we look at, images account for more of the page weight than everything else combined. Not by a small margin. The reason is structural rather than careless.
Where it comes from. Photographs are taken at high resolution because they need to be zoomable and print ready. They are then uploaded as they are, because nothing in the process asks anybody to reduce them.
Why a category page multiplies it. The problem that catches shops out.
A product page has one heavy image plus a few alternates. A category page has forty product thumbnails. If those are the full images resized by the browser rather than genuinely smaller files, the page is carrying forty full photographs to display forty small squares.
The encouraging part. This is usually the easiest large improvement on a shop, since it is systematic and needs no design decisions.
Against everything else. Themes, scripts and applications add real weight, covered in our page speed guide. On a typical shop they are still a fraction of the photography. Per block one it affects crawl too, so on a large catalogue image weight is part of why changes take so long to register.
A heavy shop is worked through more slowly, so on a large catalogue image weight is not only a ranking factor. It is part of why changes take a long time to register.
Size, Format And Delivery
Three decisions govern how much an image costs to display. None of them requires touching how the picture looks.
Size. The largest single saving. The most commonly missed.
An image should not be substantially larger than the space it appears in. A photograph displayed at four hundred pixels wide has no reason to be four thousand. The difference between those two files is enormous. This is not about the visible quality. It is about not sending data the screen cannot use.
Format. Modern formats give visibly identical images at much smaller sizes.
The decision here is whether your platform serves them, then whether it falls back gracefully for anything that cannot display them. Most current platforms handle this without intervention, so the question is usually whether an older shop has been left behind.
Delivery. Sending the right size to the right device. How each of these is implemented depends on your platform, so the decision worth making is that they should be done, plus by whom.
A phone does not need the image a large monitor needs. Serving one file to both means either the phone is wasting data or the monitor is showing something soft. Modern arrangements let a browser choose. The decision is whether that has been set up rather than how it works.
How each of these is implemented depends entirely on your platform and theme. The decision worth making is that they should be done, plus by whom, per our guide to choosing an agency.
Alt Text Done Properly
Alt text exists so that somebody who cannot see an image knows what it shows. That is its purpose. Treating it as anything else produces worse results in both directions.
Who it serves. People using a screen reader, first. On a shop that matters more than elsewhere, because the image frequently carries information the description does not: what it looks like, what is included, how it is finished.
Good alt text. Describes the image usefully, in a sentence.
What the product is, plus what this image shows that another does not. A rear view, a detail of the fastening, the scale against something familiar.
When there is nothing to say. Decorative images need an empty attribute rather than a description, so assistive software passes over them.
Why stuffing it with search terms fails twice. The point worth making plainly.
It does not help ranking, since a list of terms describes nothing. It also makes the shop worse for the people the attribute exists for, who now hear a string of keywords where they needed a description.
That second failure is the one worth caring about. Somebody trying to buy from you is being given something useless so that a search engine can be given something it ignores.
File Naming And Structure
Image filenames are a small signal and they cost nothing to get right. On a shop where images arrive from a supplier, they are almost universally wrong.
What arrives from a supplier. Reference numbers. A file named by a manufacturer's internal part code tells anything reading it precisely nothing. So does a camera's sequence number.
A useful filename. The product, plus what this image shows if there are several. Words separated so they can be read as words rather than run together.
How much it is worth. Modest, worth doing because it is free.
This will not move a shop on its own. It is one of several small signals that together tell a search engine what an image is. It matters most for block seven where the image itself is what somebody is looking for.
The practical problem. Renaming five thousand files by hand is not happening.
Per block eight this belongs in the systematic category: worth doing for new images going forward, worth doing in bulk if the naming can be derived from product data, never worth a manual programme.
Lazy Loading And What It Breaks
Deferring images until they are needed is one of the most effective speed improvements available on a shop. Done carelessly it can hide those images from being found at all.
What it does. Loads what is on screen and waits on the rest. On a category page showing forty products, only the first few are visible. Loading the other thirty-odd immediately costs the visitor time for images they may never scroll to.
What can go wrong. The image is never really there.
Some implementations only place the image once a real person scrolls or interacts. Anything reading the page without behaving like a person finds no image at all, so the picture exists for shoppers and does not exist for search.
What that costs. Everything in block seven. A shop whose images are invisible has lost that channel entirely, usually without knowing it existed.
How to get both. Use the browser's own deferral rather than a custom arrangement.
Current browsers support this directly. Images deferred that way remain present in the page. Anything more elaborate should be checked rather than assumed, which is what block nine means about apps that make things worse.
Never defer. The main image at the top of the page.
It is on screen immediately, so deferring it delays what the visitor came to see.
Image Search As A Traffic Source
For visual products, image search sends real buyers. Most shops have never treated it as a channel, which is why it stays available.
Which categories it works for. Clothing, furniture, tiles, flooring, jewellery, anything chosen on how it looks. Also parts, for the opposite reason: somebody with a broken component frequently cannot name it, so they search for something resembling what they hold.
What makes a shop findable there. Four things, only one of which is about the image file.
The image has to be genuinely present, per block six.
The page has to explain what the image shows. Search engines rely heavily on surrounding text to understand a picture, so the product name, description and nearby content do most of the work.
The image has to be good enough to click. A dim photograph on a cluttered background loses to a clear one.
The destination has to be useful. Somebody arriving from an image lands on the product page, which has to answer what they came for.
What this is worth. Modest volume, unusually well qualified. Somebody who searched an image and clicked yours has already decided it looks right.
Doing This At Catalogue Scale
Five thousand images cannot be handled individually. The work divides into what is decided once and applied everywhere, then what genuinely needs a person.
Decided once. Almost all of blocks three and six.
What sizes are generated, what formats are served, how images reach different devices, how deferral behaves. Settings made once, applying to every image the shop has and every one it adds.
Derived from data. Filenames and a baseline of alt text.
Where product data is structured, both can be generated from it. That produces something accurate and adequate rather than good, which is the right standard for pages nobody is going to visit individually.
Genuinely needs a person. Alt text on your most important products, where the images carry information worth describing properly. Photography quality for the products in block seven. And checking that whatever was decided once is still doing what it was supposed to.
The rule. Fix the system, then improve the exceptions. Reversing that order is how shops spend months on image work and end up with a slow catalogue containing a few hundred well described products.
Common Mistakes
Uploading straight from the camera. The most costly of the four.
A photograph as it left the camera is enormous. Uploaded unchanged across a catalogue it produces a slow shop, for reasons nobody investigates because nobody thinks of photographs as a technical problem.
One enormous hero image. A very large picture at the top of a home page or category.
It is the first thing a visitor waits for, so it delays the entire page. It is also the image most likely to be swapped seasonally by somebody not thinking about size.
No alt text at all. Common where images arrive automatically from a feed.
Per block four, this fails the people the attribute exists for before it fails anything to do with search.
Optimisation applications that make it worse. The one nobody expects.
An application installed to compress images adds its own code to every page, may break the deferral in block six, then can leave both versions in place. Installing something to solve a weight problem occasionally produces a heavier shop.
Forty photographs
to show forty squares.
If your category thumbnails are full images resized by the browser, that page is carrying forty complete photographs to display forty small pictures. It is usually the easiest large improvement available on a shop.
What is included every month:
£350 per month, one target area. No setup fee, nothing billed separately.
Twenty-two guides.
One subject.
This guide covers images. The rest of the series covers the sequence, structure, category and product pages, technical health, measurement and everything a store owner has to decide.
