快速解决GIF图的锯齿问题

腾讯某位同学设计的动态表情上线后，发现锯齿问题特别严重，向工程师请教，前端小哥拿出自家研究的神器，立刻解决了问题，而且还可以批量搞定哟，已经有大量好评了，现在知道还来得及！

设计师：怎么我设计的动态表情，上线以后周围多了这么多白色的噪点！

全部动态表情地址：https://img.lvups.com/d/file/bigpic/2022/12/26/h0kj2rvtlb4

前端：GIF本来就会有锯齿，跟我没关系呀。

设计师：太丑了，你不是万能的前端么？这个问题我用ps解决都是分分钟的事情呀！

前端： ……（you can you up） 其实，在很久很久以前…

2004年，mozilla社区也意识到这个问题，所以当时他们提出了一种新的图片格式——APNG。

APNG又叫动态PNG（Animated PNG），第1帧为标准PNG图像，剩余的动画和帧速等数据放在PNG扩展数据块里，因此只支持原版PNG的软件会正确显示第1帧。更多资料请查看：wikipedia.org

由于APNG是PNG的扩展，所以它支持半透明，自然就不会有锯齿的问题。设计师：能说人话么？

前端：- -！?APNG比GIF牛逼多了，妈妈再也不用担心锯齿的问题了。

设计师：那就赶紧用起呀！

这时产品出现了…

产品： 不会有锯齿，那是不是APNG会比GIF的体积大呀！

前端：just try it…拿一组图片进行测试，会发现有些APNG比GIF要大，如下图：

再通过大批量的图片对比可以发现，APNG平均会比GIF的体积大一点点（3%左右）。更多请查看：http://isparta.github