On-Page Optimisation at Scale
E-Commerce Image SEO Ranking in Image Search and Improving Page Speed
Product images drive both image search traffic and page speed, two forces that pull in opposite directions unless you optimise deliberately.
Reading time · unlocks the next lesson
0:00 / 5:00 · pausedImage Search as a Traffic Channel
Google Images sends meaningful discovery traffic for product-led searches, especially on mobile, but it only surfaces images that are properly described and technically accessible. Descriptive, unique filenames (nike-air-force-1-white-side-view.jpg rather than IMG_4821.jpg) and specific alt text ("Nike Air Force 1 white leather trainer, side profile" rather than just "shoe") both feed directly into image indexing and relevance.
Serve each significant product photo at a genuinely high enough resolution to be useful in Google Images (at least 800px on the long edge) while using responsive srcset markup so the browser only downloads the size it actually needs — high resolution for image search doesn't have to mean high payload for page speed.
The Speed Trade-off
Product pages routinely fail Core Web Vitals because of unoptimised hero images pushing Largest Contentful Paint past the 2.5-second good threshold. Convert to modern formats (WebP or AVIF), compress aggressively (there is rarely a visible quality difference between 100% and 75% JPEG quality at web display sizes), and lazy-load every image below the fold while eagerly loading the primary product image so it isn't delayed by lazy-load logic.
Set explicit width and height attributes (or aspect-ratio in CSS) on every product image so the browser can reserve space before the image loads — missing this is one of the most common causes of Cumulative Layout Shift on product pages, since the page visibly jumps as images pop in.
- Compress to WebP/AVIF with a fallback, target under 100KB for standard product shots
- Set explicit width/height or aspect-ratio to prevent layout shift
- Eager-load the primary hero image; lazy-load everything below the fold
- Use descriptive, hyphenated filenames and specific alt text per image, not the product name repeated
Image Sitemaps and Structured Markup
For stores with large catalogues, submit a dedicated image sitemap (or extend the existing XML sitemap with image: tags) listing your key product images — this helps Google discover images on pages that are heavy on JavaScript-rendered galleries where crawlers might otherwise miss secondary images entirely.
Diagnosing with RankAudit
Run RankAudit's Core Web Vitals report filtered to product templates and sort by LCP descending; the worst offenders are almost always the ones with the largest uncompressed hero image. Cross-check the image audit sub-report for missing alt text and generic filenames across the same template.
Key takeaways
- ✓Use descriptive filenames and specific alt text on every product image, not the product name repeated
- ✓Serve responsive image sizes so image search quality doesn't cost you page speed
- ✓Always set explicit dimensions to prevent layout shift
- ✓Submit an image sitemap for JS-heavy galleries
- ✓Use RankAudit's Core Web Vitals report to find the worst LCP offenders by template
Why this lesson matters
This lesson belongs to On-Page Optimisation at Scale, the part of E-Commerce SEO where the goal is: build repeatable, template-level frameworks for product pages, category pages, schema and images that lift the whole catalogue at once.
Read it once, then do it straight away on a real site inside RankAudit. Nothing here is theory for its own sake — every step produces something you can show a client.
Do it now
- 1Open RankAudit with sample data already loaded, so you are not stuck on setup.
- 2Crawl a site and triage the issue list.
- 3Use RankAudit's template scoring view to find your ten worst-performing product and category templates and apply the frameworks from this module.
