Optimizing Bitmap graphics

A.2 Optimizing graphics

Graphics optimization can be evaluated with different criteria:

File size

Large file sizes increase the memory consumption and correspond generally well with slow rendering performance.  UI graphics need to checked for large file sizes. More complex and detailed designs as well large area graphics consume more memory. If a file size is bigger than 10kB the file contents need to be re-evaluated for simplification of the design.

Template Size (kB)* Remarks
File header 0.323 VG2SVGT tool output
Average shape 0.1~1 Rectangular path with 10 curved anchor points
Gradient 0.26 3-colour, one more color += 0.085

Size in pixels

SVGT graphics are rendered to the layout area defined. The area aspect ratio and size may be different from the original graphics – the graphics are scaled and stretched to fill the area. 
The required area sizes affect the graphic design: the larger the screen sizes the more complex and detailed the design can be – with smaller screen sizes the lesser details and simpler designs are preferred. Images can be divided into three size classes:
The targets sizes for the different type of graphics are:

Graphic group Size Remarks
Menu graphic <10KB (exceptions possible)
Note graphic <7KB
Submenu graphic <7KB
Large list graphics <7KB
Medium list graphics <7KB
Small list <4KB

Editing component properties

In the Properties view, you can view and edit component properties. Some of the properties are read-only and cannot be edited. You can:
Note: You can check how the colors actually look in a mobile phone display by sending sample images to the device.

Adjusting color

From the Color drop-down menu, select the color.
OR
Click the grey box next to the Color drop-down menu.
Select the Color and click OK.



Note: For some components, the Bitmap tab is not available. The color for most of those components can be edited in the general tab, as in step 4. For some components, for example some areas, the adjusting of color can be done through animation.
 
Note: When you adjust the color of .svg components in Properties view's Bitmap tab, the next time you save the project, the component is converted into a bitmap. This process is irreversible.

Optimizing component properties



Note: When you optimize component properties of .svg components in Properties view's Bitmap tab, the next time you save the project, the component is converted into a bitmap. This process is irreversible.