还在用GIF？是时候了解一下APNG了

说到动图，大家首先想到的肯定是 GIF。但 GIF 最大的缺点是，图像是基于颜色列表的（存储的数据是该点的颜色对应于颜色列表的索引值），最多只支持 8 位（256 色）。这使得使用 GIF 格式不可能得到高清的动画图片。

APNG 是 Mozilla 在 2008 年发布的一种图片格式，旨在替换掉画质低劣的 GIF 动画。它实际上只是相当于 PNG 格式的一个扩展，所以 Mozilla 一直想把它合并到 PNG 标准里面去，但它目前并没有获得 PNG 组织官方的认可。

APNG 简史

MNG

在 APNG 之前它还有一个老冤家叫 MNG（Multiple-image Network Graphics）即多图像网络图形，1996 年 6 月提出 PNF（Portable Network Frame）草案，同年8月更名为 MNG ，2001 年 1 月 31 日发布 MNG 规范 1.0 版本，MNG 是出自 PNG 开发组之手，但由于结构复杂的 MNG 程序库，使用过程会占用大量的资源，早期只有较少的浏览器支持，Chrome、IE、Opera、Safari 则从未支持过。

APNG

2004 年，由 Mozilla 公司两位 Mozilla 程序员 Stuart Parmenter 和 Vladimir Vukićević 共同设计出 APNG，他们希望 Mozilla 社区能使用它，但提案未能通过。

libpng程序库

2006 年，Google Summer of Code 活动中，加拿大圣力嘉学院的学生为 libpng 程序库加入了对 APNG 支持，此后开发者再次推荐给 Mozilla 社区，不过仍然遭到拒绝。

首次支持

2007 年 3 月 23 日，Mozilla 后知后觉，在 Mozilla Firefox 3.0 中 首次支持 APNG 格式。

标准化申请

2007 年 4 月 20 日，Mozilla 希望 APNG 能成为官方标准，因此 PNG 组织发起投票，最终以8：10的票数否决了 APNG 进了官方标准，因为 PNG 组织决心继续推广 MNG，但这不并影响 Mozilla 继续支持 APNG。

为什么GIF能存活这么长时间

诞生于 1987 年的 GIF 为什么能存活这么久？
主要有四个原因：

• 几乎所有的主流浏览器都支持 GIF
• 早期选择不多，GIF 几乎是唯一选择（GIF - 1987、JPEG - 1992、PNG - 1996、APNG - 2004、WebP - 2010）
• 实现起来简单，制作的工具多
• 采用 LZW 数据压缩算法，使得 GIF 体积小，在早期慢速的互联网易于传播

为什么要取代它？

1.图像质量

GIF

APNG

如果你使用的是非 Firefox、Safari 浏览器，那 APNG 格式的图片会向下兼容显示为静态图，你可以更换 Firefox、Safari 浏览器或者在 Chrome 浏览器安装 APNG Extension for Google Chrome 扩展来兼容，通过两者对比能总结出以下区别：
GIF：

• 最多支持 8 位 256 色，色阶过渡糟糕，图片具有颗粒感
• 不支持 Alpha 透明通道，边缘有杂边

APNG：

• 支持 24 位真彩色图片
• 支持 8 位 Alpha 透明通道
• 向下兼容 PNG

2.图片体积

从几组 GIF、APNG、WebP 的对比中可以发现，无论在纯色的图片或是多彩的图片，大部分情况下 APNG 依旧能比 GIF、WebP 以及有损的 WebP 的体积小。

APNG 的组成

APNG 是基于 PNG 格式扩展的，首先需要了解一个简单的 PNG 文件组成结构：

PNG Signature | IHDR | IDAT | IEND

PNG 由 4 部分组成，首先以 PNG Signature（PNG签名块）开头，紧接着一个 IHDR（图像头部块），然后是一个或多个的 IDAT（图像数据块），最终以 IEND（图像结束块）结尾。

APNG 规范引入了三个新大块，分别是：acTL（动画控制块）、fcTL（帧控制块）、fdAT（帧数据块），下图是三个独立的 PNG 文件组成 APNG 的示意图。

• acTL 块必须在第一个 IDAT 块之前，用于告诉解析器这是一个动画 PNG，包含动画帧总数和循环次数的信息
• fcTL 块是每一帧都必须的，出现在 IDAT 或 fdAT 之前，包含顺序号、宽高、帧位置、延时等信息
• fdAT 块与 IDAT 块有着相同的结构，除了 fcTL 中的顺序号

从图中可以发现第一帧与后面两帧不同，那是因为第一帧 APNG 文件存储的为一个正常的 PNG 数据块，对于不支持 APNG 的浏览器或软件，只会显示 APNG 文件的第一帧，忽略后面附加的动画块，这也是为什么 APNG 能向下兼容 PNG 的原因。

APNG 帧间优化

APNG 会通过算法计算帧之间的差异，只存储帧之前的差异，而不是存储全帧，使得 APNG 文件大小有显著的减少。

制作APNG

已经有很多工具支持制作 Animated PNG 图片，相信将来也会越来越多。

如果只是想体验一下制作的效果，可以使用这个站点来快速生成： assembler

制作 Animated PNG 的工具与方法参考

• 使用 APNG Anime Maker 制作 apng howtech.tv/graphics/ho…
• 使用 GIF Movie Gear 制作 apng www.gamani.com/apng.htm

感谢您的阅读。
本文主要节选自‘凹凸实验室’的 APNG 那些事，欢迎大家关注凹凸实验室。