123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- <html>
-
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
- <title>PNG transparency test</title>
- <style type="text/css">
- body {
- font-size: 11px;
- font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
- padding: 2em;
- }
-
- p {
- background: #C6C6FF;
- }
-
- img[width="85"] {
- margin: 8px;
- }
-
- @page {
- margin: 0;
- }
- </style>
- </head>
- <body>
- <h1>PNG transparency test</h1>
- Examples from <a href="http://entropymine.com/jason/testbed/pngtrans/">http://entropymine.com/jason/testbed/pngtrans/</a>
- <p>
- 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
- <a href="mailto:jason1@pobox.com">let me know</a>.
- </p><p>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
- <a href="http://entropymine.com/jason/testbed/alphagamma/">separate test page</a> for that.
- </p><p>
- This test page was constructed by
- <a href="http://pobox.com/~jason1/">Jason Summers</a>.
- Comments may be emailed to <a href="mailto:jason1@pobox.com">jason1@pobox.com</a>.<br>
- There are
- <a href="http://www.libpng.org/pub/png/pngmisc.html#images">other test
- pages</a> listed at the PNG web site.
- <!-- <p>
- There's a
- <a href="http://www.petitiononline.com/msiepng/petition.html">petition</a>
- (at PetitionOnline) for proper PNG support in IE for Windows. -->
- <!--
- <p>I am aware that MSIE 5.5+ for Windows supports an
- "AlphaImageLoader" filter that
- <a href="http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html">can be
- used</a> 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.
- -->
- </p>
- <h3>Alpha and palette transparency</h3>
- <p>Expected result:<br>
- <img width="95" height="72" src="./images/png/result_ok.gif" alt="[Test image]">
- </p>
- <p><b>(T1)</b> 8-bit palette, includes background color:<br>
- <img width="85" height="62" src="./images/png/pal_bk.png" alt="[Test image]">
- </p>
- <p><b>(T2)</b> 8-bit palette, no background color:<br>
- <img width="85" height="62" src="./images/png/pal.png" alt="[Test image]">
- </p>
- <p><b>(T3)</b> 32-bit RGBA, includes background color:<br>
- <img width="85" height="62" src="./images/png/rgba8_bk.png" alt="[Test image]">
- </p>
- <p><b>(T4)</b> 32-bit RGBA, no background color:<br>
- <img width="85" height="62" src="./images/png/rgba8.png" alt="[Test image]">
- </p>
- <p><b>(T5)</b> 64-bit RGBA, includes background color:<br>
- <img width="85" height="62" src="./images/png/rgba16_bk.png" alt="[Test image]">
- </p>
- <p><b>(T6)</b> 64-bit RGBA, no background color:<br>
- <img width="85" height="62" src="./images/png/rgba16.png" alt="[Test image]">
- </p>
- <h3>RGB binary transparency</h3>
- <p>Expected result:<br>
- <img width="95" height="72" src="./images/png/resultb_ok.gif" alt="[Test image]">
- </p>
- <p><b>(T7)</b> 24-bit RGB, binary transparency, includes background color:<br>
- <img width="85" height="62" src="./images/png/rgb8_t_bk.png" alt="[Test image]">
- </p>
- <p><b>(T8)</b> 24-bit RGB, binary transparency, no background color:<br>
- <img width="85" height="62" src="./images/png/rgb8_t.png" alt="[Test image]">
- </p>
- <p><b>(T9)</b> 48-bit RGB, binary transparency, includes background color:<br>
- <img width="85" height="62" src="./images/png/rgb16_t_bk.png" alt="[Test image]">
- </p>
- <p><b>(T10)</b> 48-bit RGB, binary transparency, no background color:<br>
- <img width="85" height="62" src="./images/png/rgb16_t.png" alt="[Test image]">
- </p>
- <h3>Grayscale alpha transparency</h3>
- <p>Expected result:<br>
- <img width="95" height="72" src="./images/png/resultga.gif" alt="[Test image]">
- </p>
- <p><b>(G1)</b> 16 bpp grayscale (8 gray + 8 alpha), includes background color:<br>
- <img width="85" height="62" src="./images/png/gray8a_bk.png" alt="[Test image]">
- </p>
- <p><b>(G2)</b> 16 bpp grayscale (8 gray + 8 alpha), no background color:<br>
- <img width="85" height="62" src="./images/png/gray8a.png" alt="[Test image]">
- </p>
- <p><b>(G3)</b> 32 bpp grayscale (16 gray + 16 alpha), includes background color:<br>
- <img width="85" height="62" src="./images/png/gray16a_bk.png" alt="[Test image]">
- </p>
- <p><b>(G4)</b> 32 bpp grayscale (16 gray + 16 alpha), no background color:<br>
- <img width="85" height="62" src="./images/png/gray16a.png" alt="[Test image]">
- <h3>Grayscale binary transparency</h3>
- <p>Expected result:<br>
- <img width="95" height="72" src="./images/png/resultgb.gif" alt="[Test image]">
- </p>
- <p><b>(G5)</b> 8 bpp grayscale (8 gray), includes background color:<br>
- <img width="85" height="62" src="./images/png/gray8b_bk.png" alt="[Test image]">
- </p>
- <p><b>(G6)</b> 8 bpp grayscale (8 gray), no background color:<br>
- <img width="85" height="62" src="./images/png/gray8b.png" alt="[Test image]">
- </p>
- <p><b>(G7)</b> 16 bpp grayscale (16 gray), includes background color:<br>
- <img width="85" height="62" src="./images/png/gray16b_bk.png" alt="[Test image]">
- </p>
- <p><b>(G8)</b> 16 bpp grayscale (16 gray), no background color:<br>
- <img width="85" height="62" src="./images/png/gray16b.png" alt="[Test image]">
- <h3>Miscellaneous</h3>
- <p><b>(M1)</b> 8-bit palette, no transparency, includes background color:<br>
- Expected result:<br>
- <img width="95" height="72" src="./images/png/result_no.gif" alt="[Test image]"><br>
- <img width="85" height="62" src="./images/png/pal_bk_notrns.png" alt="[Test image]">
- </p>
- <p><b>(M2)</b> (4-bit) palette, binary transparency only, no background color:<br>
- Expected result:<br>
- <img width="95" height="72" src="./images/png/resultb_ok.gif" alt="[Test image]"><br>
- <img width="85" height="62" src="./images/png/palb.png" alt="[Test image]"><br>
- (This tests a few things that may have slipped through the cracks.)
- </p>
- </body></html>
|