image_transparent_png.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  4. <title>PNG transparency test</title>
  5. <style type="text/css">
  6. body {
  7. font-size: 11px;
  8. font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  9. padding: 2em;
  10. }
  11. p {
  12. background: #C6C6FF;
  13. }
  14. img[width="85"] {
  15. margin: 8px;
  16. }
  17. @page {
  18. margin: 0;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <h1>PNG transparency test</h1>
  24. Examples from <a href="http://entropymine.com/jason/testbed/pngtrans/">http://entropymine.com/jason/testbed/pngtrans/</a>
  25. <p>
  26. Not all possible results are shown; there are too many combinations
  27. of background colors and shapes of the opaque region. However, I
  28. intend to include every result that actually occurs in a mainstream
  29. browser. If I am missing any, please
  30. <a href="mailto:jason1@pobox.com">let me know</a>.
  31. </p><p>It's come to my attention that my images which show how
  32. alpha transparency should look are not quite perfect
  33. in regard to precisely how transparent they are at various points.
  34. Rather than try to modify this page to test gamma
  35. correction issues as well, I've created a
  36. <a href="http://entropymine.com/jason/testbed/alphagamma/">separate test page</a> for that.
  37. </p><p>
  38. This test page was constructed by
  39. <a href="http://pobox.com/~jason1/">Jason Summers</a>.
  40. Comments may be emailed to <a href="mailto:jason1@pobox.com">jason1@pobox.com</a>.<br>
  41. There are
  42. <a href="http://www.libpng.org/pub/png/pngmisc.html#images">other test
  43. pages</a> listed at the PNG web site.
  44. <!-- <p>
  45. There's a
  46. <a href="http://www.petitiononline.com/msiepng/petition.html">petition</a>
  47. (at PetitionOnline) for proper PNG support in IE for Windows. -->
  48. <!--
  49. <p>I am aware that MSIE 5.5+ for Windows supports an
  50. "AlphaImageLoader" filter that
  51. <a href="http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html">can be
  52. used</a> to display PNG images with transparency. Personally, I don't consider
  53. it to
  54. be an acceptable replacement for standard PNG support, though it does mostly
  55. work, with some caveats (requires the site author to modify each web page;
  56. requires scripting to be turned on; requires extra documents to be loaded
  57. from the server; prevents visitors from easily saving the image to disk;
  58. slows down processing of non-transparent images;
  59. seems to fail once in a while for no apparent reason). I don't intend to
  60. hack this page to support it, but maybe I'll put up a separate test page
  61. sometime.
  62. -->
  63. </p>
  64. <h3>Alpha and palette transparency</h3>
  65. <p>Expected result:<br>
  66. <img width="95" height="72" src="./images/png/result_ok.gif" alt="[Test image]">
  67. </p>
  68. <p><b>(T1)</b> 8-bit palette, includes background color:<br>
  69. <img width="85" height="62" src="./images/png/pal_bk.png" alt="[Test image]">
  70. </p>
  71. <p><b>(T2)</b> 8-bit palette, no background color:<br>
  72. <img width="85" height="62" src="./images/png/pal.png" alt="[Test image]">
  73. </p>
  74. <p><b>(T3)</b> 32-bit RGBA, includes background color:<br>
  75. <img width="85" height="62" src="./images/png/rgba8_bk.png" alt="[Test image]">
  76. </p>
  77. <p><b>(T4)</b> 32-bit RGBA, no background color:<br>
  78. <img width="85" height="62" src="./images/png/rgba8.png" alt="[Test image]">
  79. </p>
  80. <p><b>(T5)</b> 64-bit RGBA, includes background color:<br>
  81. <img width="85" height="62" src="./images/png/rgba16_bk.png" alt="[Test image]">
  82. </p>
  83. <p><b>(T6)</b> 64-bit RGBA, no background color:<br>
  84. <img width="85" height="62" src="./images/png/rgba16.png" alt="[Test image]">
  85. </p>
  86. <h3>RGB binary transparency</h3>
  87. <p>Expected result:<br>
  88. <img width="95" height="72" src="./images/png/resultb_ok.gif" alt="[Test image]">
  89. </p>
  90. <p><b>(T7)</b> 24-bit RGB, binary transparency, includes background color:<br>
  91. <img width="85" height="62" src="./images/png/rgb8_t_bk.png" alt="[Test image]">
  92. </p>
  93. <p><b>(T8)</b> 24-bit RGB, binary transparency, no background color:<br>
  94. <img width="85" height="62" src="./images/png/rgb8_t.png" alt="[Test image]">
  95. </p>
  96. <p><b>(T9)</b> 48-bit RGB, binary transparency, includes background color:<br>
  97. <img width="85" height="62" src="./images/png/rgb16_t_bk.png" alt="[Test image]">
  98. </p>
  99. <p><b>(T10)</b> 48-bit RGB, binary transparency, no background color:<br>
  100. <img width="85" height="62" src="./images/png/rgb16_t.png" alt="[Test image]">
  101. </p>
  102. <h3>Grayscale alpha transparency</h3>
  103. <p>Expected result:<br>
  104. <img width="95" height="72" src="./images/png/resultga.gif" alt="[Test image]">
  105. </p>
  106. <p><b>(G1)</b> 16 bpp grayscale (8 gray + 8 alpha), includes background color:<br>
  107. <img width="85" height="62" src="./images/png/gray8a_bk.png" alt="[Test image]">
  108. </p>
  109. <p><b>(G2)</b> 16 bpp grayscale (8 gray + 8 alpha), no background color:<br>
  110. <img width="85" height="62" src="./images/png/gray8a.png" alt="[Test image]">
  111. </p>
  112. <p><b>(G3)</b> 32 bpp grayscale (16 gray + 16 alpha), includes background color:<br>
  113. <img width="85" height="62" src="./images/png/gray16a_bk.png" alt="[Test image]">
  114. </p>
  115. <p><b>(G4)</b> 32 bpp grayscale (16 gray + 16 alpha), no background color:<br>
  116. <img width="85" height="62" src="./images/png/gray16a.png" alt="[Test image]">
  117. <h3>Grayscale binary transparency</h3>
  118. <p>Expected result:<br>
  119. <img width="95" height="72" src="./images/png/resultgb.gif" alt="[Test image]">
  120. </p>
  121. <p><b>(G5)</b> 8 bpp grayscale (8 gray), includes background color:<br>
  122. <img width="85" height="62" src="./images/png/gray8b_bk.png" alt="[Test image]">
  123. </p>
  124. <p><b>(G6)</b> 8 bpp grayscale (8 gray), no background color:<br>
  125. <img width="85" height="62" src="./images/png/gray8b.png" alt="[Test image]">
  126. </p>
  127. <p><b>(G7)</b> 16 bpp grayscale (16 gray), includes background color:<br>
  128. <img width="85" height="62" src="./images/png/gray16b_bk.png" alt="[Test image]">
  129. </p>
  130. <p><b>(G8)</b> 16 bpp grayscale (16 gray), no background color:<br>
  131. <img width="85" height="62" src="./images/png/gray16b.png" alt="[Test image]">
  132. <h3>Miscellaneous</h3>
  133. <p><b>(M1)</b> 8-bit palette, no transparency, includes background color:<br>
  134. Expected result:<br>
  135. <img width="95" height="72" src="./images/png/result_no.gif" alt="[Test image]"><br>
  136. <img width="85" height="62" src="./images/png/pal_bk_notrns.png" alt="[Test image]">
  137. </p>
  138. <p><b>(M2)</b> (4-bit) palette, binary transparency only, no background color:<br>
  139. Expected result:<br>
  140. <img width="95" height="72" src="./images/png/resultb_ok.gif" alt="[Test image]"><br>
  141. <img width="85" height="62" src="./images/png/palb.png" alt="[Test image]"><br>
  142. (This tests a few things that may have slipped through the cracks.)
  143. </p>
  144. </body></html>