Equirectangular images. Photospheres. Files formats. Image compression.
Not sure what these mean? In this article we'll explain what images to use for your 360 tour for the best results.
TLDR: Compress your equirectangular images and make sure they're JPG, JPEG or PNG.
Equirectangular images are used to display a spherical panorama in a rectangular format and are the go-to image type for displaying your 360 image on various screens.
How does it work?
Imagine you're standing in one spot and look all around you – up, down, left, right – and then take a single photo of everything you see. This would result in a spherical image shaped like a ball.
But a spherical image cannot be displayed on a screen. So we need to map the image onto a rectangle, which enables a single view of the image to be displayed and the enables the user to pan around the image in all directions, giving viewers a complete 360° field of view.
Thankfully most 360 cameras output equirectangular images as jpg's as standard so adding them to your 360 tour is simple as uploading the image from your camera directly.
Below is what an equirectangular image looks like prior to uploading to Koala360 or 360 image viewing software.
Description: .JPG and .JPEG are commonly used method of lossy compression for digital images, particularly for those images produced by digital photography. The degree of compression can be adjusted, allowing a selectable trade-off between file size and image quality.
Features:
JPG and JPEG images are supported by Koala360 and are the go-to file type due to their low file size.
Description: PNG is a raster-graphics file format that supports lossless data compression. It was developed as an improved, non-patented replacement for Graphics Interchange Format (GIF).
Features:
PNG images are supported by Koala360 but are not preferred due to a larger file size.
Image compression refers to reducing the file size of an image. Benefits of compressed images and the smaller file size include a reduction in load time, and in the case of 360 tours, faster tour loading and navigation speed between the images.
We recommend that you compress all your images before uploading them for the benefit explained above.
The first step is to export the images at a reasonable resolution from photo-editing software such as PhotoShop, Lightroom or equivalent, or resize the images in Sketch or Figma.
The upload the images to an online compressor such as TinyPNG or WebsitePlanet and let them work their magic. I've been using TinyPNG for years however one of our users recommended WebsitePlanet as the free tier is much more generous - up to 50mb instead of TinyPNGs 5mb.
When compressing images, compression can be either lossless or lossy, both of which are explored below.
When images are compressed using lossless methods, every single pixel of the original image can be perfectly reconstructed when the image is decompressed. Put simply, the image retains it's full clarity as no visual information is lost during the compression process.
We recommend lossless compression for highest clarity.
With lossy compression, some of the image's data is discarded to reduce the file size. As a result, the decompressed image may not be identical to the original, but often it's only small details that are discarded, which are often imperceptible to the human eye.
While this results in much smaller files than lossless compression, the quality is also affected and the images may appear less sharp and crisp.
Description: A RAW image is a file containing unprocessed or minimally processed data from an image sensor, like the one in a digital camera. It captures all the data from the sensor without any in-camera enhancements, adjustments, or compression and results in significantly larger file sizes that are much better for post-processing.
RAW images are a preferred choice for many professional photographers and enthusiasts because they offer the highest level of control over the final image. RAW files are designed for post-processing and are not typically used for direct sharing or printing. Photographers usually convert them to JPEG or other formats after editing.
File Extensions
RAW files can end in numerous extensions as different camera makers. Common ones include .DNG, .CR2, .NEF and .ARW, but you can view a a full list of extensions here.
When shooting 360 files in Raw, you will find DNG files for Insta360 cameras and .GPR for GoPro cameras.
Features:
HDR is a technique used to capture a greater range of luminosity than what is possible with standard photographic techniques. It allows for more detail in both the brightest and darkest parts of an image and is created by taking multiple photos of the same scene at different exposure levels (usually an underexposed, correctly exposed, and overexposed shot) and then combining them to create a single image.
This process captures a broader range of luminosity than a single exposure could achieve and results in more dynamic images that show more detail in both the bright and dark areas which would otherwise be lost in standard photos.
Features:
Shoot HDR images in landscape and architectural settings for best results.
For the highest quality and performance 360 tour, use equirectangular images in JPG or JPEG file format and compress them using lossless compression.
You can upload your images to TinyPNG to compress them directly output the images from your photo editing software at 80% quality and then compress them.
Use JPG over PNG when possible.
JPG's, JPEG's are older file formats used for photos and most images, are still the default file format of all types of cameras, including 360 cameras. It is best to use JPG's over PNGs as they result in smaller file sizes, but if you have a transparent background then you'll need to use a PNG.
Use lossless compression over lossy.
The choice between lossless and lossy compression is a balance between file size and image quality. While lossless ensures the highest quality, it results in slightly larger file sizes than lossy compression, which results in lower files size but reduced quality.
It is up to you which you want to use but