Optimizing Images

From MobileDesign

Jump to: navigation, search

[edit] Optimizing Images for Mobile Display

The good folks over at Five Mobile gave us permission to use their information to start this page.


A common struggle with mobile devices is the small size applications are allowed to be. Feature phones in particular only allow a few hundred KB to MB for each application. Large applications also impact your wallet when you have to download them. Smartphones and cheaper data plans are helping relieve this problem, however if you need your application to support a wide variety of phones there are some good practices you should follow.

Java ME handsets have the most issues with images, so following some easily automatable rules will make your images work on a broad set of handsets. PNG images are the most common, since it’s the only required image format for the platform. According to the Java ME specification, most PNG features should work, but in reality a number of them do not. Specifically 8-bit transparency is not implemented on all devices. Some devices dislike some of the extra data chunks in PNG files that are not strictly necessary, some other devices will ignore other chunks — for example, the gAMA (Gamma) chunk is often ignored.

So the goods – here’s how we process our images – it makes our apps work better across Java ME handsets, and it makes downloads faster for Smartphones.

  • Avoid 8-bit transparency as many devices have little or no support for it. If you need it for a rich user interface, such as on QVGA devices, just understand that you’ll need non 8-bit transparency images for smaller screen devices
  • PNG files should be indexed, not RGB. This allows you to shrink the image size by minimizing the number of colors. Eyeball the images as you lower the number of colors and you’ll frequently be able to shrink the file size
  • Remove extra data chunks aside from the 4-5 necessary ones. Anything other than IHDR, PLTE, TRNS, IDAT, IEND should be removed. Extremely rarely, a device has been known to require PHYS or BKGD to work properly – these cases are rare enough to handle manually when required
  • Ensure the transparent colors are at the beginning of the palette
  • Transparency color should ideally be Black, White or Pink. Pink is a usual choice as it is in the middle of the RBG spectrum. Black or white are ideal to minimize transparency problems when background hue is generally known
  • Transparent color should not be numerically close (within 0×0F) to a non transparent color – some devices will either render all “close” colors transparent, or not render the transparent pixels as transparent
  • Absolutely no duplicate colors should exist in the palette
Retrieved from "http://patterns.littlespringsdesign.com/index.php/Optimizing_Images"
Personal tools