可以取代GIF的APNG/WEBP格式动画是怎么回事？

?xml version="1.0" encoding="UTF-8"?

一 APNG

什么是APNG？

APNG是一个机遇PNG格式的位图动画格式图片。

APNG全称是Animated Portable Network Graphics，是PNG的位图动画扩展。目前没有得到官方认可，之前PNG组织做过一个MNG的图像格式，希望成为PNG动画的主流，但是由于MNG过多的浪费了社会资源，后来PNG组织也放弃了。

他为什么出现？

一直以来都是GIF动态展示动画为主，为了更好的在网络上传播。GIF需要降低体积。如果图像比较复杂的话，他的颗粒感会变得很明显（也就是我们平时说的虚/失真）。

APNG是PNG的升级版，他的后缀名依然是.png，包含动态的情况下体积会比普通静态png大数倍，可以无损的展示动态，但是他目前还没有得到PNG组织官方认可。

相比于GIF他的优势

GIF已经诞生三十余年，为什么一直没有被替代，原因有四点：

几乎所有的主流浏览器都支持GIF；

早期选择不多，GIF几乎是唯一的选择（GIF-1987，JPEG-1992，PNG-1996，APNG-2004，WebP-2010）；

实现起来简单，制作工具多；

采用LZW的数据压缩算法，是的GIF体积比较小，比较容易在早期的网络中传播。

APNG是Mozilla在2004年推出的，由于APNG笔GIF晚出现十几年，他的优势也比较明显，下文会有介绍；APNG是PNG的扩展，第一帧储存方式和普通PNG一样在IDAT区段中，APNG只是新增了三种区段，所以如果一个软件只是支持PNG而不支持APNG的话，依旧可以显示出第一帧，只是不能动罢了。

APNG新增的三种区段分别是：

acTL（animationg control）用来存放帧数和播放次数，整个文件只有一个区段；

fcTL（frame control）用于存放每一帧的高度，宽度以及位置、延时等信息，每一帧一个区段；

fdTL（frame data）用来存放除了第一帧后面每一帧的图片数据，采用Deflate压缩，每一帧一个区段。

关于压缩率

GIF采用的是LZW，而APNG采用Deflate压缩，在加上APNG继承了PNG的filter，利用相邻像素的相似性是压缩率大大提高。

关于颜色

GIF每个像素只有 8 bit，也就是说只有2的8次方256种颜色，所以导致GIF的画质比较差。

关于透明

GIF支持全透明，不支持半透明，所以如果吧一个边缘是半透明的图片转换成GIF，就会出砸扁的问题，而APNG和WebP都支持 8 bit alpha channel；

兼容性

GIF的兼容性可能也是他唯一的优势吧，因为几乎所有的浏览器都支持GIF，但是对于APNG而言，支持的浏览器目前只有Firfox和safair，同时Chrome 59 页支持APNG，但是对于微软的IE或者EDOG目前还不支持。

二.WebP

目前APNG的前景不太乐观，现在要提到另外一个图片格式WebP，他是2010年Google推出的全部通吃的图片格式；

为什么说webP全部通吃呢？

因为webP既可以有损（替代JPEG）也可以无损（替代PNG），还可以动（替代GIF），并且在压缩率上全面超越了这三种常用的格式，目前支持webP的纸哟Chrome和Opera，据说Firfox也即将支持WebP，据说Sanfair也在测试WebP的支持，至于IE个EDOG可能也不太可能实现兼容了。