快速解決GIF圖的鋸齒問題

產(chǎn)品：只是大一點(diǎn)點(diǎ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á)到壓縮效果。說起來有點(diǎn)繞口，直接看下面的圖會更清晰些：

由于鄰近幀間共用了相同的像素信息，所以可以有效節(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%左右，而且也能解決鋸齒問題（如下圖）：

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

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

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

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