8 Need-to-Know E-Commerce Image Optimization Hacks

Ever wondered why your images don’t show up when you do a Google search for your product?

It might be that you haven’t optimized your images properly. 

Taking a few seconds to optimize your product photos can make a massive difference in how your site performs. It can even impact where your product pages rank in the search engines. 

Given that nearly a third of product searches start on Google, the more prominent your e-commerce pages, the better.

Not sure how to optimize images for e-commerce? It’s not as complicated as you might think.

In this article, I’m going to teach you the top eight ways to optimize your images. These optimization hacks will improve your conversions, SEO rankings, customer retention, and more.

Key Takeaways

• E-commerce image optimization helps your site load faster, improves the user experience, and boosts your e-commerce SEO.
• JPEG is currently the standard file format for e-commerce images, but other file types include PNG, GIF, and WebP. Each has its advantages and disadvantages.
• Consider the file size of your images. You want your images to be as small as possible but not so small that they’re low-resolution and blocky.
• Include target keywordsin your file name and alt tags where relevant, but don’t shoehorn them in.
• There’s a range of tools and extensions available—free and paid—to help you optimize your images for e-commerce.
• A/B test your images to see which leads to the most clicks, sales, and conversions.

Table of Contents

• Key Takeaways
• 1. Choose the Right File Type
  • JPEG or JPG (Joint Photographic Experts Group)
  • PNG (Portable Network Graphics)
  • GIF (Graphic Interchange Format)
  • WebP
• 2. Size Your Images Correctly
• 3. Name Your Files to Improve SEO
• 4. Keep Your Site Accessible to All Customers With Alt Tags
• 5. Use Sitemaps to Get Your Images Noticed by Google 
• 6. Optimize Your Thumbnails
• 7. Use an Image CDN
• 8. A/B Test Images to Improve Conversions and Retention 
• Image Optimization Tools to Try
  • TinyPNG
  • Pixlr
  • Kraken.io
  • AnyWebP
• FAQs
• Conclusion

1. Choose the Right File Type

The four main file types for e-commerce stores are JPEG, PNG, GIF, and WebP. 

Choosing the right format for your site will come down to striking the right balance between file size and image quality.

While you want your e-commerce photos to pop off the page, you don’t want them to take up too much space. This can cause your site to load more slowly.

According to Portent, a site that loads in one second has a conversion rate three times higher than one that loads in five seconds.

Let’s look at the pros and cons of the four main file types.

JPEG or JPG (Joint Photographic Experts Group)

JPEGs are ideal for photos, as they display millions of colors but are still highly compressed.

JPEGs use a “lossy” compression method, which discards some data to achieve a smaller file size.

This makes JPEGs great if you have a lot of images on your e-commerce site. However, they may not be ideal if precise colors or sharp details are crucial.

PNG (Portable Network Graphics)

PNGs offer better quality than JPEGs at the expense of a larger file size. They’re great for when you need to show off precise details or want to encourage people to zoom into your product photos. 

PNGs also support transparent backgrounds. This gives you more flexibility in how you showcase your product photos on your site. 

GIF (Graphic Interchange Format)

GIFs are more than just fun little videos—they’re compressed versions of photographs or videos. If you want animations on your e-commerce site that don’t take up too much space, they’re the right choice.

However, these low-resolution, compressed videos only allow for 256 colors, compared with the millions of colors other file formats showcase. This means they’re not ideal for images with lots of color variation. 

WebP

WebP is a modern image format designed by Google to replace JPEGs, PNGs, and GIFs.

WebP files are small, high quality, and support transparent backgrounds and animations. According to Google, WebP images are up to 34 percent smaller than comparable JPEGs.

The downside of WebP is that it’s not supported by all content management systems or browsers yet—like Internet Explorer, for example. This might mean you need to provide an alternative option for visitors whose browsers can’t display these images.

As a result, only 13 percent of websites currently use WebP, while 77 percent still use JPEGs.

2. Size Your Images Correctly

E-commerce image size refers to the amount of space needed to store the image on your server.

File size is a big deal. It can make or break the performance of your website because every single image must download each time your site is visited.

I recommend keeping your images at 1 to 2 MB in size. The smaller your image size, the faster your load speeds, meaning a lower bounce rate and happier page visitors. 

(Plus, don’t forget that page speed is a Google ranking factor.)

The easiest way to reduce your e-commerce image size is to compress your images. This removes superfluous data from your image, reducing file size while keeping the width and height of the image the same.

There are lots of tools online that will compress your images for you—keep reading to find out some of my favorites. 

In the meantime, here are a couple of convenient options if you use WordPress—Imagify and Smush. These extensions compress your images when you upload them to your site.

3. Name Your Files to Improve SEO

It’s important to name your image descriptively and to the point so search bots can understand what it shows. 

This makes your images more likely to appear in the most relevant search results.

For example, the image on the left has a much better name than the one on the right:

Nothing against image 89374504, but it doesn’t tell us (or web crawlers) what the image is.

A great image name is descriptive, straightforward, and contains a relevant keyword.

4. Keep Your Site Accessible to All Customers With Alt Tags

Alt tags (or alt text) are written descriptions given to an image. They provide value in three primary ways:

• They help visually impaired people using screen readers understand what the image is. When they hold their cursor over the image, the screen reader reads the alt tag to them.
• They tell the browser what’s supposed to be there if an image can’t load properly. This helps if your site’s having loading issues.
• Search engine crawlers read them, which helps improve your SEO.

Here’s what to bear in mind when writing alt text that supports your e-commerce image optimization efforts:

• Keep your alt text short—fewer than 125 characters. To save space, you don’t need to include phrases like “image of….”
• Be as descriptive as possible. Can you understand what the image is just by reading the alt tag?
• Include relevant keywords where you can, but don’t shoehorn them in. Accessibility is more important.

5. Use Sitemaps to Get Your Images Noticed by Google 

A sitemap is a list of URLs on your website. This helps search engine crawlers understand the pages on your website and rank it in the search engine results.

You can include your images and videos in your sitemap to make them easier to find.

For video entries, you should include:

• Title
• Description
• Play page URL (location)
• Thumbnail URL
• Raw video file URL and/or the video player URL

For image entries, you should include:

• Location (location, or the URL where the image is located, is highly recommended; all other bullets are optional but recommended)
• Title
• Description
• Caption
• License

If you have lots of images and videos, you may want to create separate sitemaps for each type of content.

If your site is on WordPress, you can streamline the process with Yoast SEO, which automatically adds your content to a sitemap. 

If you don’t have Yoast SEO already, it’s easy to install and set up.

6. Optimize Your Thumbnails

A thumbnail, a smaller, faster-loading version of a larger image, can serve many purposes on your e-commerce site.

You can use thumbnails on your product listing and search results pages, shopping carts, and navigation menus. You can even use them to cross-sell and upsell to shoppers.

Here’s how to optimize your thumbnail images for e-commerce.

• Your thumbnails need to be super small in file size. Less than 70 KB is ideal.
• Give your images a relevant file name and alt text.
• A/B test different thumbnail images to see which ones grab visitors’ attention the most. I’ll talk more about A/B testing later.

7. Use an Image CDN

A content delivery network (CDN) is a network of servers that help your images and files load more quickly.

Let’s say your website is U.S.-based, but you have customers in Europe. With a CDN, you can store your e-commerce images closer to your website users on European-based servers, meaning they load faster.

(Image Source)

Not every e-commerce store needs a CDN, but it can help boost your website performance if you sell internationally.

8. A/B Test Images to Improve Conversions and Retention

A/B testing can help you see which images get the highest conversion rates. Even something small, like using a faster-loading image, can make a massive difference.

According to VWO, successful A/B testing on your e-commerce store can increase revenue by up to 50 percent.

Here are some best practices for e-commerce image optimization A/B Testing:

• Test one variable at a time. If you test more, you won’t know which variable influenced the conversion rate.
• Try different things. A/B testing is a fantastic opportunity to think outside the box. For example, you can try different angles and backgrounds. Or you can test for how many images you should have on category pages.
• Keep testing! A/B testing should always be an ongoing process.

Image Optimization Tools to Try

Ready to optimize your images for e-commerce? Here’s a list of my favorite tools.

TinyPNG

There are lots of compression tools online, but TinyPNG is one of the best. You can compress up to 20 images at a time with the free version.

Pixlr

If you don’t have access to Photoshop, Pixlr is a great alternative. You can resize images, add additional effects, and compress your photos.

Kraken.io

With Kraken.io, you can upload your images in bulk, compress them all at once, and download them as a zip file to save time.

AnyWebP

Want to convert your JPEG, GIF, or PNG images to WebP? You can with AnyWebP. You can convert WebP images to JPEG or PNG, too.

FAQs

What Are the Benefits of E-commerce Image Optimization?

E-commerce image optimization has a range of benefits for your online store:

• You can reduce the file size of your images without affecting quality, meaning faster page load speeds.
• You can improve the user experience—for example, by using accessible alt tags and images that shoppers want to click on.
• You can improve your search engine presence, increasing the chances of ranking highly for the right keywords and phrases.

How Can You Find the File Size of an Image?

The easiest way in Chrome is to right-click on an image and select Inspect. This will bring up Developer Tools. Hover over the highlighted image URL to see the file size.

What Tools or Plugins Are Available for Automating Image Optimization in E-commerce Platforms?

If you use an e-commerce platform like WooCommerce (WordPress), Shopify, or Magento, you can optimize your images directly on your website using a selection of tools. For example, Yoast SEO, Smush, and Imagify are all options on WordPress.

Conclusion

Still not convinced about the importance of e-commerce image optimization? Let me leave you with one final thought. 

Three out of four people rate photos as influential when choosing which products to buy online. So, the more optimized and polished your images are, the more sales and conversions you can expect.

Implement these eight e-commerce image optimization hacks in your next e-commerce SEO site audit, and you’ll see improvements in your rankings and revenue.