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

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

快速解决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要大,如下图:

快速解决GIF图的锯齿问题

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