Quick Brick TV Apps - Image Requirements

Introduction

This article explains the image requirements in feeds for Quick Brick TV apps

Basics

Like mobile apps, the image size supplied in a feed that renders in cells in an app is a balance between image quality and device performance.  Unnecessarily large image file sizes (due to too big pixel size or not enough compression) will slow app performance down.

Considerations for images in TV apps are

• What is the app installed on?
  • Smart TV
  • Set Top Box
  • Streaming stick
    • The performance of all these devices (CPU, GPU, Memory) varies widely. Apple TV is for instance a very high performance device. Smart TVs on the other hand can be severely restricted in terms of available memory for installed apps.

• What is the app displayed on?
  • For a Smart TV it is the same device as the app platform
  • For a streaming stick the display is a different device
  • However, the display itself can ultimately have the biggest effect on image quality as perceived by the viewer 
    • Screen size can be from generally 24" to >60"
    • Screen resolution can be full HD (1920 x 1080) or 4k UHD (3840 x 2160)
    • Screen (pixel) quality can be from "budget" to high performance, LED...OLED etc.

So images have to be as efficient as possible (size / compression) whilst looking good on large screens.

NOTE: Smart Screen TV performance (CPU etc.) is not directly related to screen size. There are budget big screens and high performance medium screens depending on the TV manufacturers range.

Quick Brick TV Components

Quick Brick TV apps currently have 3 components sizes

• Standard Carousel / Hero image 1500px x 468px
• Power Cell Carousel / Hero image 16:9 ratio and 823px x 463px
• Standard and Power Cell Grid and Horizontal List 16:9 ratio and 454px x 254px

Image H and V Size

Testing (*) shows that images can be simply supplied at the above (or nearest) size to the component dimension.

• This works on both full HD or 4k UHD screens - the same image is used
• Images that are tending to half the above component dimensions, will appear soft on screen through up-scaling to the component size.

Image compression

Similarly testing (*) shows that

• Images for the Carousel / Hero cell can be compressed to a file size of approx 50kB and give sharp performance
• Images for the Grid and Horizontal List cells can be compressed to 30-50kB
• Images compressed to 25kB appear noticeably softer

(*) 50" Samsung 4K mid range TV

Test stream

A TV test stream is available here - add the feed to a Hero and Horizontal List Power Cell 

https://raw.githubusercontent.com/Davidapplicaster/TV-JSON/master/Image_Test.json

This has the following images to compare resolution and compression ratio.

• 1920x1080 250kB
• 1920x1080 125kB
• 824x454 50kB
• 454x254 50kB
• 454x254 25kB

The results show that using 824x454 50kB for the Hero and 454x254 25kB for the Grid and List do not lose clarity when compared to the bigger images.

Custom Components

If an app uses customer component plugins to render images in a cell of different sizes, match the pixel dimensions for the size and follow the compression guidelines above