If you are considering adding 360 product images to your marketing it is important to understand what a 360 product viewer is, how it works, and how it displays images on your website. When I speak to customers about 360 product viewers the following questions come up:

1. What is a 360 product viewer and how does it work?
2. What steps are involved in publishing 360 product images?
3. What should I consider when selecting a viewer?
4. What are the different types of viewers?
5. How do I format images to play in a viewer?
6. How do I install a viewer on my website?
7. How much does a viewer cost?

If you are new to 360 product images I recommend you read this post before delving in the world of viewers – introduction to the 360 degree product photography process.

1. What is a 360 product viewer and how does it work?

Click on the image above to open the image in a 360 product video.

“A 360 product viewer is a software application that plays in a browser. The HTML code on the webpage loads the viewer and the viewer loads the product images. Both the viewer and the images reside on the web server. The visitor can interact with the product according to the viewer’s built-in functionality. Common viewer functionality includes rotating the product on one or more axis, zooming in to areas for more detail, and clicking on hot spots to display additional images or textual content.”

Let’s look at this definition in more detail:

• A software application that plays in a browser: Most 360 product viewer applications are built using Adobe Flash. Most browsers have the ability to run an Adobe Flash plugin that will play Flash-based viewer applications.
• Viewer application and images reside on the web server:The 360 product viewer application and the product images reside on the server where the website is hosted. When a website visitor arrives at a page, the HTML code initiates the viewer and the viewer will display the product images.A 360 product image consists of a series of sequentially numbered still product images (image 1, image 2, image 3… image 72). These images are captured using specialized 360 product photography software and equipment. Once edited, these product images are uploaded to a folder on the web server. When the webpage loads, the viewer loads the image files and displays them to the visitor allowing the visitor to interact with the images according to the viewer’s functionality – pan, zoom, rotate etc.
• Viewer functionality and visitor interaction: Once the images are loaded, the viewer controls what the visitor can do with the images. Common features include panning around and zooming into the product, rotating the product with toolbar controls or using a mouse, and drilling into hot spots, which, when clicked, can display detailed still images or textual content. Viewers can also be customized to control some of these functions e.g. maximum zoom, toolbar position, rotation on initial loading.

2. What steps are involved in publishing 360 product images?

There are 6 main steps in the process of capturing, formatting and publishing 360 product images:

1. Capture images using 360 product photography software and equipment.
2. Edit images according to your quality standards e.g. removing shadows, cleaning backgrounds, and cropping.
3. Format 2 sets of images for the viewer, a low resolution set that displays in the viewer when it first loads on the web page, and a high resolution set that the viewer uses when the visitor zooms into the product to view close-up details.
4. Using the 360 product viewer software, create the 360 image files by defining how you want the viewer to look and function and how you want the visitor to interact with the product. Functions that you define through the viewer’s user interface include the height and width of the viewer, the position and color of the toolbar, the % zoom allowed, the speed and direction of the rotation, full screen capability, and how the product rotates when the images first load.
5. Save the 360 product image; the viewer software generates the images folder and all related 360 product viewer files. The screen shot below is an example of the files generated when you save a 360 product image using 360 product viewer software.
   1. Config.xml – This file contains the code for the functions you selected when you created the 360 image using the viewer software (zoom, height and width etc.). The viewer uses this file to determine how it is presented to the website visitor and what the visitor can do with the product images.
   2. Index.html – This is a sample HTML web page that you can use as a guide when creating the 360 image page on your website. The index file illustrates how a webpage references the viewer, the images and the JavaScript.
   3. rotatetool.js – If the visitor’s browser does not support Flash the viewer will play using HTML and JavaScript. The rotatetool JavaScript file is the main component here.
   4. rotateTool.swf – This is the actual 360 product viewer. If the visitor’s browser supports Flash, the viewer will load and play the images.
   5. swfobject.js – If the visitor’s browser does not have the version of Flash that the viewer requires this file will proceed to initiate the process of downloading the latest version of Flash to the visitor’s browser.
6. Upload all the files listed above to your website and integrate them into the web page that you want the 360 image to appear on. You only need to upload the rotatetool.js, rotateTool.swf and swjobject.js files once to your web server; these files do not change when you create a new 360 product image. For all new 360 product images, you only need to upload the config.xml and the images folder to your web server.

Note: the file names above will vary depending on the viewer software you are using.

3. What should I consider when selecting a viewer?

There are 3 main considerations when choosing a 360 product viewer – functionality, customization and device compatibility.

• Functionality:When you evaluate 360 product viewers think about what functionality you want to provide your visitors when they interact with your 360 product images. Below are some examples of viewer functionality:
  • Toolbar controls for play, pause, rotate left, rotate right, zoom, full screen, pan, and 3D rotate (if your products were photographed on more than one axis).
  • Mouse controls to rotate, zoom, and pan.
  • Hot spots in specific locations on the images – when you hover over or click the hotspots images or text appears, the text can be formatted and include hyperlinks.
• Customization:Consider how customizable you want the viewer to be. Depending on the viewer, you may be able to customize the following functions:
  • Height and width – height and width of the viewer on the web page.
  • Buttons toolbar – align the buttons on the toolbar to the left, right or center.
  • Multiple image sets – include both low and high resolution images for the viewer to access. When a 360 image is initially displayed on a web page, lower resolution images are shown in the viewer. If you want to provide your visitors the ability to zoom deeply into the images (e.g. 600%) without losing image quality then you will want to include a set of high resolution images that the viewer will switch to when the visitor zooms.
  • Hot spots – specify where the hot spots are positioned on the product, what content is displayed when the hotspot is hovered over or clicked (text or image) and how the text is displayed (HTML is used to customize the text appearance).
  • Skins – select different skins for the viewer to match the look and feel of your website and brand e.g. toolbar color, border color.
  • Maximum zoom – control the percentage that the visitor can zoom into the product (you do this to ensure that the visitor is not able to zoom to a point where image quality is compromised).
  • Rotation – customizations include how fast the product rotates, whether the product rotates when the webpage first loads, if so how many rotations, and what direction it rotates.
• Device compatibility: It is important to consider the viewer’s compatibility with various browsers and devices. The goal is to have your 360 product images play regardless of the browser or device your visitors use. If the viewer is a Flash only viewer it will play on most but not all browsers and will not play on iOS devices like iPhones and iPads. Viewers that are Flash with HTML / JavaScript support will play on all Flash browsers and devices and on iOS devices with limited functionality. Viewers that are Flash with full HTML5 / JavaScript support will play on all Flash browsers and devices and on iOS devices with additional functionality.

4. What are the different types of viewers?

There are 4 types of viewers to choose from:

• Flash Only – The majority of viewers are built in Adobe Flash. There are two main reasons for this 1) Flash allows developers to create feature-rich viewers, and 2) the majority of browsers support the Flash plugin and can play Flash applications. Although the fly in the ointment is that Flash does not play on iOS devices – iPhones and iPads. As the use of these devices increases the potential number of visitors that will not be able to view your 360 images increase.
• Flash and HTML / HTML5 / JavaScript – Most Flash viewers today are not Flash only viewers, they offer at least some support for HTML and HTML5. If the browser or device does not play Flash the viewer will fall back to HTML or HTML5 to play the viewer in a limited capacity and display the 360 images.
• HTML5 / JavaScript – There are some viewers that are built using HTML5 and JavaScript only. There are a few key advantages to HTML5, 1) it is much faster than Flash, and 2) the future promise that all devices will support it and it will be feature-rich. The downside to HTML5 is the fact that at this point the standard is not fully defined nor is it universally accepted.
• HTML / JavaScript – The most basic viewers are straight HTML / JavaScript viewers. The big advantage is that these viewers will play in any browser and on any device. The disadvantages include speed (they are slow) and limited functionality.

5. How do I format images to play in a viewer?

When you format your product images there are 4 factors to consider:

• Image Quality setting – When you save images using Photoshop you can set the image ‘Quality’ to low, medium, high and maximum. Images saved with a higher Quality setting will have more data and will therefore be sharper and clearer when the visitor zooms into the image.
• Image file size– The size of an image (in KBs or MBs) is affected by several factors including 1) image Quality setting, the height and width of the image, and the file format (JPEG, PNG, TIF). Consider these factors when you format your images to play in your 360 product viewer. The table below illustrates the affect of the image Quality setting on a JPG image, 500 pixels by 500 pixels.
  
• The image was formatted at the 4 image Quality settings – maximum (115 KB), high (50 KB), medium (39 KB) and low (36 KB). You can see that the image formatted at medium quality – which is fine quality for the web – is 34% of the size of the image formatted at maximum quality.
• Zoom– If you want your visitors to zoom deep into your products you should format two sets of images:
  • Low resolution images – The first set of images should be formatted to match the height and width that your viewer will be displayed on your web page. For example, if your viewer is 500 pixels square then you should format your images at 500 pixels x 500 pixels. It is also best to format your images at medium Quality as the file size is small (loads quickly) and the image quality is fine for the web. Low resolution images load in the viewer when the web page loads.
  • High resolution images – The second set of images should be formatted at a size equal to the percentage you want your visitors to zoom to, multiplied by the height and width of the low resolution images. For example, if you want your visitors to be able to zoom 600% and your low resolution images are 500 pixels x 500 pixels, your high resolution images should be 3,000 pixels x 3,000 pixels (6 times the height and width of the low resolution images). Now your visitors will be able to zoom into the images up to 600% with no loss in quality. In most viewers the high resolution images load into the 360 product viewer in the background after the low resolution images have loaded. This minimizes the time it takes to display the zoomed images.
• Number of images – The number of images in your 360 has a big affect on how you format your images for the 360 product viewer. For example, if you have a 24-image 360, the total file size of your low resolution images formatted at high Quality would be just over 1 MB (assuming 500 x 500 images at 50 KB per image). At this total file size the delay for the visitor to view the images would be minimal. If you have 72 high Quality images the total size of the images that need to load is over 3.5 MBs, even on a fast connection the visitor will be waiting for the images to load. In this case you may consider formatting your images at low or medium Quality in order to reduce the time your visitor is waiting to view the images.

Examples of how images display on the web with different image Quality settings

Let’s look at how various images formatted at different Quality settings would appear to your website visitors. I formatted an image at the 4 standard Quality settings – maximum, high, medium and low.

Maximum Quality image – 115 KB

High Quality image – 50 KB

Medium Quality image – 39 KB

Low Quality image – 36 KB

If you look at these images closely you will be able to tell a slight difference in quality. For this reason you are best to format your low resolution images at no more than medium Quality so that your 360 product viewer loads the images quickly and your visitors do not have to wait long to view the 360.

6. How do I install a viewer on my website?

To fully understand how to install a viewer on your website you need to first understand how to create 360 product images with a viewer and what files the viewer generates.

First off let’s recap the process of actually creating a 360 product image:

1. Capture the product images with your 360 product photography software and equipment.
2. Edit the images in Photoshop removing backgrounds, cropping etc.
3. Format 2 sets of images for the viewer – a low and high resolution set.
4. Open your 360 product viewer software and create a new 360 product image – name it by the product number, product name or some other unique identifier.
5. Using your 360 product viewer, define the specifics of your 360 product image including viewer size, toolbar positioning, maximum zoom, rotation behavior when the web page loads, location of the low and high resolution image files, etc.
6. Save the 360 product image. The viewer will generate a series of files.
7. Upload these files to your web server.
8. Create the web page for the 360 product image.

Files generated when you save a 360 product image using your viewer

When you save your 360 product image in your viewer the following files will be created.

Note: Depending on the viewer you are using, the file names your viewer generates will be different than the ones listed below although the structure and how they work will be similar.

Below I explain each folder and file and how to upload them to your website.

#1: images

The ‘images’ folder (it could be named anything) is where your 360 product images are saved. In the screen shot below you will notice that the image files are numbered sequentially – 01, 02, 03, … This is how the 360 product viewer knows which image to play first, second, third, etc. as the product rotates.

I would recommend that when you create your 360 image with your viewer software that you save the image files to a folder that has the same name as the image folder that you will be copying the images to on your web server. This way you do not need to do any editing to the config.xml file (see #2 below) in order for the 360 product viewer to play the images. In the config file screen shot below, the images are referenced according to their relative path (“images” folder). If the folder where you will be storing the images on your web server is also named ‘images’ you do not have to edit the config file for the images to play in the viewer.

#2: config.xml

Other than the images themselves, the config.xml file is the most important file generated by your 360 product viewer software. This file contains all the function settings that you defined in your viewer software when you created the 360 image e.g. toolbar position, zoom, viewer size, rotation etc. As you can see from the screen shot below, all the viewer functions are defined in the <settings> </settings> tags and the images are referenced in the <images></images> tags.

You upload the config.xml file to your web server in the location where the 360 product image is stored. In the example below, the website folder structure consists of a ‘360’ folder where all 360 image folders reside, each product has its own folder (‘shoe’ in this case), and inside each product folder is the config.xml file and a folder for the images.

#3: index.html

The viewer creates an index.html file. This file shows how a web page would call the 360product viewer and the images. Because this file is not formatted for the look and feel of your website you would not use it directly but instead use it as a guide when creating the web page on your site for the 360 image.

The series of screen shots below help explain the index page and how to use it as a guide when creating the pages to display your 360 product images.

Head section:

The head section defines the location of the JavaScript files (explained below) and some basic CSS for positioning and presenting the image viewer.

JavaScript section:

The parts of the JavaScript section are explained below:

• 1: This section calls the config.xml file – the location of this file would be entered in the “” (quotes). If the config.xml file is in the same folder as the web page then nothing is entered between the quotes.
• 2: This section determines if the browser supports Flash, if it does the Flash content is loaded according to section #3, if not the HTML / JavaScript is loaded according to section #4.
• 3: This section references the Flash viewer swf file, the Flash content, the size of the viewer height and width, the version of Flash and where to install Flash if it is not already installed.
• 4: If it is determined that the browser does not support Flash then the viewer will default to HTML and JavaScript, this section references the JavaScript parameters and defines the viewer height and width.

#4: rotatetool.js

If the visitor’s browser does not support Flash and therefore cannot play the Flash viewer the rotatetool.js file will initiate the HTML / JavaScript code and play the viewer on the web page.

When you create a 360 product image the rotatetool.js file does not change. For this reason, you only need to upload the file once to your web server, not each time you create a 360 image with your viewer.

#5: rotateTool. swf

The rotateTool.swf is the Flash 360 product viewer. If the visitor’s browser supports Flash, the viewer will load and play the images.

Same note as above, the rotateTool.swf file only needs to be uploaded to your web server once.

#6: swfobject.js

The swfobject.js file will initiate the download and installation process of Flash if the visitor’s browser supports Flash but does not have it currently installed.

Same note as above, the swfobject.js file only needs to be uploaded to your web server once.

7. How much does a 360 product viewer cost?

Most viewers have the following pricing structure:

• Free – offers limited functionality and is branded with the viewer’s logo which cannot be removed. Most small businesses and certainly all medium and enterprise businesses will not use a viewer that has a logo on it that is not their own.
• Professional – offers full functionality, no viewer logo, limited or full support, use on a limited or unlimited number of domains, and free upgrades for a specific time period. These viewers are usually priced between $50 and $300.
• Enterprise / Premium – offers full functionality, no viewer logo, full support for an extended time period, an unlimited number of domains, free upgrades for an extended time period, ability to distribute viewers to resellers (when sending 360 images to resellers for sales purposes), and the ability to white label the viewer. These viewers are priced from $300 to ‘request a quote’ (which could mean anything).

Over to you …

I hope this post was informative. Please share your comments with us.

Subscribe and get out posts directly to your inbox – just enter your email address below.