PNG transparency test

Examine the test images in the left column below. To determine how your browser handles PNG transparency, find the images on the right that look the most similar.

Not all possible results are shown; there are too many combinations of background colors and shapes of the opaque region. However, I intend to include every result that actually occurs in a mainstream browser. If I am missing any, please let me know.

It's come to my attention that my images which show how alpha transparency should look are not quite perfect in regard to precisely how transparent they are at various points. Rather than try to modify this page to test gamma correction issues as well, I've created a separate test page for that.

This test page was constructed by Jason Summers. Comments may be emailed to jason1@pobox.com.
There are other test pages listed at the PNG web site.

Alpha and palette transparency

Test images Possible results

(T1) 8-bit palette, includes background color:
[Test image]
(T2) 8-bit palette, no background color:

(T3) 32-bit RGBA, includes background color:

(T4) 32-bit RGBA, no background color:

(T5) 64-bit RGBA, includes background color:

(T6) 64-bit RGBA, no background color:

Excellent! This is what all the images in this set should look like. (Netscape6; MSIE5/Mac; Opera6; IE7)

Uses dithering to simulate alpha transparency. This is a good thing for the browser to do if it does not support true alpha transparency.

Uses web page background color, and fully transparent pixels are transparent. This is another acceptable thing to do if the browser cannot support true alpha transparency.

Uses image's background color, and fully transparent pixels are transparent. While worse than the above results, this is acceptable (maybe) for tests with a background color, and is relatively easy to implement.

No transparency; uses web page background color.

No transparency; uses the background color included in the image file. (MSIE4-6/Win:T3,T5; Netscape4:T1,T3; Opera4-5:T3,T5)

No transparency; defaults to a light gray background. (MSIE4-6/Win:T4,T6)

No transparency; defaults to a black background. (Opera4-5:T6)

No transparency; defaults to a white background. (Opera4-5:T4)

Only fully transparent pixels are transparent. Shown with a white background, but your background may differ.

Uses an arbitrary threshhold of opacity. Shown with a white background, but your background may differ. The position at which image becomes transparent may also differ. This is potentially bad, since some images may not have any pixels over the threshhold.

Discards all partially transparent pixels. This is very bad. (MSIE4-6/Win:T1,T2)

Ignores transparency completely. This is pretty bad, since an image may be useless (e.g. all one color) without the transparency data. (Netcscape4:T2,T4,T6)

This could mean that the browser supports only one transparent palette entry, and it chooses the first completely transparent one found.

Browser is under the delusion that the transparency data is a palette index, rather than an alpha value. (Opera4-5:T1,T2)

Bizarre. Netscape seems to sometimes use the wrong blue value when compositing. (Netscape4:T5)

RGB binary transparency

(T7) 24-bit RGB, binary transparency, includes background color:
[Test image]
(T8) 24-bit RGB, binary transparency, no background color:

(T9) 48-bit RGB, binary transparency, includes background color:

(T10) 48-bit RGB, binary transparency, no background color:

This is correct.

Uses web page's background color.

Uses image's background color. (Netscape4:T7,T9)

Defaults to black background color. (Opera4-5:T9,T10)

Defaults to white background color. (Opera4-5:T7,T8)

Ignores transparency completely. (MSIE4-6/Win; Netscape4:T8,T10)

This could be caused by a bug in which the browser fails to match transparent colors correctly, causing it to think colors are transparent when they aren't.

Strange bug in some old versions of Mozilla. (T7,T8)

Grayscale alpha transparency

(G1) 16 bpp grayscale (8 gray + 8 alpha), includes background color:
[Test image]
(G2) 16 bpp grayscale (8 gray + 8 alpha), no background color:

(G3) 32 bpp grayscale (16 gray + 16 alpha), includes background color:

(G4) 32 bpp grayscale (16 gray + 16 alpha), no background color:

This is correct.

No transparency; defaults to a light gray background.

No transparency; uses image's background color.

No transparency; defaults to a black background.

Ignores transparency completely.

Grayscale binary transparency

(G5) 8 bpp grayscale (8 gray), includes background color:
[Test image]
(G6) 8 bpp grayscale (8 gray), no background color:

(G7) 16 bpp grayscale (16 gray), includes background color:

(G8) 16 bpp grayscale (16 gray), no background color:

This is correct.

No transparency; uses image's background color.

Ignores transparency completely.

Miscellaneous

(M1) 8-bit palette, no transparency, includes background color:
[Test image]
This is correct.

Wrong. You might not expect transparency problems in an image that has no transparency, but Netscape 4 manages to get this wrong. If a nontransparent paletted image has a background color, it replaces all the black pixels with the background color. This is probably caused by a libpng quirk, but Netscape has no excuse for not fixing it.

(M2) (4-bit) palette, binary transparency only, no background color:
[Test image]
(This tests a few things that may have slipped through the cracks.)
This is correct.

Strange bug in some old versions of Mozilla.

Browser ignores transparency. Not as wrong as the previous.

Alpha and palette transparency
Test images	Possible results
(T1) 8-bit palette, includes background color: (T2) 8-bit palette, no background color: (T3) 32-bit RGBA, includes background color: (T4) 32-bit RGBA, no background color: (T5) 64-bit RGBA, includes background color: (T6) 64-bit RGBA, no background color:		Excellent! This is what all the images in this set should look like. (Netscape6; MSIE5/Mac; Opera6; IE7)
		Uses dithering to simulate alpha transparency. This is a good thing for the browser to do if it does not support true alpha transparency.
		Uses web page background color, and fully transparent pixels are transparent. This is another acceptable thing to do if the browser cannot support true alpha transparency.
		Uses image's background color, and fully transparent pixels are transparent. While worse than the above results, this is acceptable (maybe) for tests with a background color, and is relatively easy to implement.
		No transparency; uses web page background color.
		No transparency; uses the background color included in the image file. (MSIE4-6/Win:T3,T5; Netscape4:T1,T3; Opera4-5:T3,T5)
		No transparency; defaults to a light gray background. (MSIE4-6/Win:T4,T6)
		No transparency; defaults to a black background. (Opera4-5:T6)
		No transparency; defaults to a white background. (Opera4-5:T4)
		Only fully transparent pixels are transparent. Shown with a white background, but your background may differ.
		Uses an arbitrary threshhold of opacity. Shown with a white background, but your background may differ. The position at which image becomes transparent may also differ. This is potentially bad, since some images may not have any pixels over the threshhold.
		Discards all partially transparent pixels. This is very bad. (MSIE4-6/Win:T1,T2)
		Ignores transparency completely. This is pretty bad, since an image may be useless (e.g. all one color) without the transparency data. (Netcscape4:T2,T4,T6)
		This could mean that the browser supports only one transparent palette entry, and it chooses the first completely transparent one found.
		Browser is under the delusion that the transparency data is a palette index, rather than an alpha value. (Opera4-5:T1,T2)
		Bizarre. Netscape seems to sometimes use the wrong blue value when compositing. (Netscape4:T5)
RGB binary transparency
(T7) 24-bit RGB, binary transparency, includes background color: (T8) 24-bit RGB, binary transparency, no background color: (T9) 48-bit RGB, binary transparency, includes background color: (T10) 48-bit RGB, binary transparency, no background color:		This is correct.
		Uses web page's background color.
		Uses image's background color. (Netscape4:T7,T9)
		Defaults to black background color. (Opera4-5:T9,T10)
		Defaults to white background color. (Opera4-5:T7,T8)
		Ignores transparency completely. (MSIE4-6/Win; Netscape4:T8,T10)
		This could be caused by a bug in which the browser fails to match transparent colors correctly, causing it to think colors are transparent when they aren't.
		Strange bug in some old versions of Mozilla. (T7,T8)
Grayscale alpha transparency
(G1) 16 bpp grayscale (8 gray + 8 alpha), includes background color: (G2) 16 bpp grayscale (8 gray + 8 alpha), no background color: (G3) 32 bpp grayscale (16 gray + 16 alpha), includes background color: (G4) 32 bpp grayscale (16 gray + 16 alpha), no background color:		This is correct.
		No transparency; defaults to a light gray background.
		No transparency; uses image's background color.
		No transparency; defaults to a black background.
		Ignores transparency completely.
Grayscale binary transparency
(G5) 8 bpp grayscale (8 gray), includes background color: (G6) 8 bpp grayscale (8 gray), no background color: (G7) 16 bpp grayscale (16 gray), includes background color: (G8) 16 bpp grayscale (16 gray), no background color:		This is correct.
		No transparency; uses image's background color.
		Ignores transparency completely.
Miscellaneous
(M1) 8-bit palette, no transparency, includes background color:		This is correct.
		Wrong. You might not expect transparency problems in an image that has no transparency, but Netscape 4 manages to get this wrong. If a nontransparent paletted image has a background color, it replaces all the black pixels with the background color. This is probably caused by a libpng quirk, but Netscape has no excuse for not fixing it.
(M2) (4-bit) palette, binary transparency only, no background color: (This tests a few things that may have slipped through the cracks.)		This is correct.
		Strange bug in some old versions of Mozilla.
		Browser ignores transparency. Not as wrong as the previous.