<img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=187049&amp;fmt=gif">

Balancing Visual Quality Against Load Times

By Eric Wood | June 9, 2020

When adding 3D visualization to a site, load times are of paramount concern. The highest quality photo-realistic visuals of a product will add no value if the consumers skip the page because it took too long to load. Worse, slow loading visuals could impact whether a consumer buys your product or a competitor with a faster experience.  

Most consumers don’t realize the volume of files that are needed to create a 3D experience. If you are familiar with games in 3D, you know that most of them have loading screens that are longer than we would tolerate in our shopping experiences. Delivering fully-interactive photo-realistic 3D experiences in a commerce site requires downloading multiple files to the users browser. Generally speaking, the more photo realism, the larger the size of these files. Thus there is an inherent tradeoff between quality of visuals and load time. But why is that and how do we strike the right balance to convey a lifelike representation of a product while keeping the user engaged?


The things that make a product look photo realistic are the lighting and shadows, the geometry or shape of the product, and the textures. If processing and load times were not an issue, the best way to achieve photo-realism would be to model the geometry down to the most minute detail and then simulate the interaction of light with it. In order to reduce processing time, we use textures to represent much of the microsurface aspects that, while subtle, greatly enhance the realistic feel of the product. To understand this, think about paint sheens. It is very easy to tell the difference between a high gloss and a satin paint sheen even though the differences are very tough to discern up close. Textures also help us reduce the amount of geometry we need to simulate a surface. For example, the stitching in fabric would require a lot of geometry to represent in a way that would look realistic, but we can achieve the same look by using something called a normal map to tell the renderer how the light should interact with the stitching. To model a surface we need a number of textures to represent the physical aspects of how light interacts with it. While some of these textures describe the colors we see when we look at the object, most are describing microsurface characteristics.  

Copy of MAY - MVC _  Modern Visual Consumers (1)

If you’ve ever shopped for TVs you understand how resolution impacts the crispness of the image.  Textures are impacted by resolution in much the same way.  As we reduce resolution, we reduce the file size of the textures, which reduces load times, but we also begin to lose detail in a way that can be noticed. This is where the tradeoff lies. To achieve the best looking visuals, you should use the highest resolution textures, but doing so increases the file size and therefore load times. A similar tradeoff exists with geometry density; however, the need for increasing the density of geometry is reduced by the use of textures if the size of the feature is small (think diamond plate or the grille on a speaker). Texture file size is going to increase with the square of the resolution, so a 4K texture takes up 16 times more space than a 1K texture.  In reality it is somewhat less than that due to compression.

So how do we achieve maximum visual quality without incurring unacceptable load times? One strategy would be to cache the files, once downloaded, so that we don’t need to download them again. In practice, we can not rely on this to provide a fast experience.  The initial load will still take a long time and, in a B2C scenario, users may not visit a particular site often enough to benefit from caching. What can we do, beyond caching, to achieve the right balance between quality and load times? One answer is to be judicious in where we use our highest quality textures. Typically, there will be many surfaces on a product where the use of a 512 texture versus a 1K texture would not produce a difference that would significantly affect the experience. Accordingly, use textures where the visual quality has the most impact. If you sell chairs, then you probably want your highest quality visuals in your seat fabrics and the arms and legs can be lower quality. We can also use data in lieu of textures. 3D engines have the ability to represent the interaction of light with a surface using simple scalar values, such as roughness. In some places we may be able to procedurally generate textures, such as wood grain. Procedural textures create texture data dynamically through code instead of downloading a large file with all of the data. This works well if you have something that needs to look like a material, but doesn’t need to match the manufactured product exactly. For large surfaces with a uniform texture we can make a texture at lower resolution that represents a fraction of the surface and then tile it across the entire surface.

Even with these mitigations, complex products may still require a large number of textures that can take some time to download. In this scenario, it is worth considering what the 3D equivalent to skeleton screens might be. The idea is that it is better to show the user something, even if it isn’t the final experience, rather than a loading screen or spinner.  In this scenario we might download very low resolution textures initially and then download higher resolution in the background.

Whatever the solution, balancing visual quality versus fast load times will continue to be the biggest challenge for creating compelling visual experiences that can accelerate sales of products.

Click me

Subscribe Here!