Skip to main content

Creating Experiences Optimized for the Web

Tips and tricks to create an experience that runs smoothly on any device

Things to think about when building for the Web

Network Usage

Dependent on asset size. A 26Kb is better than a 100Kb image.

  • Try keeping asset file size small. Use as much compression as possible to reduce the image size, as long as the quality doesn’t get affected.

Memory Usage

Affected by image resolution: pixels used by an image, calculated by (x*y)

  • Don't use image/videos of a resolution higher than needed. A 50px 50px image is better than a 100px 100px image
  • What this means is that even a 10Kb image of resolution 100,000px * 100,000px can crash your device, as it would take roughly 10GB of grahic memory.
  • File size affects loading speed (more network usage for larger files). File resolution affects graphic memory (more memory for more pixels).

CPU/GPU Usage

Devices have a limited amount of processing capability. Videos consume a lot more CPU/GPU than images, 3D models.

  • Bigger the video/3D model, more is the CPU and Memory consumption.
  • Prefer images to videos: Try offloading as many effects as possible to images, instead of videos. Running too many (> 3) parallel videos in the same scene may not be supported by a lot of devices. You can use animations provided with images/pano images to try to produce a similar effect

Hardware Capability Limitation

All devices have inherent limitation on the number of audio/video streams they can run in parallel.

https://support.gmetri.com/docs/compatibility/platform-compatibility-matrix#media-codec-compatibility

Video (number of parallel streams)

PlatformNo of HD videos (1280x720)No of ~4K Videos (3840x1920)
Desktop/Laptop41
Androids Phones41
iOS Phones41

Audio (number of parallel streams)

PlatformNo of parallel audio streams
Desktop/Laptop7
Androids Phones7
iOS Phones7

Videos: Tips

Keep vides hidden until needed the scene

A non-hidden video get decoded by CPU/GPU and blocks its bandwidth. Hidden videos don't consume any CPU/GPU. So keep them hidden until needed, and hide them again if not needed anymore.

Images: Tips

  • Transparent pixels use the same amount of memory as non-transparent ones
  • Don’t use more pixels than being used in the viewport (the user’s monitor). Eg: If you use an Image that’s 5meters 5meters in 3D, and but placed 20 meters from the camera, its actual usage on the viewport is going to be only 100px 100px. In that case, use a 100px * 100px as the base image

Transparent pixels use the same amount of memory as non-transparent ones

Avoid using transparency for image placement.

Bad Example:

bad example

Dimensions: 960px x 831px. So it uses 797760 bytes = 0.79 MB in memory

Good Example

good example

Dimensions: 235px x 235px. So it uses 55225 bytes = 0.05 MB in memory. 16x better than the bad example

Avoid decorational transparent images

Bad Example

transparent Although it's only 3Kb in size, its resolution is 960px * 608px, and so ends up using 0.5MB RAM!

Use only minimum possible resolution of the image that’s being used in the viewport

Bad Example

false

Dimensions: 820px * 189px. i.e. it uses 154980 bytes (0.15MB) in memory

Good Example

good example

As you can see from the usage, the actual usage takes only about 300px 75px. So instead of using a 820px 189px image for it, use a 300px * 75px image. This would reduce the memory consumption by 7 times!