APNG格式
图片格式 apng 动画
https://tinypng.com/images/apng/panda-waving.png 使用 tinypng 的时候,在网站上发现了一张动图,检查元素发现是 png 格式,于是去了解了一下。
Wiki 百科:
动态可移植网络图形(英语:Animated Portable Network Graphics,缩写 APNG)是一种继承自便携式网络图形(PNG)的文件格式,他允许像 GIF 格式一样播放动态图片,并且拥有 GIF 不支持的 24 位图像和 8 位透明性。 它还保留了与非动画 PNG 文件的向后兼容性。
APNG 文件的第一帧存储为普通 PNG 流,因此大多数标准 PNG 解码器都能够显示 APNG 文件的第一帧。 帧速度数据和额外的动画帧存储在额外的数据块中(如原始的 PNG 规范所规定)。 APNG 的竞争者是由 PNG 团队创建的位图动画的全面格式——多图像网络图形(MNG)。与其相比,APNG 的优势是更小的存储大小以及对旧的 PNG 完全兼容。
APNG 是 Mozilla 在 2008 年发布的一种图片格式,旨在替换掉画质低劣的 GIF 动画。它实际上只是相当于 PNG 格式的一个扩展,所以 Mozilla 一直想把它合并到 PNG 标准里面去,但它目前并没有获得 PNG 组织官方的认可。
GIF:
最多支持 8 位 256 色,色阶过渡糟糕,图片具有颗粒感 不支持 Alpha 透明通道,边缘有杂边
APNG:
支持 24 位真彩色图片 支持 8 位 Alpha 透明通道 向下兼容 PNG
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
兼容性
目前在 caniuse 上已经超过 95%了