There are two things you should do to your graphics, when preparing them for device. The first is color reduction, the second is re-compressing. First color reduction.
Color reductionWhy would you want to reduce the amount of colors used? We want the maximum number of colors, right? Yeah! Unfortunately, most mobile devices do not support millions of colors; many of them support only a percentage of that. The key to making sure your images look good on device is reducing color depth, using dithering techniques. Corel’s Paint Shop Pro is the only graphics application I have tested which has a special “reduce to thousands-of-colors” feature.
If you don’t own a copy, you will have to posterize your images to the color depth of the target device. Then convert this image to indexed colors with an EXACT palette. Finally go back to your original 32 bits image and convert it to indexed colors using the PREVIOUS palette and the most appropriate dithering.
The important step is the dithering. Without that, on device, your images would look exactly as the posterized version.
Note that you might have to slice the image and repeat the process to obtain an EXACT palette.
The image might not look as nice on desktop as it used to, but it should at least look the same on desktop as on device. On to part two!
Image re-compressionIsn’t PNG compressed already? Of course it is, but don’t you think we can do better? In most cases we can. Most image editors add metadata in one form or another to PNG files. In most cases this is not needed, and chopping it away can save a lot of space. In one project my final zip file went from 300kb to measly 50kb by using these techniques.
To business. You might know about the PNG compressor "PNG Crush". It was the first I ever heard about, but it seems there are some others out there as well. The most famous are OptiPNG and PNGOut.
How do they compare? They're roughly the same. So which one you use is not important; the important thing is that you actually use one of these. Therefore; accessibility. Neil Turner has a very good article on adding PNG Crush to the right-click menu of PNG files (for Windows). No need to copy his blog post, go read it!
The problem with PNG Crush is that it can't replace the current file, meaning you will have to rename the result when you're done. That is why I prefer "PNGOut" instead, which can optimize-in place.
As a final mention for you Linux users, here is what our Virtuelvis uses:
(this is using first pngcrush, and then optipng)
Compress every png into directory 'out'
$ pngcrush -rem alla -brute -fix -d out *.pngrecompress them
$ cd out $ optipng -zc1-9 -zm1-9 -zs0-3 -f0-5 *.png $ mv -f *.png ../
(mv -f can be replaced with your favorite windows file moving flavor)
After this optimizing session your PNG images should look better and be leaner than ever before!