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

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

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

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

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

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

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

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

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

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

前端：- -！?APNG比GIF牛逼多了，媽媽再也不用擔(dā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要大，如下圖：

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

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

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

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

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

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

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

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

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

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

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

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

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

前端：其實(shí)簡(jiǎn)單來說，就是APNG比GIF小30%左右，而且沒有鋸齒。

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

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

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

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

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

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

1，批量處理

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

2，APNG有損壓縮

直接集成PNG的有損壓縮，可以將文件體積降低到最小（一般輸出的文件比GIF小30%左右）。

3，跨平臺(tái)

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

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

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

再回眸，麗影如初…