Optimize product images for your online shop

Product images can make or break your online shop’s success. You can hire the best designer in the world to create a killer design, but when images are bad, sales will be bad. It’s the first thing a customer will look at.

Optimize your shop and improve the sharing experience of your products! Get our Yoast WooCommerce Premium bundle! »

Yoast WooCommerce Premium bundle Info

Even studies show that people that shop online value product images. The most important features of a product page when shopping online are:

  1. Quality of the product images
  2. View products in all available colors
  3. Alternate views of the selected item
  4. Ability to zoom into the details of the product
  5. Product guides

(Source: E-tailing Group via Pixelz.com)

That’s four out of five features that involve product images! In this post, we’ll go over a number of things you need to consider when adding product images to your online shop.

Product images set a mood

While I was (re)writing the article on the internal search for your online shop, I once again realized how big a role product images play in an online store. I was reviewing a site of a friend of mine and found that the images on his homepage just didn’t do justice to the products he sells. The images of his featured products simply didn’t ‘pop’. To demonstrate this, I replaced them with bright colored pictures and the website told a whole other story.

One of the things we tell our customers is to use photos of people using the product. Or the product in use. It doesn’t matter if you sell coffee machines or dresses. If you add people, your product will look friendlier and people will see themselves using your products.

product-image-in-use-ikea__1_

See the difference? That Ikea bed is much more appealing. Ikea does a awesome job in this, both in their magazines, on their website and in their stores. Product images like this are becoming more and more common, so be sure you’re not the last one to do this!

Using product images with the products in use works best, because people will be able to see themselves using that product. It’s as close as you can get to an in-store experience. People want to buy the product online, but an image will never replace picking a product up, looking at it from all angles or trying it on. We need to try to give our customers that same experience. For the same reason testimonials work so well, by the way.

Quality of your product images

It seems so obvious to use high quality images. But we have been telling you to reduce the file size for years, right. First of all, that doesn’t mean you have to use a crappy, blurred image of just a few kBs. The tools mentioned in our image SEO article don’t reduce the quality of an image, for instance. They remove meta / Exif data and things like that, but your image will still look awesome.

Secondly, internet connections are getting faster. We’re a lucky country, as in the Netherlands broadband internet is everywhere. There are just a few so-called white spots (locations with no internet at all), with a total size of a couple of baseball fields. That also means we’ll have less difficulties downloading your larger product image files. You’ll need larger images anyway, as that leads us to another necessary feature of online shops: ability to zoom product images.

Ability to zoom

Have you ever picked up a backpack or daypack to inspect the lining? Is it waterproof, does it protect your stuff well? You want to be able to take a closer look at details. That’s what zooming product images is for. My personal pet peeve when it comes to this, is when the zoomed image is exactly the same size (or even smaller) than the product image that was already shown. This still happens frequently! A lot of online shops simply import product images from manufacturers (or even download them from other shops that sell the same product) without testing the image first. This ruins user experience in my book.

If there is no proper product image available, create one. Even your iPhone’s camera can provide you with a decent, large image that can serve as a zoomable product image.

Shopify‘s guide on product images states:

Your product images can be any size up to 2048px by 2048px, or 4.2 megapixels. […] Higher resolution photos will look more polished and professional to your customers, and we typically suggest 1024px by 1024px as a guideline for square product images.

Woocommerce states that the minimum dimensions should be 800×800 pixels. That seems to make sense, as it will perfectly fit most tablets as well without any problem. Smaller will lead to distortion, and we have established you want quality images, right?

By the way, Pixelz has a nice guide for DIY images for your shop. Find that guide here.

Any color you want as long as it is black

Henry Ford wrote in his autobiography “Any customer can have a car painted any color that he wants so long as it is black”. Times have changed. We at Yoast recently replaced all plastic water cups (at our water coolers) with personal Doppers and ordered these in green and purple for obvious reasons:

Yoast doppers

We switched some tops and bottoms, by the way.

Bottom line: if you want to buy a blue sweater, you want to be able to see that sweater in that color. I like the way blue-tomato.com does this, by not just showing colored squares, but a thumbnail of the product in another color:

not-just-colors-768x493

Especially for products that consist of one main and a few other colors, this works really well.

The Yoast WooCommerce SEO plugin helps you to optimize your online shop. Rich Pinterest pins, better breadcrumbs, cleaner sitemaps! »

Yoast WooCommerce SEO plugin Info

Alternate views or products

You want to be able to look at a product from all angles. Let’s look at that blue-tomato.com example again. It shows that sweater being used, from the back and front, plus some details. You can really check the sweater from multiple angles.

If you are looking for furniture online, you want to check that chair from multiple angles as well. You want alternate views for the kitchen appliances, even though you’ll hide the dish washer behind a cabinet panel. And let’s take a closer look at the fabric of those drapes, or the back cover of that book. Again, it’s all about replacing the in-store experience.

Zappos does all that and adds a video of (in this case) an employee telling you more about the product itself:

product-video

The way that shoe is bent and rotated makes that you really ‘feel’ what kind of shoe that All Star is, so to say. I like that!

To wrap things up

If you have an online business selling actual products, you need to make sure to optimize your product images. Your customer will most definitely appreciate that. Make sure to:

  1. use high quality images;
  2. add an option for zoom;
  3. make sure to show the product in all available colors;
  4. provide alternate views of the product.

These are the main things to take into account when optimizing your shop’s images. I trust this article will make you rethink your own product images, or make you realize you are actually doing a pretty nice job!

Read more: Optimizing images for SEO »


Michiel is one of the partners at Yoast and our COO. He's happily married to Esther and proud father of his two daughters Puck and Linde. He was one of the first bloggers in the Netherlands and co-founded one of the first Dutch blogs about web design and blogging. At Yoast, he works as a senior SEO consultant for both customers and colleagues. And obviously is a daily, heavy user of all of our plugins! Read more about Michiel and find all of his posts »


16 Responses to Optimize product images for your online shop

  1. Kamil
    Kamil  • 2 years ago

    Many thanks Michiel, your article is very useful!

    • Michiel Heijmans

      Glad you like it!

  2. Mini Militia
    Mini Militia  • 2 years ago

    Thanks a lot Michiel, I was struggling with this one for a long time now, finally got the solution. :)

  3. Shivang Chandra
    Shivang Chandra  • 2 years ago

    Thank You Michiel! Very nice tips!

  4. Frank Geraci
    Frank Geraci  • 2 years ago

    Appreciating the time and energy you put into your blog and detailed information you offer. It’s awesome to come across a blog every once in a while that isn’t the same unwanted rehashed material. Great read!.

    • Michiel Heijmans

      Thanks for the compliment, Frank! Appreciated!

  5. David
    David  • 2 years ago

    Thanks for the article and referrals Michiel. Images can definitely make or break a website.The part where you mentioned zooming and getting the same size image or an even smaller image is hilarious, I run across this all the time so I resort to CTRL+ to try and zoom in with the browser.

    • Michiel Heijmans

      Haha! Yes, same here :) The faded, distorted images that gives, right…

  6. Sereyboth Yorn
    Sereyboth Yorn  • 2 years ago

    Thank You Michiel! Very nice tips!
    A quick question here, in Term of SEO, does duplicate image can cause SEO problem for our Ecommerce site?

    • Michiel Heijmans

      Not really. If it’s exactly the same image, you might even consider loading the same image, so it can be loaded from cache. But that might be some hassle :)

  7. Amit Ramani
    Amit Ramani  • 2 years ago

    Great article on images! Thanks for the tips. A few questions:
    1. 800 px x 800 px would be much larger to render on most smartphones. Wouldn’t that degrade the user experience of mobile phone visitors?
    2. Any recommended plugins or code to show the thumbnail of the product in other colors? Currently, when the user selects on the Color drop down, the main image changes to show the selected color, but your idea takes it a step further.
    3.

  8. Vinita
    Vinita  • 2 years ago

    Awesome article as usual.
    Optimizing images can become one hell of a task if we are doing it for eCommerce site with thousands of images. I will surely use image SEO to resize images but is there any tool out there which can help with assigning alt tags or something like that.

    • Michiel Heijmans

      HI Vinita, thanks for the compliment!

      You could look into plugins like SEO Friendly images as recommended by WooCommerce, but I have little experience with that, so go try and feel free to share your experiences :)

      Hope that helps!

      • Vinita
        Vinita  • 2 years ago

        Michiel,
        This plugin is currently unavailable. But thanks for your suggestion. I will get is as soon as it becomes available and will let you how it works for me.

  9. Apartamento de Luxo
    Apartamento de Luxo  • 2 years ago

    Very good article. I try to insert images of max 100kb .
    What would be a good recommendation for the size of images ?

    • Michiel Heijmans

      I think that relies on your target markets and the type of product you have. If you are selling screws, bolts and nails, 100kb would be huge :) I think the more expensive a product is, the larger the image can be. People want to look at details, things like that. I don’t think there is a rule of thumb. Your images just have to look crisp and awesome.


Check out our must read articles about eCommerce

Magento SEO

Out of the box, Magento SEO is reasonably fine, after applying these tips, it becomes a rock solid ranking machine, selling your products all day long!

Read article »

Internal search for online shops: an essential asset

Internal search is crucial for online shops. What search and filter options does your eCommerce site need? Learn to make it user-friendly!

Read article »

eCommerce usability: the ultimate guide

Everything on how to give your webshop visitors the warmest possible welcome. Read about eCommerce usability and UX in our ultimate guide!

Read article »