{"id":3082,"date":"2019-02-07T14:04:11","date_gmt":"2019-02-07T19:04:11","guid":{"rendered":"https:\/\/blogs.mathworks.com\/steve\/?p=3082"},"modified":"2019-12-20T12:14:52","modified_gmt":"2019-12-20T17:14:52","slug":"animated-png-apng-files","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/steve\/2019\/02\/07\/animated-png-apng-files\/","title":{"rendered":"Animated PNG (APNG) Files"},"content":{"rendered":"<div class=\"content\">\r\n<p>\r\n<em>Update: See my <a href=\"https:\/\/blogs.mathworks.com\/steve\/2019\/12\/20\/how-to-write-animated-png-apng-files-from-matlab\/\">20-Dec-2019 post<\/a> for how to write APNG files from MATLAB.<\/em>\r\n<\/p>\r\n\r\n<p>Have you heard of animated PNG (APNG) files? Are you interested in creating them from MATLAB? They are supposed to be an improvement over GIF for making animations that are viewable in a web browser. (If you have an opinion about this, one way or the other, please share your thoughts in the comments.)<\/p><p>Here's a sample image. Do you see the animation in your web browser, or do you see only a still image?<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/steve\/files\/Animated_PNG_example_bouncing_beach_ball.png\" alt=\"\"> <\/p><p><i>Public domain image. Credit: <a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Animated_PNG_example_bouncing_beach_ball.png\">Holger Will<\/a><\/i><\/p><p>When I look at this image on my Mac, it animates using Safari (version 11.1.2) and Chrome (version 62), but not with the MATLAB browser.<\/p><p>I have to admit that I had never heard of animated PNG files until last week, when I happened to see them mentioned in MATLAB Answers. One of the MATLAB Answers pages where APNG has been discussed is the question, <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/answers\/94495-how-can-i-create-animated-gif-images-in-matlab\">\"How can I create animated GIF images in MATLAB?\"<\/a>, where Royi suggested using APNG as a superior replacement for GIF.<\/p><p>I was curious, so I started looking into it.<\/p><p>First, a little background. The PNG image format was created in the 1990s, and it was intended as a replacement for GIF. It is an efficient and popular lossless image file format that is universally supported in browsers and other applications that deal with image files. However, GIF has one capability that PNG does not have: animations. For this reason, PNG never replaced GIF for use on web pages, despite some temporary legal restrictions associated with using GIF in the 1990s. (Search for \"gif unisys\" if you're interested.)<\/p><p>As an image file format, GIF has a couple of significant weaknesses. The first is that a GIF image can have only at most 256 different colors. For animated GIFs, this limitation applies to each frame. The second weakness is that saving an image with transparency uses up one of the 256 colors, and the transparency of each image pixel is either fully opaque or fully transparent. This makes it difficult to make images with smoothly antialiased edges, and it also causes artifacts when a GIF still image or animation using transparency is displayed on top of a different background color than what was originally used to render the image.<\/p><p>The animated PNG format was intended to overcome both of these weaknesses. (Also, unlike GIF, there is no controversy over how to pronounce PNG.)<\/p><p>Here are some key information sources about APNG:<\/p><div><ul><li><a href=\"https:\/\/en.wikipedia.org\/wiki\/APNG\">Wikipedia article<\/a><\/li><li><a href=\"https:\/\/wiki.mozilla.org\/APNG_Specification\">APNG specification<\/a> (by Stuart Parmenter, Vladimir Vukicevic, and Andrew Smith)<\/li><li><a href=\"http:\/\/littlesvr.ca\/apng\/\">APNG web<\/a> site with history, samples, tutorial, and some code<\/li><\/ul><\/div><p>And here are a few interesting things I've learned:<\/p><div><ul><li>An APNG file is a valid PNG file. According to the PNG spec, compliant file readers are required to ignore file chunks that they don't know about. Therefore, a compliant PNG reader that doesn't handle APNG should simply show the first image frame in the file.<\/li><li>Apparently, the community responsible for maintaining the PNG specification never accepted the APNG spec extension or updated the reference library (libpng) to handle APNG.<\/li><li>Despite that, APNG has achieved a surprisingly broad level of browser support. According to the <a href=\"https:\/\/en.wikipedia.org\/wiki\/APNG\">Wikipedia page<\/a>, as of this writing, only Internet Explorer and Microsoft Edge are holdouts.<\/li><li>Various benchmarks are available online that claim to show that smaller file sizes are achievable with APNG, despite the fact that PNG files are not limited to just 256 colors. I haven't verified it, but I believe this file size improvement is because of the optional interframe differencing feature of APNG.<\/li><li>There is a fairly straightforward implementation recipe on the <a href=\"https:\/\/en.wikipedia.org\/wiki\/APNG\">Wikipedia page<\/a> for combining any number of individual PNG files into an APNG file.<\/li><\/ul><\/div><p>Finally, I learned (by accident!) that the Preview app on the Mac is capable of converting an animated GIF file to an APNG file. You can accomplish this by viewing an animated GIF file in Preview and then using the \"Export\" menu to save it as a PNG. It gets saved with the animation intact.<\/p><p>My <a href=\"https:\/\/blogs.mathworks.com\/steve\/2017\/04\/20\/the-eight-queens-problem\/\">20-Apr-2017 post on the \"Eight Queens Problem\"<\/a> included an animated GIF. Here it is as an APNG file, as created by the Preview app. (If you are looking at this blog post in a browser that doesn't support APNG, you'll probably just see an empty 5x5 chessboard.)<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/steve\/files\/queen-solver-animation-6.png\" alt=\"\"> <\/p><p>In this case, the APNG file is about 2.5 times the size of the GIF file, so perhaps the Preview app isn't fully optimizing the APNG output. Also, the APNG file likely would have been smaller if it had been created directly from the original graphic, because the GIF file appears to use dithering in the chessboard squares.<\/p><p>If you have an interest in APNG files, please let us know in the comments.<\/p><script language=\"JavaScript\"> <!-- \r\n    function grabCode_cb36d1a56f5b4e029c405b5f198086d8() {\r\n        \/\/ Remember the title so we can use it in the new page\r\n        title = document.title;\r\n\r\n        \/\/ Break up these strings so that their presence\r\n        \/\/ in the Javascript doesn't mess up the search for\r\n        \/\/ the MATLAB code.\r\n        t1='cb36d1a56f5b4e029c405b5f198086d8 ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' cb36d1a56f5b4e029c405b5f198086d8';\r\n    \r\n        b=document.getElementsByTagName('body')[0];\r\n        i1=b.innerHTML.indexOf(t1)+t1.length;\r\n        i2=b.innerHTML.indexOf(t2);\r\n \r\n        code_string = b.innerHTML.substring(i1, i2);\r\n        code_string = code_string.replace(\/REPLACE_WITH_DASH_DASH\/g,'--');\r\n\r\n        \/\/ Use \/x3C\/g instead of the less-than character to avoid errors \r\n        \/\/ in the XML parser.\r\n        \/\/ Use '\\x26#60;' instead of '<' so that the XML parser\r\n        \/\/ doesn't go ahead and substitute the less-than character. \r\n        code_string = code_string.replace(\/\\x3C\/g, '\\x26#60;');\r\n\r\n        copyright = 'Copyright 2019 The MathWorks, Inc.';\r\n\r\n        w = window.open();\r\n        d = w.document;\r\n        d.write('<pre>\\n');\r\n        d.write(code_string);\r\n\r\n        \/\/ Add copyright line at the bottom if specified.\r\n        if (copyright.length > 0) {\r\n            d.writeln('');\r\n            d.writeln('%%');\r\n            if (copyright.length > 0) {\r\n                d.writeln('% _' + copyright + '_');\r\n            }\r\n        }\r\n\r\n        d.write('<\/pre>\\n');\r\n\r\n        d.title = title + ' (MATLAB code)';\r\n        d.close();\r\n    }   \r\n     --> <\/script><p style=\"text-align: right; font-size: xx-small; font-weight:lighter;   font-style: italic; color: gray\"><br><a href=\"javascript:grabCode_cb36d1a56f5b4e029c405b5f198086d8()\"><span style=\"font-size: x-small;        font-style: italic;\">Get \r\n      the MATLAB code <noscript>(requires JavaScript)<\/noscript><\/span><\/a><br><br>\r\n      Published with MATLAB&reg; R2018b<br><\/p><\/div><!--\r\ncb36d1a56f5b4e029c405b5f198086d8 ##### SOURCE BEGIN #####\r\n%% Animated PNG (APNG) Files\r\n% Have you heard of animated PNG (APNG) files? Are you interested in creating them\r\n% from MATLAB? They are supposed to be an improvement over GIF for making\r\n% animations that are viewable in a web browser. (If you have an opinion\r\n% about this, one way or the other, please share your thoughts in the\r\n% comments.)\r\n%\r\n% Here's a sample image. Do you see the animation in your web browser, or\r\n% do you see only a still image?\r\n%\r\n% <<https:\/\/blogs.mathworks.com\/steve\/files\/Animated_PNG_example_bouncing_beach_ball.png>>\r\n%\r\n% _Public domain image. Credit: <https:\/\/commons.wikimedia.org\/wiki\/File:Animated_PNG_example_bouncing_beach_ball.png \r\n% Holger Will>_\r\n%\r\n% When I look at this image on my Mac, it animates using Safari (version\r\n% 11.1.2) and Chrome (version 62), but not with the MATLAB browser.\r\n%\r\n% I have to admit that I had never heard of animated PNG files until last\r\n% week, when I happened to see them mentioned in MATLAB Answers. One of the\r\n% MATLAB Answers pages where APNG has been discussed is the question,\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/answers\/94495-how-can-i-create-animated-gif-images-in-matlab\r\n% \"How can I create animated GIF images in MATLAB?\">, where Royi suggested\r\n% using APNG as a superior replacement for GIF.\r\n%\r\n% I was curious, so I started looking into it.\r\n%\r\n% First, a little background. The PNG image format was created in the\r\n% 1990s, and it was intended as a replacement for GIF. It is an efficient\r\n% and popular lossless image file format that is universally supported in\r\n% browsers and other applications that deal with image files. However, GIF\r\n% has one capability that PNG does not have: animations. For this reason,\r\n% PNG never replaced GIF for use on web pages, despite some temporary legal\r\n% restrictions associated with using GIF in the 1990s. (Search for \"gif\r\n% unisys\" if you're interested.)\r\n%\r\n% As an image file format, GIF has a couple of significant weaknesses. The\r\n% first is that a GIF image can have only at most 256 different colors.\r\n% For animated GIFs, this limitation applies to each frame. The second\r\n% weakness is that saving an image with transparency uses up one of the 256\r\n% colors, and the transparency of each image pixel is either fully opaque\r\n% or fully transparent. This makes it difficult to make images with\r\n% smoothly antialiased edges, and it also causes artifacts when a GIF still\r\n% image or animation using transparency is displayed on top of a different\r\n% background color than what was originally used to render the image.\r\n%\r\n% The animated PNG format was intended to overcome both of these\r\n% weaknesses. (Also, unlike GIF, there is no controversy over how to\r\n% pronounce PNG.)\r\n%\r\n% Here are some key information sources about APNG:\r\n%\r\n% * <https:\/\/en.wikipedia.org\/wiki\/APNG Wikipedia article>\r\n% * <https:\/\/wiki.mozilla.org\/APNG_Specification APNG specification> (by\r\n% Stuart Parmenter, Vladimir Vukicevic, and Andrew Smith)\r\n% * <http:\/\/littlesvr.ca\/apng\/ APNG web> site with history, samples, tutorial, and some code\r\n%\r\n% And here are a few interesting things I've learned:\r\n%\r\n% * An APNG file is a valid PNG file. According to the PNG spec, compliant\r\n% file readers are required to ignore file chunks that they don't know\r\n% about. Therefore, a compliant PNG reader that doesn't handle APNG should\r\n% simply show the first image frame in the file.\r\n% * Apparently, the community responsible for maintaining the PNG\r\n% specification never accepted the APNG spec extension or updated the\r\n% reference library (libpng) to handle APNG.\r\n% * Despite that, APNG has achieved a surprisingly broad level of browser\r\n% support. According to the <https:\/\/en.wikipedia.org\/wiki\/APNG\r\n% Wikipedia page>, as of this writing, only Internet Explorer and Microsoft\r\n% Edge are holdouts.\r\n% * Various benchmarks are available online that claim to show that smaller\r\n% file sizes are achievable with APNG, despite the fact that PNG files are\r\n% not limited to just 256 colors. I haven't verified it, but I believe this\r\n% file size improvement is because of the optional interframe differencing\r\n% feature of APNG.\r\n% * There is a fairly straightforward implementation recipe on the\r\n% <https:\/\/en.wikipedia.org\/wiki\/APNG Wikipedia page> for combining any\r\n% number of individual PNG files into an APNG file.\r\n%\r\n% Finally, I learned (by accident!) that the Preview app on the Mac is\r\n% capable of converting an animated GIF file to an APNG file. You can accomplish this\r\n% by viewing an animated GIF file in Preview and then using the \"Export\"\r\n% menu to save it as a PNG. It gets saved with the animation intact.\r\n%\r\n% My\r\n% <https:\/\/blogs.mathworks.com\/steve\/2017\/04\/20\/the-eight-queens-problem\/\r\n% 20-Apr-2017 post on the \"Eight Queens Problem\"> included an animated GIF.\r\n% Here it is as an APNG file, as created by the Preview app. (If you are\r\n% looking at this blog post in a browser that doesn't support APNG, you'll\r\n% probably just see an empty 5x5 chessboard.)\r\n%\r\n% <<https:\/\/blogs.mathworks.com\/steve\/files\/queen-solver-animation-6.png>>\r\n%\r\n% In this case, the APNG file is about 2.5 times the size of the GIF file,\r\n% so perhaps the Preview app isn't fully optimizing the APNG output. Also,\r\n% the APNG file likely would have been smaller if it had been created\r\n% directly from the original graphic, because the GIF file appears to use\r\n% dithering in the chessboard squares.\r\n%\r\n% If you have an interest in APNG files, please let us know in the\r\n% comments.\r\n\r\n##### SOURCE END ##### cb36d1a56f5b4e029c405b5f198086d8\r\n-->","protected":false},"excerpt":{"rendered":"<div class=\"overview-image\"><img src=\"https:\/\/blogs.mathworks.com\/steve\/files\/Animated_PNG_example_bouncing_beach_ball.png\" class=\"img-responsive attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/div><p>\r\n\r\nUpdate: See my 20-Dec-2019 post for how to write APNG files from MATLAB.\r\n\r\n\r\nHave you heard of animated PNG (APNG) files? Are you interested in creating them from MATLAB? They are supposed to be... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/steve\/2019\/02\/07\/animated-png-apng-files\/\">read more >><\/a><\/p>","protected":false},"author":42,"featured_media":3078,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/posts\/3082"}],"collection":[{"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/comments?post=3082"}],"version-history":[{"count":3,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/posts\/3082\/revisions"}],"predecessor-version":[{"id":3963,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/posts\/3082\/revisions\/3963"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/media\/3078"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/media?parent=3082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/categories?post=3082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/steve\/wp-json\/wp\/v2\/tags?post=3082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}