Image quality, resolution and compression settings in Kuula Virtual Tours
Every image-based application on the web, such as Kuula, needs to balance the quality and resolution of the images with the speed at which those images load. It's a fine balance: poor image quality can lead to bad user experience, but long loading times can have even worse effects.
Why is load speed important?
There are countless articles on the web, that emphasize the importance of loading speed for user experience. The argument, backed by research, is that if the page loads slowly, users will not wait. Instead, they will close the tab and go away. For that reason, Google and other search engines use load times as a factor for SEO ranking.
How image quality impacts load speed
Image quality can be measured in terms of resolution and compression. Smaller and more compressed images load faster, but if they are too small or too compressed, they will be soft & blurry and have visible artifacts like color banding, pixelation or blocking.
At Kuula we work hard to find the perfect balance of quality and size to apply automatically on every uploaded image. However, we also want to give our users some control over those factors, that can be adjusted in different situations.
Upload quality: compression settings
The first setting defines how much compression is applied to images when they are uploaded. This setting can be found in the User Preferences section. There are currently 3 levels of compression: Fast, Balanced and High. The last option is available only with Kuula PRO and Business plans.
You may be tempted to always use High, but please consider that this will produce relatively large images and slow download times of your tours. On the other hand, unless you use a hi-quality lens that produces sharp images or render images on 3D software, chances are the High quality setting won't even be noticeable!
For a more detailed discussion of those settings along with recommendations and suggestions, please check the last section of this article.
One important thing to remember about compression settings, is that these are only applied to new uploads. Modifying these settings will not change existing posts. If you want ot change the compression on an existing image, please adjust the setting first and then replace the image in that post.
Export quality: optimization settings
When exporting your tours, you can create multiple versions of links to the same tour, with different settings for each. The export optimization features are available in the Export Editor under the Optimization section:
You can optimize the player either for Load Speed or for Image Quality. Most of the time, Image Quality is recommended because this will load the images at full resolution, while the other option loads images at a 4K resolution instead. However, that is one important exception.
Optimization for SEO
If you are embedding a tour on your website where page load speed and SEO are important factors, we recommend selecting Optimize for Load Speed instead.
However, for SEO, the next setting, called Loading is even more important. Here you can specify if the tour should Load Automatically or present the user with a Title Screen where they need to click on a Play button to open it.
Whenever you share a link to the tour directly, selecting Load Automatically is a better option. This means one less click for the visitor before they can interact with the tour!
However, if you intend to embed the tour on your webpage, and especially if you care about the SEO of that page, choosing the Title screen is a better choice. This means smaller initial load which translates into better SEO ranking.
Kuula: the right choice for any scenario
We hope that this article gives you a better understanding of how image quality relates to load speed, user experience and SEO. Notwithstanding your choices of compression and optimization, we would like to assure you that our team is always working on improving load times and performance of all the other parts of our player. These strategies include:
- using fast servers, effective caching and pre-loading techniques
- keeping files few & small (Javascript, CSS, HTML, icons)
- writing effective code that doesn't consume too much memory
- adapting the image resolution to different screen sizes
This is an ongoing effort, and we are always happy to hear your feedback and suggestions!