Image SEO for product photos: an optimisation guide

How do you optimise product images for SEO?

Optimising product images comes down to three jobs: letting Google find the image (img elements, sitemaps), helping it understand the image (file name, alt text, surrounding text) and making the page load fast (right format, size and loading priority). Together they improve both Google Images traffic and the overall performance of your product pages.

In ecommerce, the image is the product. Shoppers judge fabric texture, the sole of a shoe or the inside of a bag from photos. That makes image optimisation a conversion issue as well as a technical SEO task. This article is not about photography itself; it is about how finished images should be served on the web.

How does Google find product images?

Google's image SEO documentation is explicit: Google does not index CSS background images. If you want an image to appear in search, add it with a standard HTML img element. Google supports BMP, GIF, JPEG, PNG, WebP, SVG and AVIF images referenced in the src attribute of an img element.

Common problems in ecommerce themes include:

• Gallery images loaded only by JavaScript: if the first image is in the HTML and the rest load on click, extra images may not be discovered.
• Category banners set as CSS backgrounds: these images will not appear in search.
• Images served from a CDN on another domain: that is fine in itself, but make sure robots.txt does not block crawling of that domain.

Google also lets you submit an image sitemap for images it might not otherwise discover. For stores with large numbers of product photos, this is a practical way to support discovery.

How should you write file names and alt text?

Google recommends short, descriptive file names; its documentation notes that a meaningful name is better than something like IMG00023.JPG. For alt text, it asks for useful, information-rich descriptions that use keywords appropriately and in context. Turning alt text into a keyword list is exactly what Google shows as a bad example.

Element	Weak example	Strong example
File name	DSC_4481.jpg	mens-brown-leather-boot-side.jpg
Alt text	"boot"	"Men's brown leather boot, side view"
Alt text (overdone)	"boot mens boot leather boot cheap boot boot price"	"Brown leather boot with rubber sole, sole detail"
Gallery image	Same alt text on every image	Alt text describing each angle separately

Alt text is also about accessibility: a shopper using a screen reader learns about the product from it. For products with variants, adding colour and angle to alt text gives real information to both users and Google. For purely decorative images, an empty alt attribute is correct.

Google also recommends placing images near relevant text and on pages relevant to the image subject. When a product photo sits alongside the product name, description and price, Google can more easily understand what it shows.

Which image format and size should you use?

For product photography, modern formats (WebP, AVIF) usually deliver the same visual quality as JPEG at a smaller file size. Test how much you actually gain with your own images. SVG suits icons and logos with transparent backgrounds.

On sizing, the core rule is not to download far larger images than the size displayed on screen. Sending a large desktop product photo unchanged to mobile is one of the most common speed problems. Responsive images are the fix: Google recommends using the srcset attribute or the picture element, always with a fallback src.

Checklist:

1. Export product images at the largest display size you actually need.
2. Offer several widths with srcset and let the browser choose the right one.
3. Use WebP or AVIF and define a fallback format for older browsers.
4. Add width and height attributes to every img element; this helps prevent layout shift while images load.
5. Load the high-resolution zoom image only when the shopper actually zooms.

How should images on category pages be handled?

Category pages show dozens of small product images, and that grid is often the heaviest part of the page. Instead of shrinking and reusing the large product page image, serve a separate small version sized for the grid card. The first row of products is visible on load and should load normally, while lower rows should be lazy-loaded. Using the product name as alt text on card images supports both accessibility and context in image search.

How should lazy loading work on a product page?

web.dev's guide to browser-level lazy loading carries an important warning: do not lazy-load images that are likely to be in the viewport when the page loads, especially the LCP image. On a product page, the main product image is often the largest element and therefore the LCP image. Giving it loading="lazy" delays the main content.

The right setup looks like this:

Image	Recommended loading
Main product image (visible on load)	Normal loading, fetchpriority="high" if needed
Other gallery images	loading="lazy"
Related products, review photos	loading="lazy"
Zoom image	Load on user interaction

web.dev notes that fetchpriority="high" can raise the loading priority of an important image. We look at how page speed affects sales in our article on Core Web Vitals and conversion rate.

Which image does Google feature?

To guide which image represents your page in search results, Google says you can use the schema.org primaryImageOfPage property or the og:image meta tag. The image should be relevant and representative of the page; avoid generic images such as your site logo.

On product pages, listing the main product images in the image property of Product structured data also helps Google match product information correctly. We cover that markup in our Product schema guide. If you list products on Google Shopping, remember that Merchant Center has its own requirements for the image link, and the feed image should show the same product as the page.

Example: auditing one product page

Example: a footwear brand audits a product page and finds a 3,000 pixel wide JPEG main image that is lazy-loaded, empty alt text on gallery images and camera-generated file names. The fix order is: remove lazy loading from the main image and serve a mobile size with srcset, then write alt text describing each gallery angle, and finally apply a descriptive file name standard to newly uploaded images. Bulk renaming existing files changes their URLs, so it is low priority.

Key takeaways

• Add images with img elements rather than CSS backgrounds; Google does not index CSS images.
• Use short, descriptive file names and contextual alt text without keyword stuffing.
• Serve the right size with WebP or AVIF and srcset, and set width and height.
• Never lazy-load the main product image; lazy-load the rest of the gallery.
• Use an image sitemap for large catalogues and og:image to set a representative image.

If you would like your product pages' image and speed performance reviewed together, Performetic can prepare a free growth analysis for you.