Closed ONE-SUNDAY closed 7 years ago
APNG全称Animated Portable Network Graphics顾名思义即：基于PNG格式的一种扩展，可实现动态图片，其目的是为了取代老旧的GIF格式。
2001年 - MNG
在APNG之前它还有一个兄弟叫MNG，是由PNG开发组设计，但由于结构复杂，使用过程会占用大量的资源，早期只有Firefox和Netscape支持，Chrome、IE、Opera、Safari从未支持过。
2004年 - APNG
APNG由两位Mozilla程序员设计出来，他们希望Mozilla社区能使用它，但提案未能通过。
2006年 - libpng程序库
Google Summer of Code活动中，加拿大圣力嘉学院的学生为libpng程序库加入APNG支持，此后再次推荐给Mozilla，不过仍然遭到拒绝。
2007年3月23日 - 首次支持
Mozilla Firefox 3 中 首次支持APNG。
2007年4月20日 - 标准化申请
Mozilla希望APNG能成为标准，PNG组织发起投票，最终以8：10的票数否决了APNG进了官方标准，但这不并影响Mozilla继续支持APNG。
介绍APNG时讲到，APNG的出现就是为了取代GIF，那为什么GIF还能存活20多年之久？
主要有四个原因：
1、图片质量
GIF：
APNG：
图片画质对比可点击这里，请使用Safari浏览器，否则无法支持APNG，Chrome浏览器可下载插件APNG Extension for Google Chrome
2、图片体积
图片体积对比点击这里
从GIF、APNG、WebP的5个test对比中可以发现，APNG始终是最小的。
APNG在规范上引入了新大块，分别是acTL（动画控制块）、fcTL（前一帧控制块）、fdAT（帧图像数据块）。
PNG图由IDAT（图像数据块）、IHDR（图像头信息）和IEND（图像尾信息）组成，APNG在原基础加入新大块，每帧由fcTL和fdAT组成，不同的在于第一帧使用的是图像数据块，在不支持APNG的浏览器会忽略后面的帧，从而达到向下兼容的效果。
主要的原因是缺乏浏览器的支持，到目前为止Google Chrome、Opera、IE、Edge均不支持APNG，APNG官网鼓励用户去Chromium点star以及到IE那投票。Google Chrome和Opera都在推自家的WebP，而微软则一直是个不合群的家伙，能否支持不好说。
但是，重要的一点是2014年9月17号Apple推送的iOS 8，这意味着Safari 8新增了对APNG的支持，这能有效的推动APNG的发展，至少在移动端。
(function() { "use strict"; var apngTest = new Image(), ctx = document.createElement("canvas").getContext("2d"); apngTest.onload = function () { ctx.drawImage(apngTest, 0, 0); self.apng_supported = ctx.getImageData(0, 0, 1, 1).data[3] === 0; }; apngTest.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACGFjVEwAAAABAAAAAcMq2TYAAAANSURBVAiZY2BgYPgPAAEEAQB9ssjfAAAAGmZjVEwAAAAAAAAAAQAAAAEAAAAAAAAAAAD6A+gBAbNU+2sAAAARZmRBVAAAAAEImWNgYGBgAAAABQAB6MzFdgAAAABJRU5ErkJggg=="; }());
方法与WebP检测相似，一样是加载一张1x1像素的Base64图片，不同在于WebP加载完成后是检测图片宽高是否大于1，而APNG则是将其绘制到画布中，再通过getImageData()方法去获取该图片的像素信息，主要是获取data3的alpha透明通道，当返回0时则表示支持APNG，返回255则表示不支持APNG。
APNG已经不像早期那样工具匮乏了，APNG官方有大量的工具，可以非常轻松的制作APNG。
客户端
扩展
命令行工具
在线工具
什么是APNG ?
APNG全称Animated Portable Network Graphics顾名思义即：基于PNG格式的一种扩展，可实现动态图片，其目的是为了取代老旧的GIF格式。
APNG简史
2001年 - MNG
在APNG之前它还有一个兄弟叫MNG，是由PNG开发组设计，但由于结构复杂，使用过程会占用大量的资源，早期只有Firefox和Netscape支持，Chrome、IE、Opera、Safari从未支持过。
2004年 - APNG
APNG由两位Mozilla程序员设计出来，他们希望Mozilla社区能使用它，但提案未能通过。
2006年 - libpng程序库
Google Summer of Code活动中，加拿大圣力嘉学院的学生为libpng程序库加入APNG支持，此后再次推荐给Mozilla，不过仍然遭到拒绝。
2007年3月23日 - 首次支持
Mozilla Firefox 3 中 首次支持APNG。
2007年4月20日 - 标准化申请
Mozilla希望APNG能成为标准，PNG组织发起投票，最终以8：10的票数否决了APNG进了官方标准，但这不并影响Mozilla继续支持APNG。
为什么GIF能存活20多年之久？
介绍APNG时讲到，APNG的出现就是为了取代GIF，那为什么GIF还能存活20多年之久？
主要有四个原因：
为什么要取代它？
1、图片质量
GIF：
APNG：
图片画质对比可点击这里，请使用Safari浏览器，否则无法支持APNG，Chrome浏览器可下载插件APNG Extension for Google Chrome
2、图片体积
图片体积对比点击这里
从GIF、APNG、WebP的5个test对比中可以发现，APNG始终是最小的。
APNG的组成
APNG在规范上引入了新大块，分别是acTL（动画控制块）、fcTL（前一帧控制块）、fdAT（帧图像数据块）。
PNG图由IDAT（图像数据块）、IHDR（图像头信息）和IEND（图像尾信息）组成，APNG在原基础加入新大块，每帧由fcTL和fdAT组成，不同的在于第一帧使用的是图像数据块，在不支持APNG的浏览器会忽略后面的帧，从而达到向下兼容的效果。
为什么没有普及？
主要的原因是缺乏浏览器的支持，到目前为止Google Chrome、Opera、IE、Edge均不支持APNG，APNG官网鼓励用户去Chromium点star以及到IE那投票。Google Chrome和Opera都在推自家的WebP，而微软则一直是个不合群的家伙，能否支持不好说。
但是，重要的一点是2014年9月17号Apple推送的iOS 8，这意味着Safari 8新增了对APNG的支持，这能有效的推动APNG的发展，至少在移动端。
特性检测
方法与WebP检测相似，一样是加载一张1x1像素的Base64图片，不同在于WebP加载完成后是检测图片宽高是否大于1，而APNG则是将其绘制到画布中，再通过getImageData()方法去获取该图片的像素信息，主要是获取data3的alpha透明通道，当返回0时则表示支持APNG，返回255则表示不支持APNG。
制作工具
APNG已经不像早期那样工具匮乏了，APNG官方有大量的工具，可以非常轻松的制作APNG。
客户端
扩展
命令行工具
在线工具
参考资料