快速解決GIF圖的鋸齒問題
產(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á)到壓縮效果。說起來(lái)有點(diǎn)繞口,直接看下面的圖會(huì)更清晰些:
由于鄰近幀間共用了相同的像素信息,所以可以有效節(jié)省動(dòng)態(tài)圖片的體積。
而由于我們生成APNG的圖片是PNG24(為了保證Alpha通道),而PNG24與GIF相比,體積上本來(lái)就沒有優(yōu)勢(shì),所以生成的APNG自然也沒有優(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)行壓縮,具體過程見下圖:
按照這種方式優(yōu)化以后,生成的APNG的大小平均會(huì)比GIF小30%左右,而且也能解決鋸齒問題(如下圖):
點(diǎn)擊?isparta.github.io?并在chrome下打開可以有更直觀的感受。
設(shè)計(jì):雖然不知道你在說什么,但是感覺很厲害的樣子!
前端:其實(shí)簡(jiǎn)單來(lái)說,就是APNG比GIF小30%左右,而且沒有鋸齒。
設(shè)計(jì):那現(xiàn)在我們可以使用么?會(huì)有什么限制么?