APNG格式

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 的示意图。

APNG

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

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

APNG 帧间优化

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

制作 APNG

如果只是想体验一下制作的效果,可以参考这个: 文章 工具

兼容性

目前在 caniuse 上已经超过 95%了

© 2025 Niko Xie