Product image 360 in Email

When customers get to view a 360 product image, conversions go up. SewellDirect.com saw a 35% increase in sales on a PC-to-TV converter box after adding a 360 view to their site.

Ebay power seller Stephanie Inge added 360 images to her store, 'Texas State of Mind' and reported, "an instant increase in sales."

You'd think 360-degree animated Gifs would be common in email, but I received my first - out of 286 I've collected since 06 - last week from UK retailer Evans. Check it out here. Inspired, I headed to the studio to re-create the technique.

 

1. The set-up

You can buy a set-up out-of-the-box, such as Ortery Technologies, PhotoCapture 360  (my husband now wants the XL turntable that supports a motorbike!) or Vertis software, Bling It.

I used what was on-hand, I substituted a flat-headed tripod which supports around 50lbs and a sheet of white card.

image 360 set up

The tripod head rotates and with the help of a measuring tape wrapped around the column, I was able to judge the increments. I placed this in front of a white backdrop. Try anything that rotates, like a Lazy Susan.

2. How many images per rotation?

I wanted to know how many images I'd needed to produce a decent 360. The Evans Gif was 7 frames long (or 7 photographs) 124kb in size and 310 x 291 resolution.

I tried 8, 15 and 30 images at 320 x 235 resolution.

8 frames 360 degree image

Above is 8 images stitched together, with a 0.4 sec delay between each frame.

15 frames 360 degree image

Above is 15 images with a 0.2 second delay. You can control the speed of rotation via the delay.

30 frames 360 degree image

Above is 30 images with a 0.04sec delay between frames.

Viewing the three Gifs together on a webpage, is not a great indication of performance. Feel free to save them out - right click/save as -  and test them individually in an email.

Don't forget, Outlook 2007 only displays the first frame of an animated Gif.

3. File Size - ImageReady Vs. ProMotion

Customers have a low tolerance with loading times, if a file does not play instantly they move on. You need to balance visual appeal with performance.

The file size and quality of your animated Gif is determined by the software you use. ImageReady comes free with Photoshop and I discovered ProMotion, while researching Video Gifs last year.

I tested the two against each other using the 3 sequences above:
Best sofware to create Animated Gif
ProMotion Vs. Image Ready
ProMotion 5 ImageReady
8 Frames - 84 KB 8 Frames - 114 KB
15 Frames - 138 KB 15 Frames - 209 KB
30 Frames - 293 KB 30 Frames - 417KB 

ProMotion creates a significantly smaller file, also a better quality image as it generates a custom palette. This is more apparent with Video Gifs, due to their higher color resolution and variations between each frame.

ProMotion custom palette

(BTW forget After Effects, file sizes are higher than ProMotion and image quality is low)

4. Placement: { forward test }

Evans placed their 360 animated Gif at the bottom of the email. Overstock.com also placed a Video Gif well below the fold (Thx to the RetailEmailBlog for this example). I assume this is to give the file time to load.

As the Gif is streaming it's not necessary, the file starts playing before the full download. Forcing customers to scroll down to view an animated Gif reduces it's impact. You also run the risk of customers missing it altogether.

By all means run your own tests, or forward yourself one of ours. Ideally try an a/b placement test, with the Gif at the top and bottom.

5. Sweet Spot?

After adding 360 images to Brownells.com, E-commerce manager Clayton Whipple, stated:

"(360) Product animation represents a sweet spot between pricier-to-produce videos, which have a place on the site when a product requires an in-depth demonstration, and still photos that don’t convey enough product information."

Studies consistently show 360 images increase conversions and animated emails are commonplace. Combining the two could help your bottom line at little expense.

More resources :

How to convert your video into an animated Gif for email »

Consumers will buy more when they can see more. Check out how SewellDirect.com increased conversions using 360 images »

How to create an animated Gif using ImageReady »

How new tools improve product shots without breaking the bank »