How to Optimize Product Images for Search
When you properly optimize your product images, your website will perform significantly better in the search returns.
Image optimization—especially for eCommerce websites—is critical. It’s so critical that I wanted to title this post “If Your Web Designer or SEO “Expert” Can’t Properly Answer One Question, Fire Them!“
Here’s the question:
How do you optimize images to improve a website’s performance in search?
Here are the six points you should expect your web professional to address:
1. Optimize the dimensions of your images. In other words, don’t use images that are bigger than they need to be.
2. Optimize the file size of your images (not too big, not too small)
3. Properly name your product images with relevant keywords
4. Always use Alt-Tags with relevant keywords
5. Consider an image caption if appropriate
6. Use relevant keywords in the copy that accompanies the image
None of those steps is particularly hard. But we’ll take this one step at a time…
Optimize the size of your images
When I talk about the size of your web images, I’m talking about two different sizing issues. The first issue is the actual width and height of your image that you upload to your website.
It is very common to find images on websites that to the website visitor looks fine, but the browser has just slowed to a crawl to download an image that is 16 inches wide and 10 inches in height. That’s waaaay too big for an image that will be shown in the browser in a space 4 inches wide by 3 inches high. Now think of the browser having to “size down” your images over and over and you can see how it will seriously slow down how fast your website renders for your site visitors. Site speed is a quality factor to the search engines. The slower your website images download, the more likely your competitors’ image-optimized websites will edge past your site in the search returns.
So how big are your website’s images? Here are two ways to check.
1. If you are using WordPress, WooCommerce or a hosted eCommerce content management system like Shopify or Big Commerce, just head to your media library. Click on any image and that should take you to your editing option which will show you the dimensions of your uploaded image.
2. Now, take a look at your competitors’ image sizes. When you are on a web page on a desktop or laptop place your mouse cursor over an image, right click and choose Inspect. The size dimensions in pixels will pop right up. When you do this, the lower screen will even reveal the alt-text (if it is being used that is), and how the image was named. See the screen shot below from Lowe’s website that sells lawn mowers. As expected, they are doing everything right in the way they’ve optimized their image.
https://www.lowes.com/projects/lawn-and-garden/choosing-the-right-lawn-mower-featured/article
Image dimensions on the web are given in pixels which lists the width first, the height second. But chances are you don’t think in pixels. Luckily there are plenty of free image size calculators online that will convert pixels to inches to give you a better idea of size. For example if you have an image that measures 500px x 500px a quick look at the image calculator shows that converts to 6.67 inches wide by 6.67 inches high for most screen resolutions. Do you really need an image that big for a thumbnail of a product image? No. How about 200px x 200px which is closer to 2 1/2 inches square.
We found that independently-run real estate websites often upload images of properties for sale that are unnecessarily large. When we say “large” we mean HUGE, sometimes serving images that are 5800px x 4200px. That’s nearly six feet wide by five feet high. No wonder the web page download speed is slow! I wondered why I was seeing this so consistently across real estate websites and then I realized that agents were probably taking images that were shot by photographers to be used for print which requires a much higher resolution (dots per inch) than websites do, and used them “as is” on their website without correcting for the image dimensions or resolution which we talk about next.
If you think a slow download speed is just an issue for desktop or laptop performance, the search engines will really penalize slow loading sites on mobile search, often burying them in mobile search in favor of faster-loading sites.
Your Image File Size is Probably Too Big
I know, you probably don’t want to do a deep dive into an image resolution and file size so I’ll keep this simple. Of the three image file types .gif, .jpg, .png, your product images are likely .jpg which is perfect for photographs.
After you or your web developer has sized the width and height of your product images to the proper dimensions, the image file can be saved at a high, medium or low quality. Your web developer likely uses Photoshop which allows the photo to be saved at a medium quality, which will reduce the file size without compromising the visual quality of the image.
But what if you don’t have access to Photoshop? You can still reduce the file size using one of these free online options:
Tinyjpg.com Note: Take a moment to look at the before and after example on Tinyjpg.com of an image that was reduced from 641KB to 162KB with no loss of clarity. Then imagine how much faster your site would load if all your images were optimized!
Image Optimizer Note: This site will allow you to reduce the image dimensions and optimize the file size.
Crush Pics (for Shopify)
How You Name Your Image Matters
Bing and Google are not just search engine for words, they search for images too. Search engines can’t “see” images. So it’s how you name your image that helps search engine determine what it is.
To get a competitive edge in your niche don’t use the default product image names such as product-id-54387.jpg when you save the image. Instead save your product images with a search-friendly name that identifies your product. Are you selling organic mosquito repellant? Save your product image as organic-mosquito-repellant.jpg
Alt Text is KEY
Alt Text is short for alternative text. It is text used to describe your image. Though you don’t typically see it when surfing the web, it is shown if someone is surfing the web with images turned off, or read aloud by a screen reader for those who are visually impaired.
Alt text, also known as alt tags, are added to an image when it is coded into your website. Super simple. For example when you are adding an organic mosquito repellant product to your site you would also add appropriate, keyword-rich alt text right after the image. Put it all together and this is what it would look like:
alt=”Baby and child safe non-toxic, all natural mosquito repellant”
Do you see all those keywords in the alt text that a search engine can pick up on and a potential customer may be searching on?
Note, purely decorative images on your site don’t need alt tags.
You can do a quick check of your website to see if your images currently use Alt-text by using the following free tool:
or you can download a free browser extension for your Chrome Browser which we recommend because then you can easily check your competitors’ sites and evaluate their use of alt-text. Fun!
Image Captions Can Be Gold
Image captions not only help inform your site visitors, they reinforce for the search engines that your product image name and alt-tag is what it says it is.
So, for an image of Organic Mosquito Repellant that has been properly sized and uploaded to your website with proper alt text, you should add a keyword-rich caption that uses keywords in a slightly different way than the alt text, such as
Organic, non-toxic mosquito repellant. Strong protection, safe for babies.
You can see how the caption gives you another opportunity to add great keywords a potential customer may be using in search queries.
Create original, keyword-rich copy for your product images
Say you are a reseller of faucets. If you are using the default product description for your faucet product images, you can bet that exact description is repeated thousands of times across the web by other faucet resellers who have defaulted to using the generic copy as well. Let them. It’s your job to outsell them by getting in front of the buyer by being found in the search returns.
Is the product image a polished chrome wall mount kitchen faucet ideal for modern kitchen designs? Write that. Don’t write just an item or product number. It may be meaningful to your order fulfillment center, it means nothing to the search engines.
When I talk about the size of your web images, I’m talking about two different sizing issues. The first issue is the actual width and height of your image that you upload to your website. It is very common to find images on websites that to the website visitor looks fine, but your browser has just downloaded an image that is 3 feet wide and 2 feet in height. That’s WAAAAAY too big and will seriously slow down how fast your website renders.
<< Home Page