Image SEO for E-commerce

Update, July 2026: I checked this advice again seven years later. Read Image SEO in 2026: what changed since 2019 for the current version.

The original article was posted on Sirv’s blog

Have these questions ever crossed your mind?

• What is image SEO?
• How can I rank product images in Google Image search?
• What is the best image format for product photos?
• What's the difference between alt and title (and are they really necessary)?
• How do you make images (and the entire website) load faster?
• How can I use structured data to gain more traffic?
• What effects will a CDN have on my image SEO?

This guide answers each question with examples from e-commerce sites.

What is image SEO?

Image SEO is the process of optimizing your images to rank them better in search engines. It involves reducing image size while retaining acceptable quality (to increase page speed), as well as adding additional markup to increase your image visibility in search engines.

Why is image SEO important?

In the 2019 data below, Google Images had substantial search volume.

It received less SEO attention because many people considered its traffic difficult to convert.

This is what Google Image search result looks like on a laptop computer today:

The interface gives users a dedicated button to visit the website, as well as actions to share, bookmark, or collect an image.

Update 12.09.2019 - All the rich meta data like reviews, product price, brand etc. is now clearly visible on desktop too (this wasn't the case back when I first wrote the article).

Now here's how image search results look on mobile devices:

The mobile interface is designed for browsing products. Google displays a large image and uses structured data markup to show price, brand, stock status, and other product details.

Another important difference between mobile and desktop image results is the "related images" on the mobile version. Even if your product images don't make it to the top of the image search result page, they can still be shown in the related block, driving more traffic to your website.

Google Image Search can send useful e-commerce traffic. Visual search adds another way for people to find products:

An example of visual search in Google Images. Image by Google

Visual search was already handling hundreds of millions of searches on Pinterest when this article was written. Google Lens brought the same interaction into Google Images.

Visual search uses machine learning to identify the image and combine it with information from the page.

How does Google Image Search work?

Google Cloud Vision is the core technology behind Google Image Search.

Like all other image recognition platforms, it's based on Artificial Intelligence and Machine Learning, but Google has the added capability to extract and analyze information from:

• The page where the image was found;
• Other websites using the same or similar images;
• Image SEO data (structured markup, file names, image alt attributes, etc.).

Below is an example of what Cloud Vision concludes, by analyzing web entities (websites that use the same or similar images). You can try Cloud Vision yourself.

It identified the shoe as an Adidas Superstar sneaker for women.

Context is also a major ranking factor.

We now prioritize sites where the image is central to the page, and higher up on the page. So if you’re looking to buy a specific pair of shoes, a product page dedicated to that pair of shoes will be prioritized above, say, a category page showing a range of shoe styles.

Source - Google blog

How to check your Google Image traffic

Check current Google Image traffic before changing anything, so you have a baseline.

Go to Google Search Console, open the performance report and switch the "Search Type" from "Search" to "Image".

If you'd like to go deeper than that, you can analyze user behavior in Google Analytics, go to Aquisition -> All Traffic -> Source/Medium and look for google images / organic. If you're not familiar with Google Analytics and would like a more detailed walkthrough, read this post from Yoast.

Make sure your images are accessible to search engines

Google has to fetch an image before it can index it. Start by checking crawl access and broken URLs.

Check for broken image links and images blocked by robots.txt

An obvious place to look for broken links is the coverage report in Google Search Console.

If your website does not happen to be in Google Search Console, you'll need special software. Screaming Frog SEO Spider is a really good one, and I'll be using it as an example below. It's free to scan websites with fewer than 500 pages.

Now let's check if your images are easily accessible by search engines...

Check for pages blocked in robots.txt

1. Open Screaming Frog SEO Spider.
2. Enter your website URL.
3. Click "Start".
4. After the scan has finished, click the "Response Codes" tab.
5. Click on "Blocked by Robots.txt" on the right-hand panel.

You'll be presented with a list of pages that are blocked in robots.txt. Ask your developer/SEO to fix this situation or do it yourself. Robots.txt is located in your website's root folder.

Check for broken image links

If you use Sirv, you can instantly spot broken image links in the Analytics section of your Sirv account. You can see what the image URL was and where it was requested from (referrer).

Alternatively, you can use Screaming Frog again. Choose results with status code "Client error (4xx)". Alternatively, you can use Xenu's Link Sleuth, it's a completely free broken link checker.

Create an image sitemap

Image sitemaps make it easier for Google to find and index your images.

You can either create a separate sitemap for your images or include image information in your existing sitemap.

Please refer to this image sitemap guide by Google for a more detailed explanation.

How to implement image sitemaps

• WooCommerce: Yoast SEO will add images to your sitemap automatically.
• Shopify: try the Image Sitemap app.
• Magento: Mageworx Seo Ultimate is a solid extension.

Image SEO: How to rank your product images in Google Image Search

One of the most important factors for ranking your images is how well your product and category pages rank in regular Google Search. It's nearly impossible to appear in image search if your online store is ranking poorly.

It's therefore important to get your on-page SEO and UX right. This includes your meta tags, text, titles, your product image size, quality and loading speed.

In this part, I'll touch only the classic Image SEO parts. Image optimization and UX are covered in the next section.

Title, description and on-page content

To provide more context to its image search results, Google pulls information from your website.

1. The image title is taken from the page's meta title tag (not to be confused with the image's "title" attribute, which has no use).
2. Your website name.
3. The description is taken from either the image alt text, the surrounding content, your meta description tag or it can be absent completely. Google decides whether or not to show this snippet, based on its likelihood of adding value to the search result and increasing its CTR.

If you're doing SEO for your e-commerce website, the chances of you ignoring your title tag are quite low. There is no image specific advice, just follow Google's guidelines and you'll do just fine.

The anatomy of a perfect e-commerce page by Bryan Dean.

On-page content, such as the product description, matters in both regular and image search results. Bryan Dean's e-commerce SEO guide covers the wider page.

How to name images for better SEO

Use descriptive file names. adidas-superstar-white-shoe.jpg says more than DSC001.jpg. Separate words with hyphens, not underscores.

File name is a super minor ranking factor though, if you have thousands of images and don't have an easy way of renaming and referencing them - don't bother, it's not worth it.

The alt text

The alt image attribute, commonly referred to as the "alt tag" or "alt text", was created to make the web a more accessible place.

1. Visually impaired people browse the web with the help of screen reader software. Screen reader software uses alt text to announce what the image is about. Ever wondered what it's like to browse the web as a visually impaired person? Read this.
2. The content of your image alt text is what's shown before the image is rendered. It's really useful for people with slow or unstable connections.
3. It's used by Google in a similar way to anchor text if you happen to use your image as a link.

Good alt text follows a few rules:

• Don't keyword stuff;
• Be descriptive;
• Be detailed;
• Keep the text fewer than 125 characters.

Examples:

Bad (missing alt text):

<img src="shoe.jpg" alt="" />

Bad (keyword stuffing):

<img src="shoe.jpg" alt="adidas shoe for sale adidas shoes for sale adidas shoes for men adidas shoes - originals sale"/>

Better:

<img src="shoe.jpg" alt="Adidas shoe"/>

Best:

<img src="adidas-shoe.jpg" alt="White Men's Adidas Superstar Shoe"/>

If you're interested in a more in-depth guide to alt text writing intricacies, I recommend reading this nice article by Hubspot.

Structured data is a must

Mobile Google Image Search looks gorgeous for e-commerce. For example:

The product information is pulled from structured data on the page where Google found the image.

Here's what info Google can use in Google Image Search results:

• Product image(s)
• Price
• Description
• Availability
• Brand
• Rating

Google has a decent guide to product structured data.

Some tips:

• Use Schema.org/Product in JSON-LD format. It's recommended by Google, it's clean and easy to maintain.
• Use either JPEG or PNG images in your structured markup, since Google does not state WebP support for the product markup image object yet.
• The recommended aspect ratios are 16x9, 4x3 and 1x1.
• Image size must be at least 50,000 pixels (height*width). To put it simply, 250px * 200px is the bare minimum. It's better to use much bigger images than that, at least 1000px*1000px.
• You can use CDN image URLs in your product structured markup.

The cool thing about structured product data is that it's also used by Google's Merchant Center, Facebook and Pinterest (it supports JSON-LD, though it's not documented).

It's highly likely that all e-commerce platforms will support structured product data either now or in the future. It'll boost your rankings today and it will generate even more traffic in the future.

The next section covers image delivery and performance.

Image Optimization

Image optimization might sound complicated, but it doesn't have to be.

For most online stores, it's impossible to sell anything without images. In fact, images are responsible for 55-65% of the total transfer size on all websites (the median size of images is 1600 KB for Magento stores, according to HTTP Archive).

Loading speed is a ranking factor. Poor UX due to a slow website will hurt your sales. Low-quality product images can make your website faster, but it'll have a negative impact on your conversions and will negatively affect your image ranking in image search. This is due to how image recognition algorithms work, high-quality images have less noise (compression artifacts), which make it easier for ML algorithms to correctly identify objects in images.

You have to hit the sweet spot between image quality and loading speed to succeed. Thankfully, it's possible and not even hard.

Here are 7 tips to make your images load fast and look amazing.

Image quality - find the perfect balance

Big, high-quality product images increase sales. Image recognition success is also highly reliant on the source image quality.

But high-quality comes at a price. Pages on e-commerce stores typically have a lot of product images, your website loading speed will suffer if you go wild with your image quality. You must find a happy balance between good quality and small file size.

At Sirv, we’ve spent hundreds of hours defining perfect image compression settings (typically 80% quality for JPEG and WebP, with PNG optimization enabled) to achieve the perfect balance between image quality and file size. All images served by Sirv are automatically optimized. We also believe in giving you control, so you can easily tweak your default settings (learn more here).

Use modern image formats

The three most popular image formats on the web can hardly be called modern.

• JPEG was released in 1992.
• PNG emerged in 1996.
• GIF is 1 year younger than yours truly, created in 1989.

There are some that are worthy of the "next-gen" title though: WebP, JPEG XR and JPEG 2000 are all wildly superior to the previous generation of image formats. They're doing a much better job at both lossy and lossless image compression.

You might ask, - if they're so superior, why aren't they used more widely?

Two words - browser support. This is why old formats like GIF are still around, because every web browser and every operating system support them.

Here are the browser support stats for each of the modern formats:

• WebP (~80%)
• JPEG 2000 (13.65%)
• JPEG XR (4.87%)

WebP is the clear winner here with ~80% browser support. All the major players - Google (they created WebP), Mozilla and Microsoft all support WebP. Smaller browsers like Opera, Vivaldi and Brave are all using the rendering engine that powers Chrome, making them support WebP by default. It's currently unclear whether the last remaining player in the browser market - Apple - jumps on the WebP bandwagon or not.

This shouldn't stop you from using WebP as your main image format for your product images. You can easily serve WebP to supported browsers and a dinosaur era format to Safari.

How to start using next-gen image formats (WebP) today

Use Sirv. It'll automatically serve your product images in the perfect image format.

It's super easy to integrate with your store, plus there are plugins for:

• WooCommerce
• Magento 1 and 2
• Prestashop
• Salesforce Commerce Cloud

Serve properly scaled images

A very common mistake with a really high impact on page loading time.

Let's look at this page, for example. The max width for the content container is 740 pixels. Which means any image in this post that is wider than 740 pixels would be downloaded and then rescaled to 740px width... by the browser.

The browser automatically scales the image to fit the container. To say that this is not optimal for performance would be an understatement. To demonstrate, let's take a look at the original unoptimized PNG image and an optimized image with optimal quality, proper scaling and a modern image format:

The difference is massive.

Solving the responsive image problem

The previous example illustrated the massive implications bad image scaling could have on a regular, desktop computer experience. But we live in a responsive era, where mobile devices account for ~60% of traffic. The proper scaling problem becomes even harder to solve.

Mobile devices come in different shapes and sizes, some with HIDPI displays with pixel density as high as 3x (ultra retina displays). This means we have to serve individually scaled images to each and every device to achieve the best performance.

The old-school solution would be to use the SRCSET tag. This means you have to:

• Generate images in different sizes.
• Include all of them in your SRCSET tag.

The markup looks something like this:

<img srcset="elva-fairy-320w.jpg,
        elva-fairy-480w.jpg 1.5x,
        elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg"
     alt="Elva dressed as a fairy">

This is quite cumbersome, to say the least.

Sirv offers a much more elegant solution. This is how I serve responsive, automatically scaled images in this blog post:

<img class="Sirv"
     data-src="https://sirv-cdn.sirv.com/blog/image%20seo/Product_schema_example.png?profile=screenshots-grey-border"
     alt="Google Images search result, showcasing the richness of product schema">

I use markup like this for every image in this post.

Sirv.js handles the detection and transformation:

<script src="https://scripts.sirv.com/sirv.js"></script>

The script detects the browser and viewport, resizes the image, chooses a suitable format and quality, and enables lazy loading.

Lazy load images

Lazy loading is a technique where only above-the-fold images are loaded, while those out of sight are loaded on-demand. This can dramatically improve your page loading speed.

For example, on our lazy loading demo page, we have 26 images, but only the first one is initially loaded.

HTTP Archive has some interesting data: Magento store owners could speed up their image loading speed by 66% if they were to use lazy loading.

How to lazy load images

Lazy loading is on by default when you use Sirv’s responsive imaging. You can also configure the threshold (load images when they’re 200 pixels below the viewport, for example).

Use a Content Delivery Network (CDN)

Most websites serve their images from a single server, located in a single location.

If you're operating on a small country level - it's fine. The thing is - the further your visitors are from your origin server - the slower your website will load.

Content Delivery Networks (CDNs) solve this problem by replicating your image across a global network of servers. This means when a UK visitor opens your page, they get all your images delivered from their nearest CDN location (London) and not from your, say, San Francisco based server. Images don't have to cross the entire Atlantic, which helps speed up your website dramatically.

Sirv is an image-focused CDN. Besides replicating and caching images around the world, it provides:

• Automatic image optimization
• Optimal image format delivery
• Automatic responsive images
• Lazy loading
• Automatic retina serving

Remove metadata

Image metadata is text information embedded into a file, like when a photo was taken, camera settings, what software was used to edit it and so on.

Google supports only IPTC photo metadata to display image credits.

It makes a lot of sense to strip images of metadata to make them load faster. Sirv strips meta automatically (which you can disable if needed). If you're not using Sirv yet, either create an account or use EXIF Purge (Mac/Windows) instead.

Automate image optimization with Sirv

Sirv automates resizing, format conversion, and compression for product images.

Sirv also supports image zoom and 360-degree product views. Here is an example.

You can try it or use a supported platform integration for Magento, WordPress, or PrestaShop.

Credits: Header image designed by katemangostar / Freepik. 360 spin by Karl Martini.

Start a free trial with Sirv

Get 5 GB of storage to test it out. Get started today!