快速解決GIF圖的鋸齒問(wèn)題

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

設(shè)計(jì)師：怎么我設(shè)計(jì)的動(dòng)態(tài)表情，上線以后周?chē)嗔诉@么多白色的噪點(diǎn)！

全部動(dòng)態(tài)表情地址：https://img.lvups.com/d/file/bigpic/2022/12/26/h0kj2rvtlb4

前端：GIF本來(lái)就會(huì)有鋸齒，跟我沒(méi)關(guān)系呀。

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

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

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

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

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

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

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

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

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

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

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