快速解決GIF圖的鋸齒問題
產(chǎn)品:只是大一點點而已,那也很不錯了呀!
前端:卻多嘛得,如果APNG可以比GIF還要小,這樣用戶體驗不就更好了。先看看APNG的原理:
前方燒腦,做好準備。
APNG對于動態(tài)圖片的處理算法類似GIF,可以將一組大小相同的PNG圖片合并為一張APNG圖片,原來的每一張PNG圖片變成APNG圖片的每一幀,并且每一幀會按照約定的規(guī)則來記錄與前一幀變化區(qū)域的數(shù)據(jù)到相應數(shù)據(jù)塊,并保存變化區(qū)域在圖片中的坐標與大小(如圖一所示)。解析的時候,應用程序會根據(jù)每一幀變化區(qū)域的坐標和大小,將變化區(qū)域替換前一幀的相應區(qū)域來還原當前幀,從而生成動態(tài)圖片,并達到壓縮效果。說起來有點繞口,直接看下面的圖會更清晰些:
由于鄰近幀間共用了相同的像素信息,所以可以有效節(jié)省動態(tài)圖片的體積。
而由于我們生成APNG的圖片是PNG24(為了保證Alpha通道),而PNG24與GIF相比,體積上本來就沒有優(yōu)勢,所以生成的APNG自然也沒有優(yōu)勢。
不就是PNG24比較大嘛,那就將PNG24先有損壓縮(pngquant),再轉換為APNG不就可以了,喜大普奔呀!^_^最后按這種方式折騰出來了,卻發(fā)現(xiàn)APNG比之前更大了(如下圖)!- -,知道真相的我眼淚掉下來呀!請查看:isparta.github?的對比。
仔細想了一下,因為我們對PNG24進行了有損壓縮,造成圖片信息的重新排布,本來跟臨近幀相同的區(qū)域不同了,自然輸出的圖片大小也會比較大。
所以我們只能對跟臨近幀不同的區(qū)域進行壓縮,具體過程見下圖:
按照這種方式優(yōu)化以后,生成的APNG的大小平均會比GIF小30%左右,而且也能解決鋸齒問題(如下圖):
點擊?isparta.github.io?并在chrome下打開可以有更直觀的感受。
設計:雖然不知道你在說什么,但是感覺很厲害的樣子!
前端:其實簡單來說,就是APNG比GIF小30%左右,而且沒有鋸齒。
設計:那現(xiàn)在我們可以使用么?會有什么限制么?
上一篇:工具使用,PS萬能對齊大法
下一篇:調色工具,用PS一招改變灰暗天空