PNG8+Alpha from Fireworks (colormap) are different/smaller than from elsewhere (RGBA). Why?

Question

In Fireworks, when you export a PNG8 file with alpha transparency, the resulting file will be something like this:

png8-fireworks.png: PNG image data, 500 x 500, 8-bit colormap, non-interlaced

If you convert a 32bit PNG using other tools (PNGOUT, Smush.it) the result looks like this:

png24-smushit.png:  PNG image data, 500 x 500, 8-bit/color RGBA, non-interlaced
png8-pngout.png:    PNG image data, 500 x 500, 8-bit/color RGBA, non-interlaced

What exactly is the difference? They both have alpha transparency, but the Fireworks file is 8KB while the others are 20KB. Now the Fireworks file in noticeably lower quality (namely with banding on gradients).

For some images the PNG8+alpha from Fireworks works great and has a super small file size comparatively. I just haven't been able to figure out what Fireworks is doing and how it is different than the other methods.

Answer 1

PNG-8 means 8 bits per pixel, which means it can only display 256 different colours (from a pallet).

24 and 32 bits per pixel allow you to use far more colours (and hence get nice smooth gradients) but come at the cost of filesize.

Answer 2

The PNG8 file is a very efficient format. It finds the unique colors in the image and only saves those in a small palette. The cool part is that it also saves alpha transparency in the palette with each color. (If you have three pure reds (#FF0000) in your image, but each has a different alpha value, let's say 255, 128, 65, it will save three entries in the palette.

You can also in Fireworks choose to limit the palette size to a power of 2, so you can reduce colors used for more savings. Often a 256 color image will look fine at 64 colors and save a lot of weight.

Answer 3

from sites of both tools:

PNGOUT:

It won't convert an image to a color type or bit depth that cannot losslessly store the image.

It won't reduce the number of colors being used in an image, or convert the colors to grayscale unless all the colors correspond to PNG grayscale values already.

Smush.it:

It is a "lossless" tool […]

Neither gives you a 256 paletted png: it's the diff between "colormap" (= palette) and "rgba" (truecolor = R of 2^8 x G of 2^8 x B of 2^8 x Alpha of 2^8, with 2^8 = 256).

Fireworks does.