4 Essential Factors of Successful Ecommerce Product Page – Part 2: Product Images

Following on from part 1 of our ‘4 essential elements for high converting eCommerce product pages’ blog post, where we cover the 4 essential product page elements required for the highest conversion rates, here’s part 2. In part 2, we’ll be taking a closer look into product page best practices and how to make product images that convert.

How to design a high performing imagery gallery for product images including:

    1. Include a scaled image
    2. Large images
    3. Images gallery (how-to)
    4. Image size and types

1. Include a scaled image

A scaled image allows users to immediately understand the real size of a product.

If users wrongly interpret the real size of an image, they will likely abandon your site.

In bricks and mortar stores, it’s easy for people to understand the size of a product, as they can physically pick it up. However, when shopping online that becomes more tricky.

42% of users will attempt to gauge the scale and size of a product from its product images”.

An example can be seen below. Which is more clear

Scaled images can help reduce return numbers, customers are more likely to be satisfied with their product when knowing what to expect.

2. Large images

The images on your product page should be large enough to effectively inspect the entire product.

Your images should be as large as possible, without taking up all the room on the product page. Plus, users should be able to click the image to zoom in.

Pro tip: Allow your users to click the entire image to zoom, don’t rely on little zoom icons. Zoom icon buttons are small targets to tap, therefore, this makes it difficult and slow for users to zoom in on your products.

When users zoom in on your product images, this shows a high intent to buy – they are further investigating and want to answers questions they have about your product. So, it’s important to understand what they’re inspecting when zooming.

Consider what your users are inspecting when viewing product images, here are some examples:

  • Texture – they want to know what it feels like and if it’s going to be soft, smooth, rough, etc
  • Weight – they may be trying to understand the weight, is the product thin or thick? Do they understand the material of the product and does that determine the weight?
  • Strength/durability – people want products that last. Do your product images show the product being stretched? Or, if the products need to hold heavy objects, what heavy objects are usually on the product your customers are buying?
  • Fit – If you have a product with multiple parts, how do they fit together? For example, if someone’s buying a Tupperware container, do the lids screw on or click on? How can you tell your users this with a photo?

Remember, your users can’t reach into the screen and pick up the object they’re looking at (maybe in the future). So, if your users can’t inspect your product effectively, you won’t be helping them to buy your products.

3. Images gallery (how-to)

First, it’s worth reminding us of the goal of product images. We can’t touch, pick up or try the products on an ecommerce store, as we can in a physical store.

Picking up and trying a product helps to instil confidence that the product is right for us. So the goal of an image/video gallery in an ecommerce page is to simulate the experience of inspecting and trying the product.

Use a product gallery to showcase your product

Include the following elements in your product gallery:

  • Main image
  • Caption for the main image
  • Thumbnail navigation
  • Image navigation
  • Total count of images (with a current number)
  • Lightbox
  • Close button top right

Anatomy of an image product gallery

Anatomy of an Ecommerce product page

For quick reference, check out this Anatomy of a product image gallery originally from Ecommerce UX: Best Practices Product Image Gallery

Zooming in

As I said above ‘Allow your users to click the entire image to zoom, don’t rely on little zoom icons’. The common pitfall for image zooming is caused by icon-based features.

Click or hover

So, allow your shoppers to click on the main image in order to give them a nice big target and zoom with ease.

Also, consider using a hover-based zoom, as well as having large product images.

B&H Zoomed Product image UI

B&H Zoomed Product Image UI – a good example of how to zoom in on product images.

4. Image size and types

What image size and types should you use for ecommerce product images?

When it comes to the right image size for your product images, there are 3 main things you need to consider:

  1. Site speed
    Will the image(s) slow down the page load time?
  2. Relevance of the featured image
    Does the image match with the rest of the content on the page?
  3. 7 different types of product image
    Is your collage of images (your image gallery) varied enough to really sell your product?

1. Site speed: Will the image(s) slow down the page load time?

Consider this:

So to keep those page load times fast, a good rule of thumb is to try to keep your ecommerce product image file size below 70 kb – Shopify

Keeping images below 70kb can be tricky sometimes depending on how much detail is in the image, but use 70kb as your ideal image size guide and don’t go beyond 500kb, otherwise your page load time will be way to slow and this is incredibly bad for your ecommerce conversion rate.

40% of people abandon a website that takes more than 3 seconds to load.Neil Patel

2. Relevance: Is the featured product image relevant?

Relevance is a key principle to remember when keeping your users on-site, and prevents them bouncing away.

Whether your users have found your product via an online search or have clicked an ad, ensure what they see is what they expect.

For example, someone’s searched for ‘protein bar’, hit the link and are presented with a product called ‘Loaded Legends’ (see below).

Protein Bar ecommerce page

This protein bar product page may not meet user expectation. The product title says ‘(singles), yet there are 3 unwrapped bars.

Even though this product page is relevant to what was searched for, a first-time user of this site may not have expected to see a stack of 3 unwrapped protein bars. This may cause the user to expect 3 unwrapped protein bars. Or, they may think that they get 3 brownies, yet the title includes the word (Singles).

The product page definitely makes the product look delicious, but it may not meet the immediate expectation that the user had.

Scrolling further down the page and you see the product in its wrapper. This may be a better image for the featured image; it’s wrapped and presented as 1 protein bar. Therefore, it answers immediate questions the user may have and matches the expectation, making the product image relevant to the search and product title.

Protein Bar

Scrolling further down the page and you see the product in its wrapper. This may be a better image for the featured image; it’s wrapped and presented as 1 protein bar

A simple change to help improve this product page would be to feature the image of the protein bar both in its packaging and unwrapped.

Over at Protein Pick ‘n’ Mix, they’ve shown both the product in and out of its packaging, giving the user a very relevant and complete picture of what to expect.

Pick n Mix ecommerce page with protein bars

This protein product image shows what the product is like inside and outside of it’s packaging, giving the user a very relevant and complete picture of what to expect.

7 Different Types of Ecommerce Product Images

Baymard Institute’s advice is to create a richer and more engaging shopping experience supplement your product gallery with one or more of these 7 types of product images:

1. Compatibility Images
DeLonghi technical ecommerce product image

With this technical image DeLonghi show you which types/sizes of cups fit with the machine.

Show the technical features of a product, so users can see if it’s compatible.

2. Lifestyle Images
Lifestyle Ecommerce Product Image

Sonos use the ‘show don’t tell’ technique to help users imagine where the Sonos One fits in their home and life.

Associate your product with other images to sell the dream.

3. Customer Images

Avoid leaving customers with unexpected surprises upon delivery. Damaged products result in unhappy customers.

Real images from customers give context and build trust, as potential customers can see that this product has been bought and is being used.

4. Textural Images

Help customers understand the textural aspects of a product and avoid disappointment.

It’s hard to touch and feel products online. Close-up images and video are a great way to feature the texture of a product.

5. Size & Proportion Images

Adding human elements into product photography will help your customer understand the products true scale.

In-scale images give your users a complete understanding of how big or small a product is in real life. Feature a hand holding a product and give an immediate sense of scale.

6. Usage Inspiration Images

Your customer has just bought your red sofa but with the help of this image, they have also purchased the rug to match. The power of photography.

Show your users what they can do with the product and you really sell the benefits. Plus, you may be able to cross-sell other products

7. Authentic Images

Helping customers evoke emotion around your imagery can help secure that conversion.

Evoke emotion and grab attention with images of humans or animals using your products. Authentic, animate images provoke a reaction the customer can identify with and mirror

Coming up in part 3

In part 3 we continue our practical and researched advice product page best practices.

Find out how to write perfect product descriptions and how customer reviews can help you increase your ecommerce conversions by up to 78%.

Further reading and references:

References in this 4 part series on ecommerce Product Page best practices.