{"id":694,"date":"2020-01-20T20:39:46","date_gmt":"2020-01-21T01:39:46","guid":{"rendered":"http:\/\/blog.mindworkshop.com\/?p=694"},"modified":"2023-07-17T20:36:45","modified_gmt":"2023-07-18T01:36:45","slug":"a-quick-introduction-to-animated-png","status":"publish","type":"post","link":"https:\/\/blog.mindworkshop.com\/?p=694","title":{"rendered":"A Quick Introduction to Animated PNG"},"content":{"rendered":"

\"picture\"The GIF format \u2013 the animation standard for web page animations for pretty much as long as there have been web page animations \u2013 was originally created in 1987. While there were technically computers back then, chances are you\u2019re presently wearing a watch with more processing power than a circa-1987 PC.<\/p>\n

The GIF format was designed using late twentieth-century compression technology, for use with late twentieth-century display hardware.<\/p>\n

It\u2019s also probably worth mentioning that GIF was never intended as a medium for storing web page animations… there having been no web upon which to launch pages back in 1987. They did have electric lighting back then, apparently, so there\u2019s that.<\/p>\n

The first web browsers to support animation arm-twisted the GIF format to store them because it was kind of close to what was needed at the time, and it actually existed. Web page designers \u2013 and everyone else \u2013 have been stuck with it ever since.<\/p>\n

Cue gratuitous profanity.<\/p>\n

<\/p>\n

Perhaps not surprising for a graphic standard that\u2019s substantially older than most of the people using it, GIF is kind of dreadful. It uses a claustrophobically-tight color space supporting 256 colors, rather than the 16,777,216 colors available in any contemporary imaging device that didn\u2019t emerge from a yuletide cracker. It has funky timing that\u2019s only accurate to 1\/100th of a second. It has limited frame removal options. Its compression works about as well as printing your graphics as hard copy and jumping up and down on them.<\/p>\n

In recent years, two putative replacements for GIF animations have been adopted by the developers of the known universe\u2019s web browsers. The WebP<\/a> format, crafted by Google, is discussed in detail elsewhere at this blog. Click on the foregoing link to learn more about it.<\/p>\n

The animated PNG, or APNG, format to be discussed in this post emerged from the Mozilla Foundation, the authors of the estimable Firefox web browser.<\/p>\n

Both animation standards are laudable replacements for GIF, and both are supported by pretty much all the contemporary web browsers. We\u2019ll get to the exact meaning of the word \u201cmost\u201d in the preceding sentence shortly.<\/p>\n

The improved animation standard you select for your web pages will likely be determined to some extent by the users you anticipate visiting your web site.<\/p>\n

History of PNG<\/h6>\n

The PNG graphic standard \u2013 that would be Portable Network Graphics \u2013 was initially released in 1996, making it not hugely newer than GIF. However, it enjoys much more effective compression, true color support and way more flexibility. It\u2019s worth noting that what it didn\u2019t originally know how to do was play animations \u2013 it was initially conceived as a still-image format.<\/p>\n

Web browsers have supported still-image PNG graphics since the end of the twentieth century.<\/p>\n

One of the useful characteristics of PNG is that it\u2019s extensible \u2013 it\u2019s intended to allow later authors to add to its internal data structures such that it can support features its original designers never imagined.<\/p>\n

The animated PNG format consists of a conventional PNG still image, storing the first frame of an animation, followed by lots of subsequent images, representing the subsequent frames that display things moving. There are also additional data structures \u2013 \u201cchunks\u201d in the secret language of PNG \u2013 that store timing and positioning values.<\/p>\n

The decidedly cool aspect of an animated PNG object is that if it\u2019s encountered by a device or an application that doesn\u2019t know how to display it as an animation, it will look like a conventional still PNG graphic, and display as such.<\/p>\n

Unlike WebP animations, PNG fails safely when it\u2019s displayed by a non-compliant device. Users of your pages with old or disturbingly weird web browsers will see still images in place of your PNG animations, rather than a frame with some cryptic error text, as would be the case for unsupported WebP objects.<\/p>\n

As of this writing, the Chrome and Firefox browsers support animated PNG objects. Microsoft\u2019s classic Internet Explorer and Edge browsers appear not to, but Edge Chromium \u2013 which was being released pretty much as this post was being typed \u2013 does.<\/p>\n

True Color<\/h6>\n

The animation near the top of this post is a GIF object \u2013 it\u2019s ancient, crusty and seriously bad-tempered. Its limited color space has required the application of some extremely sneaky image manipulation to create a reasonable approximation of the original true-color art that it was derived from.<\/p>\n

If you look closely at the GIF animation, you\u2019ll notice that the shadows below the bear and behind the cube are a bit rough. The bear\u2019s nose has been rendered as a sequence of colored horizontal bands, rather than as a smooth color gradient.<\/p>\n

We hasten to add that this GIF animation was created using color remapping, rather than color dithering. Had the latter been used, the colored bands would have been less noticeable, but the whole animation would have been decidedly less sharp.<\/p>\n

The oft-mentioned antediluvian limitations of GIF have exacted their wrath upon this bear.<\/p>\n

\"picture\"The second animation at this posting, to your right, is an animated PNG. Note that in this example, the nose of the bear has been rendered absent any obvious banding. The shadows cast by the bear and the rotating cube are convincingly smooth. The creature\u2019s sunglasses appear more naturally shaded… and to be clear about the matter, if one is to confront an eight-hundred pound predator with razor-like claws and an attitude problem, let\u2019s all do everything we can to make sure its sunglasses are shaded entirely to its liking.<\/p>\n

The bear animation rendered as an animated PNG graphic occupies a larger file than its GIF ancestor, but with the widespread availability of high-speed broadband, file size is way less of an issue than it used to be.<\/p>\n

The animated PNG bear just looks better than the GIF bear.<\/p>\n

In choosing between WebP and animated PNG animations as putative replacements for GIF, you\u2019ll probably want to consider the following:<\/p>\n

    \n
  • Animated PNG is completely lossless \u2013 if you store your animations in this format, what goes into an animated PNG file will be what emerges from it, to the pixel. WebP animations, which offer both lossless and lossy compression, impose some degree of image manipulation on everything they store.<\/li>\n
  • All other things being equal, animated PNG objects are usually larger than would be the case if the same animation content had been stored using WebP. Furthermore, WebP offers the option of invoking lossy compression when you just absolutely have to have smaller files, the physical laws of the universe be damned.<\/li>\n
  • Animated PNG objects will always display something, even if they find themselves being viewed through a web browser that was obsolete toward the end of the middle ages.<\/li>\n<\/ul>\n

    The current releases of the Alchemy Mindworks applications that support animations support all of them \u2013 GIF, WebP and animated PNG. As such, you\u2019re free to choose the animation standard that best suits your requirements.<\/p>\n

    Assuming that you\u2019d like your animations to be sharp, impeccably rendered and flawlessly played to the nearest millisecond, we\u2019re fairly certain that your choice won\u2019t involve GIF files.<\/p>\n","protected":false},"excerpt":{"rendered":"

    The GIF format \u2013 the animation standard for web page animations for pretty much as long as there have been web page animations \u2013 was originally created in 1987. While there were technically computers back then, chances are you\u2019re presently wearing a watch with more processing power than a circa-1987 PC. The GIF format was […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-694","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=\/wp\/v2\/posts\/694","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=694"}],"version-history":[{"count":0,"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=\/wp\/v2\/posts\/694\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=694"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=694"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mindworkshop.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}