CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>PNG images - PNG Image Format</title><meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /><link rel="stylesheet" media="screen" href="../includes/aaastyle.css" type="text/css" /><meta name="description" content="A user-friendly introduction to PNG image format." /><script type="text/javascript"></script></head><body> <div class="headerbox"><div class="boxleft"><img src="../includes/webcolors.png" alt="Web Colors." width="150" height="20" /></div> <div class="boxright"> <script type="text/javascript" language="javascript">  </script> <script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><img src="http://c5.statcounter.com/counter.php?sc_project=818991&java=0&security=2a18d0e3&invisible=1" alt="" width="1" height="1" /></noscript> <b style="color:#676797">For the 21st century</b></div><div class="boxmiddle"><h1><b class="title">PNG Image Format</b></h1></div></div><table border="0" cellspacing="12" cellpadding="0" width="100%"><tr><td class="textbox" valign="top" width="50%"><h2>Portable Network Graphics - PNG</h2><div class="float-right"><img src="pngimages/png_indexed_transparency.png" alt="PNG image - 24-bit color." width="110" height="110" /></div><p>The PNG compression algorithm is one of the best that can be found. Unlike standard JPEG images, PNG compression involves no loss of image data, so there is no smudging or blurring. In some cases, filtering can compress the image data even more. Each horizontal line in an image can have one of five filter types associated with it. Whether specifying a filter helps in a particular case depends on the image content. In most cases the default setting is best ( adaptive filtering ).<br /><br />A member of the PNG Development Group, Paul Schmidt, created a test image containing pixels of all 16.7 million possible colors. He achieved a compression factor of 841:1. It's a neat example of a 24 bit PNG image.<br /><a href="png24.htm">View a screenshot and more examples</a>.</p><h3>PNG color depth</h3><p>True color 24 bit images are one of <a href="http://devon.freepgs.com/pngimages/PNG_color_options.png">fifteen color options</a> in PNG format. Images can be created using color palettes or 8 bit grayscale. Pixel data with 8 bit values can index into palettes containing up to 256 colors, and with fewer colors pixel values can be 1, 2 or 4 bits. For specialist requirements PNG also offers 48 bit true color and 16 bit grayscale.</p><h3>PNG transparency</h3><p>PNG format offers binary transparency equivalent to GIF transparency. It also has a more impressive option -- variable transparency, which is referred to as "alpha transparency", "alpha-channel transparency", or simply the "mask channel". Between all-or-none it allows 254 levels of partial transparency.</p><p>Nearly all the latest browsers support PNG's variable transparency, including WebTV and Microsoft Internet Explorer for Macs. <span class="nobreak">Pre-IE7</span> versions of Internet Explorer are the exception, but background colors ( transparent in other browsers ) can be selected and added to alpha images. However, IE6 for Windows <em>does</em> support PNG's single-color transparency. The image below shows some examples:</p><ol><li>24 bit PNG with alpha transparency.</li><li>8 bit PNG with binary transparency.</li><li>First example in <span class="nobreak">pre-IE7</span> versions of Internet Explorer for Windows.</li><li>8 bit GIF with binary transparency.</li></ol><div class="centered"><img src="http://devon.freepgs.com/pngimages/png_transparency.png" alt="Examples of PNG and GIF transparency." width="230" height="230" /></div><h3>PNG interlaced images</h3><p>Interlaced GIF images display their data in 4 passes, each one filling in more detail from top to bottom. The first pass begins after 1/8 of the image has downloaded. PNG uses a more sophisticated scheme which begins rendering the image after only 1/64 of the data has arrived. PNG's 7 pass scheme, devised by Adam Costello, fills in increasing amounts of detail both horizontally and vertically. Interlacing increases the file size. You may find that with PNG's better compression fewer images will need interlacing. For exceptionally large image files thumbnail preview images are another option.</p><h3>Extra features</h3><p>PNG format allows all kinds of extra information to be stored inside image files. The two most potentially helpful features for web images are gamma correction and embedded text.</p><p>Gamma correction is the ability to correct for differences in how computer systems interpret color values. Macintosh-generated images tend to look too dark on PCs, and PC-generated images tend to look too light on Macs. PNG format allows the gamma value of the computer which created an image to be embedded into the image file. Browsers and image software which support the feature can extract the gamma value and make a correction if the host computer uses a different gamma setting. <b>Warning:</b> There are some applications which don't implement it correctly. Don't rely on gamma correction to match image colors to HTML/CSS colors.</p><p>The text feature makes it possible to add any text annotations you like -- a description of the image, the date of creation, copyright information, etc. Very few image editors offer this option, but the <a href="edit-png.htm">TweakPNG</a> utility allows you to add text after the image has been created. It can also set the background color of a PNG alpha image. The default background color is gray in <span class="nobreak">pre-IE7</span> versions of Internet Explorer for Windows.</p></td><td class="textbg" valign="top" width="50%"><h2>PNG - the background story</h2><p>In the late 1980's CompuServe introduced a new image format which became popular with internet users - Graphic Interchange Format, or GIF. It used a long-established compression algorithm, LZW, without realizing that LZW was subject to a patent filed by the Sperry corporation, which was later taken over by Unisys.</p><p>In late 1994 Unisys dropped a bombshell by announcing that the company would start demanding royalties from all developers of GIF-supporting software. The announcement caused consternation among the internet community and ideas were passed around for a non-proprietary replacement. An informal internet working group was established by Thomas Boutell to devise an image format which would be even better than GIF. In October 1996, the World Wide Web Consortium adopted the new specification, Portable Network Graphics, as a recommended image format.</p><p>By late 1997 both Netscape 4 and Internet Explorer 4 had arrived with basic support for PNG images. Support for the more advanced features followed. Now, binary transparency and interlacing are supported by all modern browsers, but <span class="nobreak">pre-IE7</span> versions of Internet Explorer for Windows don't <i>directly</i> support PNG's most advanced feature, alpha-transparency. However, remedies are available using <b>PHP</b> or JavaScript:<br /><a href="png-alpha-transparency.htm">Internet Explorer and PNG transparency</a>.</p><div class="centered"><a href="png-alpha-transparency.htm"><img src="pngimages/transparency.png" alt="Internet Explorer and PNG transparency." width="265" height="49" /></a></div><p>The LZW patent in the United States expired in June 2003, and up to a year later in other countries. More information about patent controversies can be found at:</p><ul><li><a href="http://burnallgifs.org/archives/">Burn All GIFs</a></li></ul><p>A comprehensive source of information about Portable Network Graphics format is maintained by one of the original members of the PNG working group, Greg Roelofs:</p><ul><li><a href="http://www.libpng.org/pub/png/">The PNG Home Site</a></li></ul><p>He is also the author of "PNG: The Definitive Guide". An online version is available at the site. Greg kindly provided examples of minimum-size PNG files to compare with the output of image converters reviewed on this site:<br /><a href="review.htm">Review of PNG image tools for MS Windows</a>.</p><div class="centered"><a href="review.htm"><img src="pngimages/review.png" alt="Review of PNG image tools." width="265" height="78" /></a></div><p>By late 2003 the number of internet users with browsers dating back to 1997 or earlier was negligible. They would see image placeholders instead of the images.</p><h3>Animation</h3><p>Portable Network Graphics format was originally devised at a time when there was no browser support for GIF animation, so animation was not included in the specification. Later, a separate animation format was devised with a whole host of advanced features - Multiple-image Network Graphics, or MNG. As it turned out, however, the arrival of other animation technologies such as Macromedia Flash took attention away from MNG format. More information about MNG can be found at the PNG Home Site.</p><p>The lack of sophistication in GIF animation can be annoying to users. Research into user reactions has shown that some users cover animations with one hand as they read the text on a page. <b>Here's a tip:</b> GIF animations can be frozen by pressing the ESC key in Internet Explorer or Firefox.</p><h3>Choosing an image format</h3><ul class="format-list"><li>For photos and scans JPEG will almost always be more compact than 24 bit PNG format.<hr class="hrnavy" /></li><li>For true color images containing text and sharp color transitions 24 bit PNG could turn out smaller, and will certainly provide the best quality. Ideal for maps, charts and diagrams with more than 256 colors.<hr class="hrnavy" /></li><li> If the quality is acceptable, converting true color images to a 8 bit palette can often produce a smaller file. Dither the colors if necessary.<hr class="hrnavy" /></li><li> For converting GIF images, use 8 bit PNG. With the right image tools only tiny GIF files remain smaller than a PNG equivalent (small icons, for example).<hr class="hrnavy" /></li><li> Use single-color transparency if alpha-channel transparency is not really necessary. It works in Internet Explorer and the file size will most likely be smaller.<hr class="hrnavy" /></li><li> There's a small overhead for PNG's versatility: the minimum file size is 67 bytes for an opaque single pixel.<hr class="hrnavy" /></li></ul><h3>The official PNG specification</h3><p>A complete list of features can be found in the official PNG specification at the World Wide Web Consortium's website:</p><ul><li><a href="http://www.w3.org/TR/PNG/">http://www.w3.org/TR/PNG/</a></li></ul></td></tr></table><div class="footer"><ul><li><a class="thispage" href="javascript:self.scroll(0,0)">PNG image format</a> | </li><li><a href="png-alpha-transparency.htm">PNG transparency</a> | </li><li><a href="png24.htm">PNG test image</a> | </li><li><a href="review.htm">PNG image tools</a> | </li><li><a href="edit-png.htm">Edit PNG files</a> | </li><li><a href="http://www.mywebsite.force9.co.uk/web-colors/">Web colors</a></li></ul></div><div class="centered"><br />URL of this page: http://www.mywebsite.force9.co.uk/png/</div><br /><div class="footer"><ul><li>Miscellaneous links: <a href="http://pulsed.blogspot.com/2007/07/blogger-wordpress-chart.html"><span class="nobreak">Blogger vs Wordpress</span></a> | </li><li><a href="http://ourtimes.wordpress.com/2008/08/10/first-ratifications-of-the-crc/">Children's Rights</a> | </li><li><a href="http://devon.freepgs.com/2006/08/burning-oil-night-and-day.php"><span class="nobreak">Consumerism and the environment</span></a> | </li><li><a href="http://devon.freepgs.com/articles/animals-extinct-this-century.php">Extinct Animals</a></li></ul></div></body></html>