## Optimizing Bitmap graphics

### A.2 Optimizing graphics

Graphics optimization can be evaluated with different criteria:

- File size
- Size in pixels
- Complexity
- Features required

### 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:

- small (10% of screen width) simple design
- medium (25% of screen width) more complex design possible
- large(50% to full screen) most complex design possible

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:

- View the official name of the component
- View which platforms support a component
- Adjust the color of a component
- Optimize the component by changing its color depth and dithering it
- Adjust line visibility
- View the ID and bounds for the component
- Adjust the stretch mode for the component

Note: You can check how the colors actually look in a mobile phone display by sending sample images to the device.

### Adjusting color

- In the Editor, click the component whose color you want to adjust.
- The component is highlighted and its properties are listed in the Properties view.
- In the Properties view, select Bitmap.
- In the Colorize field, check the Colorize box.
- To select the 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

- In the Editor, click the component you want to optimize.
- The component is highlighted and its properties are listed in the Properties view.
- In the Properties view, select the Bitmap tab.
- Check the box next to optimize.
- Set the quality for the component.
- You can set the quality to:

- high (16-bit)
- low (8-bit)
- palette dependent

- If you want to dither the image, check the box next to dither.
- The component properties change in Editor.
- To save the changes, select File -> Save.

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.