Location: PHPKode > scripts > Animated PNG Creator > animated-png-creator/documentation/why_use_apng.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="content-language" content="en">
  <meta name="description" content="Why use Animated PNG insted of GIF? An introduction to the APNG format.">
  <meta name="keywords" content="animation, png, apng, gif">
  <style type="text/css">
    table td {
      padding: 16px;
	  text-align: center;
	  vertical-align: middle;
	  border: 1px solid #FF6060;
    }
    table {
      border-collapse:collapse;
	  width: 800px;
    }
	thead {
		background-color: #a06060;
		color: #FFa0a0;
		font-weight: bold;
		letter-spacing: 2px;
	}
  </style>
  <title>Why use animated PNG instead of GIF?</title>
</head>
  
<body>
<h1>Why use animated PNG instead of GIF?</h1>
<div>
The Animated Portable Network Graphics (APNG) file format is an extension to the Portable Network Graphics (PNG) specification. It allows for animated PNG files that work similarly to animated GIF files, while supporting 24-bit images and 8-bit transparency not available for GIFs. It also retains backward compatibility with non-animated PNG files.
<br><br>
The APNG specification was created in 2004 by Stuart Parmenter and Vladimir Vukicevic of the Mozilla Corporation. APNG support was added to the ubiquitous libpng by a Seneca College student during the Google Summer of Code in 2006. Mozilla Firefox added support for APNG in Firefox 3 trunk builds on March 23, 2007. Iceweasel 3 does not support APNG.
<h2>Application support</h2>
KSquirrel as of version 0.7.2 (October 3, 2007)<br>
XnView as of version 1.92 (December 19, 2007)<br>
Opera as of version 9.5 (September 17, 2008)<br>
Mozilla Firefox as of version 3 (June 17, 2008)<br>
Gamani GIF Movie Gear as of version 4.2 (March 2008)<br>
ImageJ as of version 1.41g (July 3, 2008)<br>
Imagine as of version 1.0.4 (November 14, 2008)<br><br>

(Source: <a href="http://en.wikipedia.org/wiki/Apng">APNG - Wikipedia, the free encyclopedia</a>)
<h2>The main reasons to use animated PNG (APNG)</h2>
<table>
<thead><tr><td>&nbsp;</td><td colspan="2">Animated PNG</td><td colspan="2">GIF</td></tr></thead>
<tr><td>Non-patented compression method</td><td><a href="http://en.wikipedia.org/wiki/Deflate">DEFLATE</a></td><td><img src="./OK.png" alt="OK !!!"></td><td><a href="http://en.wikipedia.org/wiki/Lempel-Ziv-Welch">LZW</a></td><td><img src="./WRONG.png" alt="not ok"></td></tr>
<tr><td>Color management</td><td><a href="http://en.wikipedia.org/wiki/Truecolor">Truecolor</a></td><td><img src="./OK.png" alt="OK !!!"></td><td><a href="http://en.wikipedia.org/wiki/Palette_%28computing%29">Palette based</a> (maximum 256 colors)</td><td><img src="./WRONG.png" alt="not ok"></td></tr>
<tr><td>Transparency</td><td>8 or 16 bit</td><td><img src="./OK.png" alt="OK !!!"></td><td>1 bit</td><td><img src="./WRONG.png" alt="not ok"></td></tr>
</table>

<h2>Graphic examples</h2>
<table>
<thead><tr><td>Animated PNG (APNG)</td><td>GIF</td></tr></thead>
<tr style="background-color: black;"><td><img src="./chompy2.png" alt="Example - transparency & color management"></td><td><img src="./chompy.gif" alt="Example - transparency & color management"></td></tr>
<tr style="background-color: red;"><td><img src="./chompy2.png" alt="Example - transparency & color management"></td><td><img src="./chompy.gif" alt="Example - transparency & color management"></td></tr>
<tr style="background-color: purple;"><td><img src="./chompy2.png" alt="Example - transparency & color management"></td><td><img src="./chompy.gif" alt="Example - transparency & color management"></td></tr>
</table>
<br><br>
<a id="sendmail" href="mailto:enable-hide@address.com">Send feedback</a>
<script type="text/javascript">
var mail = document.getElementById('sendmail');
mail.href = 'mailto:';
mail.href += 'apng@';
mail.href += 'zoznam.sk';
mail.href += '?subject=';
mail.href += encodeURIComponent('Why use animated PNG? - Feedback');
</script>
</div>
</body>

</html>
Return current item: Animated PNG Creator