{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

While standard photos may be acceptable for items such as DVDs, books and CDs, which are more or less the same wherever you choose to buy them, for most other products good quality photos can make a real difference.

This is especially true for clothes and shoes, and online retailers need to work hard to overcome the web's limitations in this area when customers cannot touch and see a product close up as they would in-store.

I've been reading a post on the Future Now blog where Jeff Sexton explains how effective use of product images can answer questions and ease a customer's doubts about a product.

I've summarised some of Jeff's tips here and added some of my own...

Jeff's tips included:

Show the back of the product - this is something that retailers don't often do but can help answer shoppers' queries about a product, such as showing the type of connections and number of scart sockets on the back of a TV or DVR, or showing whether a suit jacket has vents on the back.

These features can be explained in the product description, but a picture gets these points across to customers instantly. The same principles apply to showing products from the bottom or the sides.

Schuh's product pages are a good example of this, providing eight images that let users to see trainers from all angles, including from the bottom:

Schuh product photos

Show how large a product is - showing items alongside objects of known size or on models will help customers to see how big products are. Showing them in context can also ease customers' worries about how a product will look once they receive it. The GetElastic blog has some excellent examples of showing products in context here.

Here are some other tips and examples of using product photos:

Use professional quality images - this is basic advice but absolutely essential if you want customers to get a real feel for the products. Also, poor quality, low resolution photos can make your site look less professional.

Look at Hotel Chocolat for a great example of using images, such as this high-res picture of a delicious looking Easter egg:

Hotel Chocolat product photo

Let users zoom in or enlarge images

For some products, clothes and shoes particularly, you can't expect customers to make a decision to purchase based on one simple photo; they have to be able to see the detail.

So, enlarged images are essential here, as in this example from Webtogs; the enlarged version of the photo allows shoppers to get a good idea of how the jacket looks, the material etc:

Webtogs enlarged photo

Another way to do this is to provide a zoom tool, so that users can focus on whichever area of the product they want to see. In this product page from John Lewis, users can zoom into any area of the cushion:

John Lewis zoom tool

Show products in context

Showing products in context, as well as giving users an idea of scale, can answer customers' questions about how a product works, how it will look on them etc. This is one area where video could be useful, but Firebox does a good job of showing shoppers what the 'slanket' (some kind of blanket with arms) does.

The product is shown in context on several photos, while Firebox also invites customers to upload their photos to give an even better idea of the product:

Firebox product photos

Optimise images for fast loading

One drawback of having high resolution product photos is that it can slow down page load times, so compressing images where possible is one way to reduce the file size and lose a few kilobytes from your website.

Use video where appropriate

More retailers are now using video and, with some products, video is more useful than photography as it can display a product in motion or from a variety of angles, or with sound.

I've noticed that M&S has started using video lately for some of its newer products; for items like suits it helps the user see how they look on, though videos may be better if they are embedded into product pages rather than opening up in a new window as here: 

M&S product videos

For some products only video will do. For example, with this baby 'travel system' on Mothercare, the video can show how it folds up, and the range of different seating positions it can be adjusted to, something that could not be achieved without a lot of product images. See this post for more examples of retailers using video.

Graham Charlton

Published 9 April, 2009 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

Comments (5)

Avatar-blank-50x50

Magic Toolbox

Zooming continues to be the most popular image effect for ecommerce sites because they can use existing photography, providing it is high resolution. Some of your other examples like the Easter egg and the video would be very effective but require a higher investment in product photography / video.

Our 5th zoom tool has just launched, helping retailers show maximum detail in images.

about 7 years ago

Avatar-blank-50x50

craig sullivan

Hmmm,

I don't think you emphasise the need to be aware of performance issues.

Bing honking images look lovely but are not so good when they impact on page load times.  Companies need to set the slider for image compression to get a balance between file size and quality that matches their customers capabilities.

There are several techniques for helping here, namely:

(1) Find out what your customers have in terms of download speeds

(2) Always test your pages for load times not from your corporate network but using simulated or actual ISP connections for the different speeds.

(3) Provide control to the user - they may wish to change the bandwidth quality for video or the image size/quality to suit *their* connection, not yours

(4) Allow for levels of product viewing - one, two or three image sizes that can be used without impacting the base page load time, only when the larger view is actually requested or desired.

(5) Do a product sheet - Take 30-40 product images and turn them into an HTML sheet showing them all.  Now adjust the compression to the point where you get a small filesize without pushing the quality too low.  Having a mixture of images helps you find the right point here without pushing it too far.  You should perform this exercise for each set of image sizes/qualities you wish to have on the site.  Unless you've done this exercise, it is likely that you aren't squeezing the maximum possible compression and you are wasting bandwidth and performance as a result.

(6) Video - either set up a performance monitor on your streaming video and/or test using your customers distribution of bandwidth speeds.  This will tell you what to use as the default and what options you should offer.  Once you've done this, you can monitor to see what customers set in terms of their required bandwidth preference.  Some companies also do short tests when first playing video on a site to automatically optimise for the customers connection.  You also need to have expertise to optimise video performance to get the highest quality for the bandwidth used - some types of video can be optimised more than others but as with images, push this as much as you can.  Nothing is more useless than a video that plays with buffering, breaks or interruptions because you didn't match to the customer requirements.  Your video provider should be helping you monitor the performance from a customer perspective so that you can figure out when things are going wrong for visitors.

about 7 years ago

Avatar-blank-50x50

Mike Lapchick

Sorry I'm late – great post Graham. 

A few lessons I learned over the years that may support/add to yours:

1) Identify all uses for the product image before you shoot.

The time to take additional shots of a product is when the product is still on set – not after it's been shipped back to the manufacturer or warehouse. If it needs to be shot on a white sweep for web, check with your catalog team to see if they'll be running it as well and what requirements they might have. Establishing good communication and workflow is easy and pays off almost instantly.

2) Shoot more than you need, but not more than you want. 

Taking extra shots seems like a no brainer with digital. But keep in mind that, for every additional shot, there's post production that needs to take place – often times by several people. Viewing, approving, transferring, and managing these "extra" shots can be more trouble than it's worth. The balance can usually be found simply by being aware of this.

3) Shoot blanks when you create sets or complex sweeps. 

This cam in handy so many times over the years; after you're sure you've captured the image you want, remove the product and shoot the set from a few different vertical angles. What this does is give you the flexibility to drop in manufacturer's art to these backgrounds down the road if you can't get your hands on the product, it's too expensive to shoot, or you simply don't have time.  If you or someone in your art department is handy with Photoshop, this can go a long way in helping your product presentations and be more consistent.

Working planks into your workflow is really quite easy. You just need to remember to do it.

There's a whole bunch more I love to share but these are the first things that came to mind when I read your blog. Thanks again for the article.

Mike

over 6 years ago

Avatar-blank-50x50

Mike Lapchick

Oh one additional thing – 

4) Don't attempt to color correct your images you're 100% sure of what you're doing.

Color work is a true tweakers paradise. One (this one) could spend years understanding and honing the craft because it is so deep and there's so much to know – especially if it involves print.

However, I know that no matter how much I try to convince smaller clients that they don't know what they think they know when it comes to Photoshop, they are still going to monkey with their images. So, keeping that in mind, I can give you one piece of advice that will go a long way in ensuring that you don't decimate your assets.

Shoot raw and use a gray card. There's nothing tricky about this and it will get you pretty close to accurate color. 

Okay, that's it for now.

Mike

over 6 years ago

Tony Barker

Tony Barker, Director & Founder at eEnablement - Online Interim Management & ConsultancySmall Business

What image size/resolution would you recommend for displaying images on a website (for a soft furnishings home retail e-commerce site)?

about 6 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.