how-360°-product-images-can-do-wonders-your-ecommerce-sales

05-09-23 17:38

Are you not getting enough sales through your e-commerce website? One of the reasons could be product images.

As the world leader in Jewelry and Diamond eCommerce TransPacific Software regularly advises its client on actionable tips to achieve maximum sales on their e-store and top of the list is " to have 360° interactive product images.

Static product photographs is a pass. The user expects a better intimate connection with the product; especially when it's a high-value item like jewellery or an engagement ring.

360° image photographs are the "nearest thing" to holding the jewellery in hand. With touch devices, you may physically interact with the images. Rotate, spin and view the object as you like.

What does It take to have 360 interactive image photography?

At the outset: 360° or 180° imagining requires efforts and investment. But it's worth the effort.

360 imagery is NOT a video or an animated gif. It's a bunch of photographs of an object taken from all possible angles. This bunch is made to interact with touch or mouse event through embedded Javascript/Jquery

There are two distinct parts of the process

a) Capture object image in all the angles

b) Bundling all images together in a predefined order and make it interactive with a Javascript/Jquery

Capturing images in multiple angles:

If you have a physical object then you have to engage a professional photographer to capture images with a turntable. The image can be captured typically every 3-5 degrees. (that is total 120 to 72 images per product). Remember more the images better the quality but bigger the file size.

If the product is a CAD rendered image than your CAD designer will have to do renderings at 3-5 degree views and output in jpgs/png

Typically each of these renderings should not be more than 10-12 KB in size or together they will be too large.

Important: All the images in a set should have image names in a pattern eg.: sku_view_1 sku_view_2 ..... this helps Javascript to stitch the bunch in a preset order.

Do remember to protect images by embedding a watermark. This can be done by your photographer or CAD designer

Here is an example of 180 degrees interactive engagement ring made with an open source Javascript spritepin.js Spritespin requires Jquery; in this case, we have used 'jquery-3.1.1.min.js'

Page Load time is critical

One of the daunting task for the web developer is to have the page render quickly in spite of numerous images (about 50+ images per product)

Here are few tips to make it possible

Subscribe to a Content Delivery Network like CluodFlare or Akamai for fast image downloads. CDN's cache images and serve them from the nearest location.
Restrict individual Image size to 12-17kb
Instead of individual images make an image spite (as above) .This will reduce the number of HTTP server calls to pull images and speeding up the process.
Pull Jquery from Google CDN instead of putting it up on your server