快速解決GIF圖的鋸齒問題(4)

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

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

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

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

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

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

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的體積大一點點（3%左右）。更多請查看：http://isparta.github

產(chǎn)品：只是大一點點而已，那也很不錯了呀！

前端：卻多嘛得，如果APNG可以比GIF還要小，這樣用戶體驗不就更好了。先看看APNG的原理：

前方燒腦，做好準(zhǔn)備。

APNG對于動態(tài)圖片的處理算法類似GIF，可以將一組大小相同的PNG圖片合并為一張APNG圖片，原來的每一張PNG圖片變成APNG圖片的每一幀，并且每一幀會按照約定的規(guī)則來記錄與前一幀變化區(qū)域的數(shù)據(jù)到相應(yīng)數(shù)據(jù)塊，并保存變化區(qū)域在圖片中的坐標(biāo)與大小(如圖一所示)。解析的時候，應(yīng)用程序會根據(jù)每一幀變化區(qū)域的坐標(biāo)和大小，將變化區(qū)域替換前一幀的相應(yīng)區(qū)域來還原當(dāng)前幀，從而生成動態(tài)圖片，并達(dá)到壓縮效果。說起來有點繞口，直接看下面的圖會更清晰些：

由于鄰近幀間共用了相同的像素信息，所以可以有效節(jié)省動態(tài)圖片的體積。

而由于我們生成APNG的圖片是PNG24（為了保證Alpha通道），而PNG24與GIF相比，體積上本來就沒有優(yōu)勢，所以生成的APNG自然也沒有優(yōu)勢。

不就是PNG24比較大嘛，那就將PNG24先有損壓縮（pngquant），再轉(zhuǎn)換為APNG不就可以了，喜大普奔呀！^_^最后按這種方式折騰出來了，卻發(fā)現(xiàn)APNG比之前更大了(如下圖）！- -，知道真相的我眼淚掉下來呀！請查看：isparta.github?的對比。

仔細(xì)想了一下，因為我們對PNG24進(jìn)行了有損壓縮，造成圖片信息的重新排布，本來跟臨近幀相同的區(qū)域不同了，自然輸出的圖片大小也會比較大。

所以我們只能對跟臨近幀不同的區(qū)域進(jìn)行壓縮，具體過程見下圖：

按照這種方式優(yōu)化以后，生成的APNG的大小平均會比GIF小30%左右，而且也能解決鋸齒問題（如下圖）：

點擊?isparta.github.io?并在chrome下打開可以有更直觀的感受。

設(shè)計：雖然不知道你在說什么，但是感覺很厲害的樣子！

前端：其實簡單來說，就是APNG比GIF小30%左右，而且沒有鋸齒。

設(shè)計：那現(xiàn)在我們可以使用么？會有什么限制么？

前端：額，APNG的平臺兼容性不是特別好，不過也是有辦法解決的。APNG的經(jīng)歷還是蠻忐忑的，而且最后還是沒有形成標(biāo)準(zhǔn)，所以很少應(yīng)用程序（對于瀏覽器，目前有firefox與opera支持，還有IOS8下的Safari）支持這種格式，但是不支持的應(yīng)用程序會顯示APNG的第一幀。

對于原生應(yīng)用，我們可以根據(jù)?官方說明文檔?（https://developer.mozilla.org）編寫解碼邏輯，目前PC QQ客戶端已經(jīng)支持APNG。

對于HTML5應(yīng)用，已經(jīng)有比較成熟的開源框架?apng-canvas（https://github.com）可供使用，我們在近期的『禮物』項目中就使用了APNG，做到了精細(xì)的動畫體驗（如下圖）：

產(chǎn)品：那怎么生成APNG呢？如果有大批量的圖片需要轉(zhuǎn)換怎么辦？

前端：這個不用擔(dān)心，由于業(yè)內(nèi)暫時沒有APNG批量有損壓縮的工具，所以我們就自研了iSparta圖片轉(zhuǎn)換工具，它有以下特性——

1，批量處理

根據(jù)規(guī)則對文件和文件夾進(jìn)行批量轉(zhuǎn)換。具體操作請查看（isparta.github.io）。

2，APNG有損壓縮

直接集成PNG的有損壓縮，可以將文件體積降低到最�。ㄒ话爿敵龅奈募菺IF小30%左右）。

3，跨平臺

支持windows和Mac系統(tǒng)。

可以點擊 http://isparta.github?下載體驗， 目前該工具也在github（https://github.com）上開源了，關(guān)于工具的建議與bug可以在issues（https://github.com）上反饋，也歡迎大家的加入。

任何事情都不是一成不變的，有時候只要跳出常規(guī)，再認(rèn)真一點點，這個世界其實可以更美好！

再回眸，麗影如初…