Image optimization

Wednesday, August 29, 2007 Labels:

The PNG format is pretty versatile. It can contain bitmaps indexed with palettes in both 8-bit and 4-bit format, bitmaps in grayscale, bitmaps in 32bit color using alpha masks and so on.

The first thing you have to do is make sure that each image you use is converted to it’s most efficient color format. If it’s pixeled art, you can reduce the colors in an indexed palette to include just the ones needed. If it has anti-aliased edges, you must save it in 32bit color format to make use of the alpha channel (24 bit for the bitmap data, 8 bit for the alpha channel). 32bit images are always larger in byte size, but of course they look nicer. Even if you’re using 32bit images, it can be good to reduce the amount of different colors used as this makes the bitmap data easier to compress. An easy way of doing this is to use the “adjust - posterize” feature in Photoshop.

Note: It is possible to create 8bit indexed PNG files that use a 8 bit alpha channel using a program called PNGOutWin, but it’s not commonly supported and I’ve heard of problems with such images on certain phone models. (Anyway, thanks to Ed for pointing this out)

I use the “save for web” option in Photoshop when I first export my images for use in J2ME games, it is really good on producing indexed images.

The PNG format has support for a lot of descriptive “chunks” that’s not really needed just for drawing them in J2ME. These can be removed using PNG optimizer tools. Also, the PNG format uses the deflate algorithm for compression (just as ZIP does) so by using a tool that recompresses the data chunks using a more efficient deflate you can get even smaller PNGs. The PNG format also has support for different “filters” that varies the way the image data is stored. This can be used to optimize a PNG image for smaller size as well.

You can often reduce the total size of your images by joining them together into bigger images (that looks like film strips). The ground rule of compression is that data compresses better when the compression algorithm has more data to work with (instead of compressing images individually). However, sometimes it’s better to leave the images separate, as they can be using different optimized 8-bit and 4-bit palettes. You have to try different approaches to find what combination works best for your images.


matt said...

Great Article! Here are some tips to optimize images for search engine ranking

Post a Comment

Waqas Sadiq © 2014