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.

There's a petition (at PetitionOnline) for proper PNG support in IE for Windows.

I am aware that MSIE 5.5+ for Windows supports an "AlphaImageLoader" filter that can be used to display PNG images with transparency. Personally, I don't consider it to be an acceptable replacement for standard PNG support, though it does mostly work, with some caveats (requires the site author to modify each web page; requires scripting to be turned on; requires extra documents to be loaded from the server; prevents visitors from easily saving the image to disk; slows down processing of non-transparent images; seems to fail once in a while for no apparent reason). I don't intend to hack this page to support it, but maybe I'll put up a separate test page sometime.

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)

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.

Very wrong. You might not expect transparency problems in an image that has no transparency, but Netscape 4 manages to botch this. If a nontransparent paletted image has a background color, it replaces all the black pixels with the background color.

(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)
		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.
		Very wrong. You might not expect transparency problems in an image that has no transparency, but Netscape 4 manages to botch this. If a nontransparent paletted image has a background color, it replaces all the black pixels with the background color.
(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.