Skip to Content

Media assets optimization guidelines

Printer-friendly versionSend to friendPDF version
Rookie
This article provides basic guidelines to obtain valid media assets for a Rich Media Application. Its deals with images, video and audio assets optimization.

Images

The supported formats are PNG and JPEG.
The recommended format for your images is PNG (Portable Network Graphics - see here for more information). It is widely supported on mobile devices and offers many advantages like lightweight and transparency.
However some specific devices do not support PNG format. In such case you can opt for JPEG format.

Use a minimum amount of images

Due to varying hardware and software support, images are one of the most problematic areas in cross device development. We recommend keeping the number of images, decorative or informative, low, and use extensively text and shapes when applicable.

Reduce number of colors of images

Most mobile devices do not support millions of colors and a given image may not use or require such palette. The key to make sure your images look good on device is reducing color depth, eventually relying on dithering techniques. Corel Paint Shop Pro is the only graphics application we have tested which has a special "reduce to thousands-of-colors" feature. You have to think about reducing to the minimum required: count the number of used colors then reduce the current number of colors as much at possible. Usually a maximum 256-color depth is sufficient for a nice rendering. The image might however not look as nice on desktop as it used to, but it should at least look the same on desktop as on device.

Use transparency sparingly

Transparency usage must be avoided as much as possible and only be used when applicable. Indeed transparency interpretation results in significantly increased memory occupation and processing time. An image with transparent surrounding borders shall have its dimensions reduced as much as possible. A given image with a limited and delimited usage of transparency shall be split into multiple images in order to isolate transparent areas from non transparent ones.

Re-compress images

Most image editors add metadata to PNG files. In most cases this is not needed and significantly reduce the file size.

Use PNG crushing

PNG crushing is one technique for optimizing images. As mentioned above, image editors often choose poor compression algorithms for PNG and may include metadata. It results in larger files meaning longer loading times.
Note that Corel Paint Shop Pro, unlike Adobe Photoshop, opts for small PNG size and does not add unnecessary metadata.

We recommend the free of use PNG compressor "PNG Crush" (you can download it here) with the following options:

pngcrush -rem allb -brute -d [outputdir] [inputdir]/*.png
-rem allb remove metadata
-brute test all optimization algorithm and apply the one with the best result
-d [outputdir] specifies where the "crushed" files will be dumped (preserving original filenames)
[inputdir]/*.png specifies where are the input files to be "crushed" located

 

PNG Crush comes with Workbench Developer and the optimization - with options detailed above - can be launched on a single item or a complete folder directly from the Service Browser contextual menu.


Video

The recommended envelop for your video contents is 3GPP (3rd Generation Partnership Project - see here for more information). It is widely supported on mobile devices and can encapsulate the most commonly supported encoding formats.
The supported formats are MP4-Video Simple Profile, H.263 baseline and H.264 baseline.

Avoid video upscaling

Usually displaying a video in a higher resolution than the original one will result in poor quality of rendering, so we recommend providing the video in its fullscreen resolution and only proceeding to downscaling when required.

Adjust video frame rate

In Rich Media services, video rendering is performed in parallel to the scene rendering. Both frame rates are added to affect the overall CPU occupation. Tuning appropriately the video frame rate will ensure a good user experience. As video rendering has the highest priority for the device CPU, the video frame rate has to be downgraded until the embedding rich media content frame rate becomes acceptable.
We usually recommend:

  • 15 fps max for a standalone video
  • 10-12 fps max for a video embedded with additional rich media content

Adjust video bit rate

The video bit rate affects the overall latency to download the video to the device. It shall be properly balanced to obtain the optimal user experience - meaning with no playback interruption - when an average bandwidth is available.
On 3G networks, we usually recommend: 50 to 120 kbps max (including audio).


Audio

The recommended envelop for your audio contents is 3GPP (3rd Generation Partnership Project - see here for more information). It is widely supported on mobile devices and can encapsulate the most commonly supported encoding formats.
The supported formats are AMR Narrow Band and AAC Low Complexity.

Adjust audio bit rate

The audio bit rate affects the overall latency to download the audio to the device. It shall be properly balanced to obtain the optimal user experience - meaning with no playback interruption - when an average bandwidth is available.
On 3G networks, we usually recommend: 50 to 120 kbps max.

Share this