腾讯某位同学设计的动态表情上线后,发现锯齿问题特别严重,向工程师请教,前端小哥拿出自家研究的神器,立刻解决了问题,而且还可以批量搞定哟,已经有大量好评了,现在知道还来得及!
设计师:怎么我设计的动态表情,上线以后周围多了这么多白色的噪点!
全部动态表情地址: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