快速解決GIF圖的鋸齒問題

騰訊某位同學設計的動態(tài)表情上線后，發(fā)現(xiàn)鋸齒問題特別嚴重，向工程師請教，前端小哥拿出自家研究的神器，立刻解決了問題，而且還可以批量搞定喲，已經有大量好評了，現(xiàn)在知道還來得及！

設計師：怎么我設計的動態(tài)表情，上線以后周圍多了這么多白色的噪點！

全部動態(tài)表情地址：http://isparta.github.io/compare/#15

前端：GIF本來就會有鋸齒，跟我沒關系呀。

設計師：太丑了，你不是萬能的前端么？這個問題我用ps解決都是分分鐘的事情呀！

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

2004年，mozilla社區(qū)也意識到這個問題，所以當時他們提出了一種新的圖片格式——APNG。

APNG又叫動態(tài)PNG（Animated PNG），第1幀為標準PNG圖像，剩余的動畫和幀速等數據放在PNG擴展數據塊里，因此只支持原版PNG的軟件會正確顯示第1幀。更多資料請查看：wikipedia.org

由于APNG是PNG的擴展，所以它支持半透明，自然就不會有鋸齒的問題。設計師：能說人話么？

前端：- -！?APNG比GIF牛逼多了，媽媽再也不用擔心鋸齒的問題了。

設計師：那就趕緊用起呀！

這時產品出現(xiàn)了…

產品： 不會有鋸齒，那是不是APNG會比GIF的體積大呀！

前端：just try it…拿一組圖片進行測試，會發(fā)現(xiàn)有些APNG比GIF要大，如下圖：

再通過大批量的圖片對比可以發(fā)現(xiàn)，APNG平均會比GIF的體積大一點點（3%左右）。更多請查看：http://isparta.github