PNG transparency

tests

note that the stars are not aligned to the background at all.

1. 8-bit opaque

   the trivial case

   

2. 8-bit with indexed transparency

   i've still rendered this on a white background, and the outline is antialiased. however, i've set the index of the colour white to be rendered as transparent. you can see the mess of the greys generated by the antialiasing at the edges.

   

3. 24-bit, no transparency

   this one's full 8-bit per channel colour, no transparency. should also be a trivial case.

   

4. 24-bit plus 8-bit transparency

   this is where things get useful. instead of antialiasing to a white background, the edge pixels are all fully black but the transparency values do what antialiasing did before. if your browser supports this, the edges of the star should look smooth.

   IE6 gives a (seemingly random) background colour to the whole image, making the transparency pretty much useless. better half-way support i've seen is in Fresco, which gives full transparency if >50% transparency is requested, otherwise opacity.

   

5. more complex transparency

   if the previous worked, this should too, but gives a better idea of what the transparency can do.

   

how they look

how they should look

these are all 24-bit PNGs, as test image 3.

i'm confident that even very old browsers will get the opaque ones right. here's how the final two look in Firefox on linux:

how they look in Fresco

how they look in IE6

i think you'll agree that Fresco's half-implementation is much better than this half-assed lack of effort. this makes the transparency completely useless! i seem to have been lucky here, too, with this grey – generally the background colour seems to be entirely random.

how they look in Browse and Phoenix

almost all development on Browse stopped in late 1998. it could already do this: