To include images in your HTML5 pages, there are a few things that you should keep in mind to keep the performance of the page well.
Some recommendations regarding images are trivial: images cost bandwidth and processing time, and an average consumer has not got a gigabit connection; large and many images per page result in slow loading pages, and large rendering times due to slow processing on a consumer electronics platform.
Limit image sizes to less than 1 megapixel
In general the size of the images should be limited to the size of the screen. The Smart TV platforms are not created for printing the images shown, therefore you can generally assume for a 1280x720 pixel screen a maximum image size of 1 megapixel. Optimize your images for display on the color format of the used Smart TV platform.
Background Image
On the screen, when the user hovers over an App in the Launcher. If an image is meant purely as a background image - throughout your whole service.
keep its size small to prevent slowing down loading times of your App, as cache memory is limited on the Smart TV platform. Also remember that a 16bit Smart TV platform will display the image differently; e.g. gradient images will not look as nice as on a 24/32-bit Smart TV platform.
From the index.html file, refer to an image in the myApp directory as follows:
<body background=”myApp/my_image.png">
Avoid placing an object on the TOP 200 px and BOTTOM 200 px of the image. This is to prevent the image from being displayed abnormally when the screen rate is different.
Use minimal text inside the image.
Select what could entice the viewer to click and launch the App.
Recommend
Not Recommend
Cache memory
Cache memory is limited on a Smart TV platform, do not rely on it e.g. in use of large background images.
For the number of images on a page, there is no clear maximum. However, it should be clear that loading a large number of images will do the same as loading one very large image: it will slow down the App.
Width and height of the image
If the size of the image you create is known, set the width and height of the image in the tags to prevent layouts whilst the page is loading - this increases the rendering speed of your App.
<img src="myApp/my_banner.png" height="200" width="200" />
Iserver browser
The Iserver browser supports dynamic images in GIF format, It's recommend loading images and playing images use GIF format.
Splash Image
On the screen, when the Smart TV is loading an App.
Should not be a black screen.
Should not be the same as the background image.
Should use minimal text in the image to avoid localization issues.
Recommend
Not Recommend
