There are two things you should do to your graphics, when preparing them for mobile devices. The first is colour reduction, the second is re-compressing.

Why would you want to reduce the amount of colours used in an image? The main reason is the limitation of the target device. Because of memory and display restrictions many current mobile devices only support 9, 12, 15, 16 or 18 bit colour depths even though the image file format supports 24 bit colour depth. Mobile devices also have limited computing power and therefore the conversion performed by the device is often very simple. Depending on model and manufacturer the colour palettes may also differ significantly.

The Adobe® Photoshop® compatible Custom Colour Depth Converter filter plug-in has been designed by BananaSolutions to simplify the task of converting your 24 bit colour depth images to the colour palette of a mobile device.

Step 1: To emulate what an image would look like on a specific device, execute the plug-in with the appropriate Custom Colour Conversion file selected. Enable "No dither" and click OK:

Figure 1: "No dither" emulates mobile device conversion

A number of factors affect the resulting quality of the colour-reduced image. Typically, the simple colour reduction algorithm used by the device results in flat areas and a loss of detail, and may produce patches of colour that are significantly different from the original (e.g. the greenish tint of the highlighted menu item). Shaded or gradient areas may appear as colour bands (e.g. title and menu bar, background) which may be distracting:

Figure 2: Determine how your image is displayed on a mobile device
24 bit colour depth original	Same image as displayed on a 12 bit colour depth device

Step 2: The key to making sure your images look good is reducing the colour depth to the exact colours supported by the device and using dithering techniques where appropriate. The Custom Colour Depth Converter plug-in simplifies these tasks.

Dithering helps to reduce colour banding and flatness. Select the area of the image you want to apply dithering to. Remove any elements within the area which should not be dithered (e.g. here we have removed the pop-up menu). Large shaded or gradient areas usually need to be dithered:

Figure 3: Select area for dithered conversion.

Execute the plug-in and select "Enable error diffusion" dithered conversion algorithm and click OK:

Figure 4: "Enable error diffusion" reduces colour banding.

Figure 5: With and without banding effect
"No dither" conversion	"Enable error diffusion" conversion

Step 3: Add the pop-up menu as well as the title and menu bars from the "No dither" conversion (Figure 2) . Manually correct the greenish tint of the menu item (use a colour which is present in the converted image):

Figure 6: Before and after image optimization
Original image as displayed on a 12 bit colour depth device	Optimized image as displayed on a 12 bit colour depth device

Step 4: Compressing the optimized image: This is typically done by converting the image from a 24 bit file format to an 8 bit file format (GIF/PNG 8). In most cases the Custom Colour Converter plug-in will have reduced the colour count sufficiently for direct conversion to 8 bit colour depth without further need of manually reducing the colour count. When choosing a colour reduction algorithm in your image processing application be sure to maintain the exact colours. With Adobe® ImageReady® for GIF and PNG 8 choosing "Custom" as colour reduction method with colours set to "Auto" has proven to yield good results.