Large, under-optimized images slow down site speed and drive people away from your store. Research Increase Image size in kb online free shows that if an ecommerce site loads slower than expected, over 45% of visitors admit they’re less likely to make a purchase.
It’s clear image optimization is an art that you want to master. From attracting shoppers perusing Google images to reducing site load time, image optimization is an important part of building a successful ecommerce website, since product photography is a cornerstone of an online store.
Have the following questions ever left you scratching your head?
Why is it that when I do a Google image search my product photos never show up?
Do I need to add alt attributes to my images?
What’s the difference between JPEG, GIF, and PNG? When should I use one over another?
Top 10 image optimization techniques
- Use concise and direct image names
It’s really easy to blow through hundreds of product shots and keep the default file names your camera assigns.
When it comes to image SEO, it’s important to use relevant keywords to help your webpage rank on search engines. Creating descriptive, keyword-rich file names is crucial for image optimization. Search engines not only crawl the text on your webpage, they also crawl your image file names.
Take this image, for example.
image to be optimized
You could use the generic name your camera assigned to the image (e.g., DCMIMAGE10.jpg). However, it would be much better to name the file 2012-Ford-Mustang-LX-Red.jpg.
Think about how your customers search for products on your website. What naming patterns do they use when they search? In the example above, car shoppers may search terms like:
Look at your website analytics to see what keyword patterns your customers follow. Determine the most common naming patterns they use and apply that formula to your image file naming process.
If you’re not going to get that data-driven, just be sure to use relevant, helpful keywords when naming your images (i.e., try to be descriptive).
Check out this Q&A from Moz to understand the importance of strategically naming the image files on your site. It can definitely improve your on-page SEO, but it can also help your pages and images rank higher on search engine results pages (SERPs).
- Optimize your alt attributes carefully
Alt attributes are the text alternative to images when a browser can’t properly render them. They’re also used for web accessibility. Even when the image is rendered, if you hover over it, you will see the alt attribute text (depending on your browser settings).
The alt attribute also adds SEO value to your website. Adding appropriate alt attributes that include relevant keywords to the images on your website can help you rank better in the search engines. As a matter of fact, using alt attributes is probably the best way for your ecommerce products to show up in Google image and web search.
Let’s take a look at the source code of an alt attribute.
alt-code-attribute
The number one priority when it comes to image optimization is to fill out the alt attribute for each product image on your site.
Here are some simple rules for alt attributes:
Describe your images in plain language, just like you did for your image file names.
If you sell products that have model numbers or serial numbers, use them in your alt attributes.
Don’t stuff your alt attributes full of keywords (e.g. alt=”ford mustang muscle car buy now cheap best price on sale”).
Don’t use alt attributes for decorative images. Search engines may penalize you for over optimization.
Finally, always do a sanity check from time to time. View the source of your webpages and check to see if your alt attributes are filled out properly. You’ll be surprised by what you miss when you’re moving at the speed of entrepreneurship.
- Choose your image dimensions and product angles wisely
It’s common practice to show multiple angles of your product. Going back to the Ford Mustang example, you wouldn’t want to show just one shot of the car, especially if you’re trying to sell it. It would be in your best interest to show shots of:
The interior
The rear (especially that air spoiler)
The rims
The engine (it is a Mustang after all)
The best way to capitalize on these extra photos is to fill out your alt attributes. And the way you would do that is by creating unique alt attributes for each product shot:
2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg -> using the alt attribute of: alt=”2012 Ford Mustang LX Red Leather Interior Trim”
2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg -> using the alt attribute of: alt=”2012 Ford Mustang LX Red Rear View Air Spoiler”
The key here is to add descriptions to your base alt attribute so that potential searchers land on your website. If you do the extra work, Google will reward you with searchers.
A word of caution on providing larger images
Now you might want to provide larger views for your visitors, which can make for a great user experience, but be careful.
Whatever you do, don’t place the largest image on your webpage and simply shrink the dimensions via the source code. This will increase your page load time because of the larger file size associated with the image.
Instead, make it a smaller image and provide the option to view a larger image in a pop-up or on a separate webpage. Tip: Learn how to make product images zoomable in your theme using jQuery image zoom.
- Resize your images
Consider this:
Nearly 50% of consumers won’t wait even three seconds for an ecommerce site to load.
Globally, the average page load time is actually increasing.
Amazon found that if its pages were to slow down by just one second, it would lose $1.6 billion a year.
Google uses page load time as a ranking factor in its algorithm.
If you have images that slowly “drool” down the screen and take over 15 seconds to load? Well, you can kiss that prospective customer goodbye!
So, what can you do?
When a customer arrives on your site, it can take a while to load everything, depending on how large your files are. The larger the file sizes, the longer it takes a webpage to load. (Note: If you’re a Shopify merchant, your Shopify theme automatically compresses images, so this shouldn’t be an issue for you.)
Site Title 