One of the questions we often get is: "I’m new to this... How many images do I need to photograph or 3D render for my 360 product view?"
We can expand on this by discussing how viewer dimensions and image zooming factor into the decision, but if you'd rather skip the details, here's our quick recommendation for single-row 360 views:
Stay within the range of 20 to 80 images per 360 view, and keep the combined file size under 20 MB. For large eCommerce projects with many products, stick to the lower end of this range. For high-end marketing presentations featuring just a few items, using 72 or more images makes sense.
Note: this post focuses on single-row 360 views that rotate on a horizontal plane. Some of these recommendations do not apply to multi-row 3D views, which we will discuss separately.
Here are some key concepts to help answer the question:
- More images create smoother animations.
- The number of images impacts the time and cost of shooting or rendering in 360, as well as post-production (e.g., background removal).
- The number of images and total file size affect webpage performance, as well as web traffic costs and hosting.
Let's review each factor in more detail.
PS: you can always check out our examples for comparison as each example has footnotes that cover the number of images as well.
Animation Smoothness
There are two aspects to consider:
- The smoothness of dragging the image with a mouse or finger.
- The smoothness of automatic playback (here's 36 vs 72 images; click here to see how this 360 product animation was done by Estúdio Debiasi Fotografia).
It's no surprise that fewer images result in a less smooth animation, whether for dragging or playback. However, you can mitigate this by adjusting the settings in SpotEditor that control rotation speed:
- Increase drag speed by reducing the Drag Factor under Control -> Rotation in SpotEditor.
- Decrease Drag Acceleration (usually set to 1, which is the minimum).
- Decrease the Rotate Period to speed up both drag speed and playback.
Keep in mind that after a certain number of images, the browser may struggle to flip images fast enough based on these speed settings. We usually notice this with around 200 images. Generally, we don't recommend going over 120 images per a single-row 360 spin, but if you still need more, consider increasing Drag Acceleration and reduce the drag speed using the same settings.
Time and Cost of Image Production
We've photographed thousands of products in 360 for commercial projects, both in our studio and on-site. Based on our experience, shooting 72 images per spin vs. 36 makes a huge difference, especially for large projects. It takes almost twice as long to photograph and review, with more angles to consider for lighting, exposure, and rigging. Reshooting a 360 can also be tiring.
3 days' worth of 360 product photography on-site for Glock with LAPD in the studio!
The same applies to post-production, where costs can quickly add up. Manual rigging removal (e.g., hot glue, wires, stands) or outsourcing to clipping path companies can be expensive on a per-image basis.
One trick to optimize photography is to use video recording to capture 360 spins instead of the stop-motion approach, where you take a photo at each turntable increment. Recording video is faster, although the quality may suffer. Later, you can decide how many images to extract, as we discuss in the linked blog post.
Webpage Performance
We all want our 360 product views to load quickly for website visitors. In e-commerce, every millisecond counts. Metrics like Largest Contentful Paint and First Contentful Paint - which a 360 view can directly impact - are crucial for both conversion rates and SEO.
Here are three factors affecting webpage performance:
- Number of image requests.
- File size of each image.
- Network and server performance.
Unlike some 360 viewers, we load images simultaneously and asynchronously, leveraging modern multiplexing protocols that handle multiple image requests on a single browser connection. This greatly improves performance for views with many images. However, loading a large number of images can still take resources away from other important page elements, so consider these built-in optimizations available in WebRotate 360 Product Viewer:
- If your 360 view is central to the page and visible on landing, configure the first image to load upfront in SpotEditor under Control -> Rotation -> On view load. The latest version of WebRotate 360 Product Viewer v5 also offers a feature that embeds a static image in the viewer container before any scripts are loaded. Learn more about this feature under Performance and SEO).
- For pages with heavier content, consider pausing the 360 product image load until the user interacts with the view. Activate this in SpotEditor under Control -> Rotation -> On view load, ensuring only a single image loads initially, saving bandwidth and CPU/GPU resources.
- We recommend keeping the combined file size of each 360 view below 20 MB. WebRotate 360 SpotEditor offers several options to optimize file size:
1) Create two sets of images: one for the main view and another for zooming/full-screen. This is controlled by the "Create an extra set of small fitted images" checkbox on the Publish form in SpotEditor. Check out this video for details on sizing image sets correctly:
2) Adjust the image quality for each set. Lower quality means smaller file sizes, so find the lowest quality setting that remains visually acceptable for your users.
3) Choose the right image format. Unless you need transparent images (which is rare), use JPG or WEBP image format. WEBP can reduce file sizes by up to 40% compared to JPG, but publishing takes longer, so only switch to WEBP after finalizing your edits.
While network and server performance are often beyond your control, the good news is that global internet speeds are improving, averaging 45.6 Mbps worldwide in 2024. At this speed, loading 72 images with a combined size of 20 MB would take around 3.5 seconds, which is acceptable for most users.
If you run an e-commerce store, consider using a CDN-enabled web hosting service. CDNs distribute your media across hundreds of servers, ensuring faster load times by hosting files closer to your customers.
Our PixRiot service is designed specifically for this purpose:
