Product Images and Zoom Features

Product Photography and Zoom

Great product images are a major key to success for any e-commerce store. A website has to do its best to replace a customer’s ability to see and touch the physical items like they would at the store.

Many manufacturers will provide high-quality images, suitable for us in a product catalog. These can be easily resized in suitable image editing software, such as Adobe Photoshop, to provide multiple sizes for regular and zoom images. However, your site may benefit from professional and unique photographs of the items you carry.

Consider the website Mad Cat Toys, which sells collectible and retro toys suitable for collectors as well as children. The site has won several prestigious design awards, and one of the reasons for its appeal is the uniform look of the product photography. The products are photographed on a white background with a subtle shadow that gives the item dimension. If this site were to use stock images from various manufactures, the effect would be much more hodge-podge than it has now.

Custom Product Photography

Even if you use stock images, though, there are several ways you can use product photography to entice customers to place an order.

1. Show Large, Detailed Images

Most site designs don’t allow for large, detailed images, even on the product detail pages.

However, larger images give customers the ability to see texture and fine details they might miss otherwise. They keep customers from having to guess about certain details of the product. There are several great ways to display larger images to customers. The oldest, simplest way is to open a larger image in a popup window. However, this doesn’t have the flair of modern websites, and has usability problems with pop-up blockers.

The lightbox method is popular now too, especially for sites already running jQuery or Prototype libraries. A lightbox opens in a div element on the same page, usually dimming out the contents of the actual page behind the image. One library I particular like is called ColorBox, a jQuery plug-in. If you don’t know what a lightbox is, take a look at the examples on the ColorBox website. Chances are, you’ve seen a lightbox in use on many sites.

Lightbox

Another method is to use a rollover zoom. If I recall correctly, I first saw this on the Rue La La website, one of my favorite daily distractions (and why you can’t usually reach me on the phone at 11:15am!)  I usually use the MagicZoomPlus script to set this up, and if you visit their site you can see the many different ways this can be implemented. The concept is that the zoomed image opens in a div element that lies on top of other content of the page, but is small enough so that it only shows a bit of the zoomed image at any given time. As you move your mouse over the regularly-sized image, the zoomed image moves around inside its box.

Rue La La Product Zoom

2. Alternate Product Images

Multiple images are also useful. Consider the following ways that multiple product images help the buying decision:

  • Show the product from different angles
  • Show details of the product, such as the contents of a boxed item or the label on designer clothing (you’ll often see this on Ebay)
  • Show an item of clothing or footwear on a model
  • Display the item in use, such as a piece of sports equipment being used in a game

Multiple images are most commonly seen on the product detail page. The screenshot below is from Zappos, which not only shows several images, but also incorporates a video.

Multiple Images on Product Detail Page

However, Lands End does a terrific job of using mouseovers to show the back of an item of apparel when rolling over the product image. In this screenshot, t7The normal view shows the front of each swimsuit, but when you mouseover a product it changes to show the back of the swimsuit.

Multiple Images on Product Detail Page

In the real world, a picture is worth a thousand words, but on an e-commerce site, a picture could be worth a thousand dollars.

What other creative uses of product photography have you seen? Let me know in the comments below.

Tags: ,

Comments

7 Comments

  • This is a cool shots! I wanted to learn photography… Thanks for inspiring me!
    Pool Leak Detection recently posted..Pool Leak DetectionMy ComLuv Profile

  • Jerrick says:

    Yes that true because when come to ecommerce, image may a part of your content . While we can see that most of the e-commerce store do focus on provide picture that in 3D form which allow us to see the image more reality and allow us to see the image on 360 angle.
    Especially for expensive product like car and house, they mostly would like to see more into the product image.
    Beside that , you also need to expert to capture the unique of the product to show to customer , or not customer may not interest with your product.
    That why picture is important and you need to learn some tips from camera man.

  • Andrew says:

    The pictures look great, I don’t like to view slow resolution and small images.

  • Brian Kinkade from superior homes says:

    I always hire professional photographer for my products. Pictures play a vital role in an e-commerce website and it’s the first thing that the customers look at. Thanks for sharing!