快速解决GIF图的锯齿问题

产品：只是大一点点而已，那也很不错了呀！

前端：却多嘛得，如果APNG可以比GIF还要小，这样用户体验不就更好了。先看看APNG的原理：

前方烧脑，做好准备。

APNG对于动态图片的处理算法类似GIF，可以将一组大小相同的PNG图片合并为一张APNG图片，原来的每一张PNG图片变成APNG图片的每一帧，并且每一帧会按照约定的规则来记录与前一帧变化区域的数据到相应数据块，并保存变化区域在图片中的坐标与大小(如图一所示)。解析的时候，应用程序会根据每一帧变化区域的坐标和大小，将变化区域替换前一帧的相应区域来还原当前帧，从而生成动态图片，并达到压缩效果。说起来有点绕口，直接看下面的图会更清晰些：

由于邻近帧间共用了相同的像素信息，所以可以有效节省动态图片的体积。

而由于我们生成APNG的图片是PNG24（为了保证Alpha通道），而PNG24与GIF相比，体积上本来就没有优势，所以生成的APNG自然也没有优势。

不就是PNG24比较大嘛，那就将PNG24先有损压缩（pngquant），再转换为APNG不就可以了，喜大普奔呀！^_^最后按这种方式折腾出来了，却发现APNG比之前更大了(如下图）！- -，知道真相的我眼泪掉下来呀！请查看：isparta.github?的对比。

仔细想了一下，因为我们对PNG24进行了有损压缩，造成图片信息的重新排布，本来跟临近帧相同的区域不同了，自然输出的图片大小也会比较大。

所以我们只能对跟临近帧不同的区域进行压缩，具体过程见下图：

按照这种方式优化以后，生成的APNG的大小平均会比GIF小30%左右，而且也能解决锯齿问题（如下图）：

点击?isparta.github.io?并在chrome下打开可以有更直观的感受。

设计：虽然不知道你在说什么，但是感觉很厉害的样子！

前端：其实简单来说，就是APNG比GIF小30%左右，而且没有锯齿。

设计：那现在我们可以使用么？会有什么限制么？