Post image for Product image best practices, part 1

Product image best practices, part 1

by Mike B. Fisher on April 2, 2009

Quick summary: The quality and usability of product images is a weakness of many e-commerce websites. Here’s how to ensure that your product images empower users to find and buy what they’re after.

Just about anyone who shops online has at one time or another come across poor quality product images; images that were too small, too blurry, or difficult to make out. The quality of product images – and the way in which they’re presented – often has a big impact on conversion. So it’s wise to spend some time ensuring your products can be seen in a way that appeals to users and makes it easier for them to find and evaluate what they’re after.

In this first part of a three-part article we’ll examine the importance of good product images, and we’ll look at best practices for ensuring good product image quality.

Let’s start by looking at “the big picture” – the overall role that a product image plays in the e-commerce purchasing process.

How we see products in the real world

It’s often helpful to examine shoppers’ real world experiences at “bricks and mortar” stores to understand what influences and motivates purchases.

Suppose you’re shopping for a watch. In the real world you can visit a watch store to:

  • See a collection of available styles
  • Compare products to each other
  • Look closely at the items you find most interesting

Online shopping should be no different. Obviously your website visitors can’t physically examine your products. But it makes sense to offer them an online equivalent of the same experience – an easy way to evaluate, compare and contrast products.

In other words: a usable e-commerce website should deliver some of the same benefits as an in-store retail experience.

(As a side note, online shopping can have benefits that retails stores don’t, like easy access to multiple product reviews. But that’s a topic for another article. For now we’ll stick with making the most of product images.)

Displaying product images online

For most e-commerce websites there are three types of images to consider, and each has its own set of requirements and potential pitfalls. They are:

  • Thumbnails – small product images that usually appear within product category listings or product search results pages. Typically users click on a thumbnail image to select a product and/or to see the full-sized image. For example this product results page from Zappos displays thumbnail images of numerous shoes within a category:

zappos-1

  • Product page/medium size images – the next size up, these images are typically displayed on a product page as in this example:

zappos-2

For some e-commerce sites a third type of image is also employed:

  • Detail or zoomed images – in cases where greater detail is important one or more close-up images are used (for example a china or wallpaper pattern, or the texture or print of a piece of fabric):

fabrictales

Some websites also display multiple views of the product (from the side, top, bottom ,etc.) – but for our purposes we’ll consider that part of the “detail” category.

What makes a good product image?

Now that we’ve defined what we’re looking at let’s discuss some best practices that ensure image quality and usability.

Usable e-commerce product images should be:

1. The right size for their purpose. There’s no hard and fast rule that dictates an exact “best” size for thumbnails or product page images; usually it will depend on your layout. But here are a few rules of thumb (pardon the pun):

For thumbnails use the largest image size you can get away with that fits in your layout and enables you to display enough images on a page. Typically thumbnail sizes range from 100 to 200 pixels across, but for some types of thumbnails (like color swatches) the image can be much smaller and still work well. In general the more that detail plays a role in helping users evaluate your product the bigger your thumbnails will need to be.

Check your images at multiple screen resolutions. Currently 1024×768 is the most common resolution but it makes sense to see how your product images look at higher resolutions too. This is especially true if your customers are likely to have newer equipment and/or be running higher resolution monitor settings (for example if you’re selling cutting-edge home theater products to technophiles). Google Analytics and other log analysis tools can tell you what resolutions your visitors use.

For product page/medium-sized images use an image big enough to give a clear sense for the product – but be mindful of download times. Not everyone has a super-fast Internet connection, and slow download times can stop users in their tracks.

2. Bright enough for the subject matter. This may seem obvious but some types of products are more difficult to see than others. Dark colored garments don’t photograph well, and details get lost easily. Images like this may be discernible at larger sizes but when reduced to a thumbnail they lose nearly all their detail.

This is important because your goal is to provide enough information to users that they can evaluate/compare the product and make a purchasing decision. If the fine details of a product are important to the user but they can’t make them out there’s a good chance they’ll leave your website and look elsewhere.

Use tools like Photoshop, Aperture or any of a host of other image processing tools to bump up contrast on dark product images, especially for thumbnails. Or take separate close-up photos of products that have fine detail (more on photography below).

3. Uncluttered. In most cases it’s preferable to display each individual product by itself, with no background – as in this example from Cafe Press:

coffeecup

An uncluttered image makes it easy for users to focus on the product and quickly determine if it’s what they want. It also makes it easier to compare multiple items, for example on a page displaying many similar products. Not to belabor the point but this is important for conversion. You want to present your products in a way that enables users to clearly understand what they’re looking at, and how it differs from your other products.

Consider the downside of using a product image that has much more going on in the background (this isn’t a product image but it illustrates the point):

coffeecup-2
Photo by Galif548. Creative Commons licensed.

This can be problematic – especially if users are trying to compare one product to another as they would on a product category page. Note how it becomes more difficult to make out the unique attributes of this cup when the image is reduced to a realistic thumbnail size:

coffeecup-2-small

Of course like any good rule there are exceptions. Some product images are more compelling when the product is shown in context. For example if you’re selling furniture it may be preferable to display images of your sofas in a living room setting so that customers can get a sense for the product’s scale, or how the sofa looks with complementary furniture. Likewise some types of clothing are best displayed on a model or mannequin. And so on.

In some cases a “best of both worlds” solution is to show the product both in context and by itself, but we’ll get more into that in part two of this article.

4. Adequate resolution. This is a mistake I’ve seen countless times. The thumbnail image looks good but the main product image is simply an enlarged version of the thumbnail, as in this example:

cup-thumbnailcup-full

Here an adequately sized thumbnail image has simply been digitally “blown up” for the full product image. Yikes – as you can see the important detail on the cup is all but lost at the larger size. If you were trying to evaluate this product would an image like this help you appreciate the detail and make a decision to purchase? Probably not.

The solution here is simply to create thumbnails from the larger, more detailed versions of your product images – instead of the other way around. If the only product image you have is a thumbnail then consider re-photographing the product. As a side note, there are plenty of free resources online for learning about product photography.

5. Consistent. Consistency of your product images is also important. If your product thumbnails are all photographed from different angles or show different backgrounds it will be harder for users to make “apples to apples” comparisons.

6. In focus. I don’t mean to be Captain Obvious but I’ve seen more than one example of product images that were somewhat (or even badly) out of focus. Fortunately this is a rare problem. Still, it pays to be careful. Don’t allow basic photography mistakes like this to make their way onto your website.

In part 2 of Product image best practices we’ll look at the different ways product images can be displayed on category and product pages.


Photo credit: Shermeee. Creative Commons licensed.

Be Sociable, Share!

Related posts:

  1. Product image best practices, part 3
  2. Product image best practices, part 2
  3. Why require registration? Part 3

{ 2 trackbacks }

» Blog Archive » E-Commerce Design
September 13, 2010 at 12:54 pm
Aidalicious | Curated Ecommerce Since 2012 Powered by AbandonAid – VIDEO: Powerfully Simple Ways To Improve Your Product Image Displays
July 31, 2013 at 2:07 pm

{ 3 comments… read them below or add one }

bloonsterific July 10, 2009 at 7:43 am

Just wanted to tell you all know how much I appreciate your postings guys.
Found you though google!

AJ November 15, 2009 at 9:08 am

What I’m interested in learning is how to take a picture of a product and delete the background so that only the product is isolated. How can a low-budget shop that does not have access to a dedicated graphics designer edit their product images so that they match the likes of Amazon.

Mike B. Fisher November 15, 2009 at 8:33 pm

Hi AJ,

It’s not too difficult to get good product photographs. You can build a small product photography rig using nothing more than lights from a home center store like Lowe’s or Home Depot. Photo editing software like Photoshop will enable you to fine tune images to remove any remaining background artifacts and perform other optimization that will make the image look good on the web.

There’s a link to a good tutorial on product photography in the article above, but if I come across more I’ll add them to the article.

Leave a Comment

Previous post:

Next post: