Comparison of memory footprints of different textures available in Cocos2d

So I have been fiddling with textures in Cocos2d to find out what image format produces the least memory foot print while not degrading quality in a very visible manner.

So I created an original PNG image, and then converted it to different image formats using Texture Packer. I then created an XCode project to load those images and print out the memory footprint. The XCode project can be fetched from: https://github.com/rumahfirman/texture-format

First, I will list image format from biggest memory foot print to smallest memory foot print (the original image is original.png which is RGBA 8888):


"original.png" file size=5 KB rc=2 id=2 1024 x 1024 @ 32 bpp = 4096 KB 
"rgba4444.png" file size=4 KB rc=2 id=3 1024 x 1024 @ 32 bpp = 4096 KB
"rgba4444fsa.png" file size=131 KB rc=2 id=4 1024 x 1024 @ 32 bpp = 4096 KB
"rgb888.pvr.ccz" file size=2 KB rc=2 id=8 640 x 960 @ 32 bpp = 2400 KB
"rgba4444fsa.pvr.ccz" file size=90 KB rc=2 id=9 1024 x 1024 @ 16 bpp = 2048 KB
"rgba4444fs.pvr.ccz" file size=16 KB rc=2 id=10 1024 x 1024 @ 16 bpp = 2048 KB
"rgba5551fs.pvr.ccz" file size=50 KB rc=2 id=11 1024 x 1024 @ 16 bpp = 2048 KB
"rgba5551fsa.pvr.ccz" file size=120 KB rc=2 id=12 1024 x 1024 @ 16 bpp = 2048 KB
"rgb565.pvr.ccz" file size=140 KB rc=2 id=7 640 x 960 @ 16 bpp = 1200 KB
"pvrtc4.pvr.ccz" file size=20 KB rc=2 id=6 1024 x 1024 @ 4 bpp = 512 KB
"pvrtc2.pvr.ccz" file size=16 KB rc=2 id=5 1024 x 1024 @ 2 bpp = 256 KB

From the above data, it can be seen that file size does not correlate to memory footprint. The smallest file size (which is 4 KB) produces the biggest memory foot print (4096 KB).

It is also obvious that the memory footprint of RGBA 4444 uncompressed PNG is the same as the original image which is RGBA 8888. So RGBA 4444 does not produce memory saving, yet result in quality degradation.

In the above file name, the suffix fs stands for Floyd Steinberg dithering. FSA stands for Floyd Steinberg Alpha dithering.

Dithering basically means to smoothen your image. If your original image contains color gradation, dithering is especially important. Reducing image quality often results in abrupt color changes while in the original image, the color gradually changes. This can be rectified by dithering and FS works well.

If your original image contains alpha channel, FSA also dithers the alpha channel, creating "dotted artifacts", which is especially visible if your image z-order is higher than some other image, i.e there is an image located behind the dithered image. To rectify this, choose FS without A, i.e dither all channels in the image except the alpha channel.

Now let's talk about quality. From best to worse:
Original
RGB 888
RGBA 5551
RGBA 4444
RGB 565

Rule of thumb: if possible, always use RGB 565 for background images.

0 komentar:

Posting Komentar