Fixing Product Image SEO
Product photos do most of the selling on a shop page, and they are also how many shoppers find products in the first place, through Google Images, shopping results and visual search.
Yet product images are often uploaded straight from a supplier as IMG_4021.jpg, with no alt text, one angle only, and a gallery that loads by script after the page appears. The Ecommerce Audit checks how product images are set up. This guide covers what matters for product photos specifically: describing them, making every gallery image findable, handling colour variants, choosing formats and making the main image load quickly.
Why product images need their own attention
General image advice, about compression, dimensions and lazy loading, applies to shops as much as any site, and the Image Optimisation fixes cover it in depth. Product images have some extra jobs that general advice misses:
- They identify an exact item. Search engines use them to match your product with the same product elsewhere, and shoppers use them to check it is the right model, colour and size.
- They come in sets. A gallery of six to ten photos per product, often with zoom, video and 360-degree views, is normal. How that gallery is built decides whether search engines see one image or all of them.
- They change with variants. Picking "Sage green" should show the sage green photo, and that relationship should be clear in the page and the data.
- They are reused. The same photos feed your Product markup, your Merchant Center feed, social previews and marketplace listings, so a mistake in one place spreads.
The most frequent Ecommerce Audit findings on product images are empty alt text, galleries where only the first image is in the HTML, and very large original photos served to every device.
Alt text for product photos
Alt text is read aloud by screen readers and used by search engines to understand an image. For a product photo, it should say what the photo shows in the way a helpful shop assistant would describe it over the phone.
| Weak | Better |
|---|---|
alt="" on the main photo | alt="Harbour 3-seater rattan sofa in grey with cream cushions" |
alt="product image" | alt="Side view of the Harbour sofa showing the slim aluminium frame" |
alt="sofa sofa rattan sofa garden sofa cheap" | alt="Harbour sofa on a stone patio with a matching coffee table" |
| The same alt on all eight gallery images | A short description of what differs in each: back, detail of weave, cushion zip, folded cover |
Include the product name on the main image and describe what each additional photo adds. Mention colour and material where they are visible. Do not start with "Image of" or "Picture of"; screen readers already announce that it is an image.
Where alt text should be empty
Some images on a product page are decorative: a background texture, a divider, a trust badge that
repeats text already next to it. Those should have alt="" so screen readers skip them. Thumbnails
that are also buttons to switch the main photo are not decorative; give the button an accessible name
such as "Show image 3: side view". The image
alt text guide covers the general rules.
Galleries, zoom and carousels
Many product galleries are built by a script that fetches the image list after the page has loaded,
or that puts only the first photo in an <img> element and the rest in data-
attributes or CSS backgrounds. Search engines may render the page and find some of them, but the reliable
approach is simple: every gallery photo should be a normal <img> element with a real
src (or srcset) in the HTML the server sends.
<div class="gallery">
<img src="/img/harbour-sofa-grey-front-800.webp"
srcset="/img/harbour-sofa-grey-front-800.webp 800w,
/img/harbour-sofa-grey-front-1600.webp 1600w"
sizes="(min-width: 900px) 50vw, 100vw"
width="1600" height="1200"
alt="Harbour 3-seater rattan sofa in grey with cream cushions"
fetchpriority="high">
<img src="/img/harbour-sofa-grey-side-800.webp"
width="1600" height="1200" loading="lazy"
alt="Side view of the Harbour sofa showing the slim aluminium frame">
</div>Things to check in your gallery:
- CSS background images are not treated as content images by search engines. Use them for decoration only.
- Zoom images are often a separate, much larger file. That is fine, but make sure
the normal-size image is the one in
src, and the huge one only loads when zoom is used. - Carousels should let keyboard users move between slides and should not auto-rotate, which is both an accessibility problem and irritating for shoppers.
- Video needs its own poster image and, ideally, a text description; the thumbnail is often all a crawler sees.
Variant images
When a product comes in several colours, each colour's photos should be tied to that option. Shoppers expect the main image to change when they select a swatch, and search engines are better able to show the right photo for "grey rattan sofa" if the grey photo is clearly associated with the grey variant.
- Assign images to variants in your shop admin rather than just adding all colours to one gallery. Shopify, WooCommerce and most platforms support a variant image.
- If variants have their own URLs, as some shops choose, each variant URL should show its own colour first and carry that image in its Product markup.
- Swatches should be buttons with accessible names ("Colour: sage green"), not only coloured circles.
- Avoid showing a colour that is out of stock as the default image; shoppers click through and are disappointed.
Whether colours deserve separate URLs at all is a bigger decision with crawl and canonical consequences, covered in the variant URL strategy guide.
File names, formats and sizes for product photos
File names
A file name is a small signal, but a free one. harbour-sofa-grey-front.jpg tells search
engines more than IMG_4021.jpg or SUP-88213-01.jpg. Use lowercase words separated
by hyphens: product, colour, view. Rename before uploading, because many platforms keep the original
file name in the image URL, and renaming later can change URLs that search engines have already indexed.
Formats
Google Search supports common formats including JPEG, PNG, WebP, GIF, SVG and AVIF. For product photos, WebP or AVIF usually give much smaller files than JPEG at similar quality. Most shop platforms and image CDNs now convert automatically and serve the best format each browser supports, so check what yours already does before converting by hand. PNG is best kept for images that need transparency, such as a cut-out product on a coloured background.
Sizes
Keep a high-resolution master for zoom and for feeds, and serve resized versions to the page with
srcset so a phone does not download a 4,000-pixel photo. Always set width and
height attributes, or a CSS aspect ratio, so the gallery does not jump as images load. Google's
product structured data documentation recommends high-resolution images and multiple aspect ratios; your
master files make that easy to supply.
Images in markup, feeds and search features
The same product photos appear in several places outside the page. Keeping them consistent avoids confusing both shoppers and search engines.
| Where | What to check |
|---|---|
| Product structured data | The image property lists full https URLs of real
product photos that load without a login. The Product
schema guide covers the markup. |
| Merchant Center feed | The main image shows the product clearly, without promotional text, watermarks or added borders, following Google's current image requirements for listings. |
| Social previews | The og:image is the main product photo at a suitable size, not your logo. |
| Image sitemap | Optional. Useful when gallery images are loaded in ways crawlers may miss, or when image URLs sit on a separate CDN domain. |
| robots.txt | Your image folder or CDN path is not blocked, or search engines cannot index the photos at all. |
The fix, step by step
Step 1
Audit one product gallery end to end
Pick a best-selling product and open View Source. Count how many gallery photos appear as
<img> elements with a real src, note their alt text and file names, and
compare with what you see on screen. Then open the Network panel, filter to images and reload, noting
the size of the main photo. Add the Ecommerce Audit image findings, and you have a clear
picture of what the template is doing for every product.
Step 2
Write alt text that describes the product
For your priority products, give the main photo alt text containing the product name,
colour and material, and give each additional photo a short description of what it adds, such as the
back view or a close-up of the stitching. Leave decorative images empty with alt="". Where
your platform supports it, set a sensible default in the template, such as the product name plus the
variant, so new products never go live with empty alt text.
Step 3
Rename files before uploading
Agree
a naming pattern such as product, colour and view in lowercase with hyphens, for example harbour-sofa-grey-side.jpg,
and apply it to every new upload, including photos received from suppliers. For existing products, rename
only where the platform handles the change safely or where the images are not yet indexed, because changing
a file name often changes its URL. Keep original high-resolution masters in a separate, clearly named
folder.
Step 4
Make every gallery image reachable in the HTML
Change the gallery template so every photo is output as an <img>
element with a real src or srcset in the server response, rather than being
fetched later or hidden in data attributes and CSS backgrounds. Keep the large zoom file separate and
load it only when zoom is used. Make thumbnails into labelled buttons, and stop any carousel from rotating
by itself so keyboard and screen reader users can control it.
Step 5
Connect variant images to their options
In your shop admin, assign the correct photo to each colour or style variant so the main image changes when a swatch is chosen. Check the default variant shown on page load is in stock and has its own photo. If variants have separate URLs, make sure each one leads with its own image and lists it in its Product markup. Give each swatch an accessible name that includes the colour, not only a coloured circle.
Step 6
Load the main image first and the rest later
The main product photo is often the Largest Contentful Paint element, so never lazy-load
it. Add fetchpriority="high" to it, serve it with srcset in a modern format
such as WebP or AVIF, and set width and height to prevent layout shift. Add loading="lazy"
to the other gallery photos and to related product thumbnails further down the page, which saves data
for shoppers who never scroll to them.
Step 7
Match images across markup, feeds and the page
Check that the image URLs in your Product markup, the main image in
your Merchant Center feed and the og:image all point at real, current photos of the same
product, and that none of them are blocked by robots.txt on your own domain or an image CDN. Then rerun
the Ecommerce Audit on your priority products and watch Google Images traffic in Search
Console by switching the search type filter to Image.
Platform notes
- Shopify. Alt text is set per media item in the product editor. Shopify's image CDN
resizes and serves modern formats through the theme's
image_urlandimage_tagfilters, so most format work is already done; check your theme outputssrcsetand does not lazy-load the first image. See Shopify image fixes. - WooCommerce. Alt text is set in the media library and is shared wherever that file
is used. WordPress generates several sizes and outputs
srcset; an image optimisation plugin or CDN can add WebP or AVIF. Variation images are set on each variation. - Headless and custom. Use your framework's image component or an image service, render the gallery on the server, and store alt text as a field on each product image rather than generating it on the fly.
1. Does alt text on product images actually help rankings?
Alt text helps search engines understand what an image shows, which matters most for appearing in Google Images and visual search results. It also makes your product pages usable for people who rely on screen readers, which is a legal and ethical expectation in its own right. It is not a powerful ranking lever for the page as a whole, so write it to describe the product accurately, not to repeat keywords. Descriptive, specific alt text serves both purposes.
2. Should every image in the product gallery have different alt text?
Yes, where the images show different things. The main photo can carry the full product name, colour and material, and each extra photo should describe what it adds, such as the back, a detail of the fabric or the product in use. Repeating the same alt text on eight photos gives screen reader users no way to tell them apart and gives search engines less information. Purely decorative images on the page should have empty alt text instead.
3. Can I use the manufacturer's product photos?
You can if your supplier allows it, and many shops do. The drawback is that dozens of other retailers will use the same photos, so they do nothing to make your listing stand out in image results or shopping listings. Adding a few photos of your own, such as the product in use, a scale shot with a familiar object or close-ups of details customers ask about, gives shoppers something extra and gives your page images no one else has.
4. Is WebP or AVIF better for product images?
Both usually produce much smaller files than JPEG at similar quality, and AVIF is often smaller still, though it can take longer to encode. Google Search supports both formats. In practice the best option is to let your platform or image CDN choose, serving AVIF or WebP to browsers that support them and JPEG to the rest. Keep your high-resolution masters in a standard format so you can regenerate versions later if needed.
5. Why are my product images not showing in Google Images?
Common causes are images blocked by robots.txt, often on a separate image CDN domain, gallery photos that are loaded by script and never appear as normal image elements, and product pages that are not indexed in the first place. Check the page with URL Inspection, look at the rendered HTML for your image URLs, and test the image URL itself. Also check the Performance report in Search Console with the search type set to Image to see what already appears.
6. Should I lazy-load all product images to speed up the page?
No. Lazy-loading the main product photo usually makes the page feel slower, because that photo is often the largest element on screen and the browser delays fetching it. Load the main image straight away, ideally with a high fetch priority, and lazy-load the other gallery photos and related product thumbnails further down the page. That combination gives shoppers the first image quickly while still saving data on images they may never scroll to.
7. Do I need an image sitemap for my shop?
Usually not, if your product photos are normal image elements in the page HTML and your image folders are crawlable. Search engines find them by crawling the product pages. An image sitemap is useful when images are loaded in ways crawlers might miss, or when they are hosted on a separate CDN domain and you want to be sure they are discovered. Many shop platforms already add image entries to their product sitemaps automatically, so check before building one.
The Ecommerce Audit checks how product images are set up alongside product page completeness, category page depth, Product and review schema, faceted navigation, internal links and product page speed.
Open Ecommerce Audit Fixes →