快速解決GIF圖的鋸齒問題

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

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

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

前端：GIF本來就會有鋸齒，跟我沒關(guān)系呀。

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

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

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

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

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

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

設(shè)計師：那就趕緊用起呀！

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

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

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

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