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

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

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

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

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

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

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

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

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

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

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

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

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

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

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