tel: +1 (800) 996-8617
  • How Many Images Do I Need for a 360 Product View?

    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:

    1. The smoothness of dragging the image with a mouse or finger.
    2. 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:

    1. Number of image requests.
    2. File size of each image.
    3. 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:

    Request free PixRiot account

  • Recent PixRiot Features You May Have Missed

    While PixRiot is undergoing major feature development that may take some time to release to the public, there are a couple of notable additions you can use right now. Let's dive in!

    Social Share

    Until recently, sharing your 360 product view on social media using a standalone link wouldn't look good — neither the title nor the image would show up in the preview (e.g., in your Facebook timeline). Obviously, this didn't work for our PixRiot users.

    Now, you can simply check a new checkbox at the bottom of the Standalone tab to get a link you can finally share everywhere. The social link will show both the thumbnail and the title of the view.

    For example, see the image banner at the top this post with the results of our recent Facebook share using an awesome used car automotive example we uploaded to PixRiot (and covered here as well). This share is doing unusually well.

    Cache Reset

    Another problem our users reported was the lack of control over the CDN cache. As you may know, PixRiot is optimized for the fastest delivery of 360 product imagery, partly achieved via CDN (Content Delivery Network).

    When you share a 360 product spin in PixRiot, users who load it in their browsers usually get it from CDN servers located in their geographical region, where the content is cached for optimal delivery.

    But what happens when you re-upload your 360 spin in PixRiot? Well, the cached version would continue to be served to your users for a while — and that's the problem. You could resend a new link from the Share & Embed form, which would always work as we modify it slightly every time you copy it there to bypass the old CDN cache. Often, though, your client has already integrated PixRiot links you've shared with them, and resending new links wouldn't be ideal.

    That's where the new Clear Cache option comes in. Access it using the time arrow icon in the top menu of the Assets view after checking the assets you've reuploaded that may have been cached. After clearing the cache, the old links for the same assets will get updated once refreshed in the browser.

    If you are not familiar with PixRiot, check out this older video that covers the basics:

    We hope these new features enhance your PixRiot experience. Stay tuned for more updates!

  • Guest Post: 360 Product Photography of Racing Helmets by See 360 Degrees

    Today I will share a couple of quick tips on how we recently produced 360 product photography of a few racing helmets for a customer. To see the final result, check out the helmet examples we shared under 360 product photography services.

    Lighting

    I usually use continuous lights for my 360 product views, but for these helmets I used strobes. I shot stills of these helmets beforehand and had the lighting looking good, so I just progressed from that shoot.

    I used 2 x 1 x 1m soft boxes either side with a strip light at the top shot through a large scrim or translucent reflector. This provides a nice even fill at the top. I did try it first without the reflector, but it created a distracting hotspot with soft box only.

    The strip highlights created by the soft boxes were not perfect out of camera and needed a tidy up in Photoshop. In the setup you can see some white card on the left and right side between the soft box and the background Perspex to soften the dark lines created.

    Rigging and Turntable

    To edit out the stand the insert was shot separately by shooting some images with the helmet upside down and later flipping them 180 degrees and editing in.

    The helmets were placed on a small floor stand with some packing foam on the top to make it more stable. 

    The turntable is homemade and measured out in both 24 and 36 shot increments. It's just a round piece of chip board laminated white and cut round by the supplier, I also asked them to drill a small hole in the centre for my reference.

    The "lazysusan" turntable mechanism underneath came from a woodwork supply shop.

    Post-production

    We needed to show the visors clear the way customer provided them to us. Normally, I'll show the product clear by back-lighting but with these reflective helmets the back-lighting created a distracting reflection around the helmets, so I decided to create the translucency in the visor in post-production.

    I did that in Photoshop by using the quick selection tool to select the part that needed to look translucent, duplicating the layer and using the blend mode in linear light so I could adjust the transparency to show some of the visor so it's not completely white but does look translucent.


    Contact See 360 Degrees for consultation and online imagery as required. 

  • Ento360: Virtual Insect Specimens. Guest Post By Rick Wherley at Cleveland Museum of Natural History

    This application of WebRotate 360 began as a project at the Cleveland Museum of Natural History to create online 3D models of insect specimens, enabling easy examination for scientific research. These specimens are normally stored in museum collections and are available to researchers who can afford the time and expense to visit the collection, or they can be shipped to the researcher at the risk of loss or damage to the fragile specimens in transit.

    Online specimen models would be safely available anytime, anywhere, and to anyone for free.

    3D models of real objects are usually produced using 360-degree photogrammetry or by 3D scanning. The latter technique is very fast but a micro 3D scanner is expensive, and has limitations in the resolution of tiny details, as well as difficulty with transparent or shiny surfaces. Producing a 3D model from photogrammetry typically involves processing the camera images through meshing and modeling software to create a rotatable screen object. In our experience this approach results in a loss of high-resolution photographic details that are important for scientific analysis of specimens.

    Zoomed image provides microscopic detail not seen in 3D models

    This is where WebRotate 360 excels for our application. We are able to create screen models of insects using multiple 2D macro images that retain all of the high-resolution details and simulate looking at the actual specimen under a microscope – a "virtual specimen".

    The process we use is time-consuming, but almost entirely automated. We shoot between 182 and 254 views of each specimen as it is rotated and tilted at specified angles. Because the insects are so small (typically 3 - 50 mm), each one of the views requires focus-stacking 10-40 macro images with extremely shallow depth of field. It can take up to 10,000 photos and 4 hours to shoot one specimen, although most are half that.

    We’re using a Canon 5DS R camera for maximum sensor resolution (50MP) with macro lenses attached to a motorized focus-stacking rail, with the specimen mounted (using its existing mounting pin) on a 360° motorized turntable. This in turn is tilted on a motorized arm for 5-7 rows of images. The motors are programmed and controlled with a StackShot 3X from Cognisys. 

    Full rig with laptop for museum travel Tilted Z-axis with view of flash diffuser drawn back on its own rail to view specimen. The Z-axis is tilted in 20-30 degree increments, depending on the specimen. Also visible is a special mount to accommodate insects with off-center pins (such as the tiny "point-mounted" beetle shown here)

    The 50-megapixel images are then batch-processed over several more hours (or concurrently) with Zerene stacking software and Photoshop to create the cropped views that are imported into WebRotate 360 – retaining 3000-4000 pixel resolution for online magnification.

    The final web model (example) is then created in a matter of minutes, after adding canvas text, logo, and hotspots. Top and bottom (dorsal and ventral) views of the specimen are created, respectively, from a single focus-stacked image which is rotated in 10° increments in Photoshop to create the 36 views that fill the first and last rows of the WebRotate 360 import.

    Hotspot button shows popup with insect’s pin labels

    The resulting web site interface provides easy controls for manipulating the virtual specimen and zooming in for full-resolution details. A hotspot button provides an image of the identifying labels that are kept on the insect’s pin in the museum’s collection drawer.

    We have currently imaged over 150 specimens, which can be viewed online at Ento360.

Subscribe to our newsletter

Sign up to our newsletter to keep a pulse on our latest developments, informative posts and beta releases. We don't abuse it!

Signup