Image optimization in Roku

Displaying posters is a very common feature in OTT applications. Images & icons are used to display the thumbnails of movies, shows, content, user profiles etc. These images are mostly loaded from the internet and that’s actually tricky. Downloading images from the internet doesn’t offer you the control over image sizes. That’s why sometimes you end up downloading oversized images which causes memory issues and performance of the Roku application is also compromised. However, Roku Scene graph has offered you the Poster component which is used to render images and it has got the ability to resize the images at runtime.

The Poster component has got three major properties which are used to take control over the size of images while downloading them from the internet:

• loadWidth – It scales the image to the specified width when loaded. It also maintains the aspect ratio of dimensions.
• loadHeight – It scales the image to the specified height when loaded and it also deals with aspect ratio.
• loadDisplayMode – Image is automatically scaled based on the given mode. The possible modes are : limitSize, noScale, scaleToFit, scaleToFill, scaleToZoom.

You can read here more about these properties.

Let’s see how these properties can be used practically.

UsingPosterNode

Any image that is bigger in size, will be adjusted to the given dimensions and won’t cause performance & memory issues.

But wait, are we done? Is it really that easy to manage image size dynamically? Well, there’s a catch here.

Order of properties matters : Yes, you read it right. Passing properties in proper order is the key here. If you pass properties to the Poster node in any random order, you might end up not getting images in proper size. There’s a proper order recommended for the properties.

If you want to take control of image resizing properly, you must pass the loadWidth, loadHeight & loadDisplayMode properties before setting the uri field.

Let’s understand what happens internally. If you set the uri before the scaling fields, Roku will download the image with the default or undefined width, height, and display mode. This might trigger the following problems :

• • Bigger or unwanted image size.
  • Uneven memory consumption.
  • Slow rendering.

The correct order tells the Roku to download the images in specified size only resulting in a smooth rendering.

Conclusion

Poster node is an excellent hack to image optimization but it must be used wisely. Using it carelessly can definitely impact the overall performance of your application and if you use it properly, it’ll make your life easier, at the same time.