說到動圖,大家首先想到的肯定是 GIF。但 GIF 最大的缺點是,圖像是基于顏色列表的(存儲的數(shù)據(jù)是該點的顏色對應(yīng)于顏色列表的索引值),最多只支持 8 位(256 色)。這使得使用 GIF 格式不可能得到高清的動畫圖片。
APNG 是 Mozilla 在 2008 年發(fā)布的一種圖片格式,旨在替換掉畫質(zhì)低劣的 GIF 動畫。它實際上只是相當于 PNG 格式的一個擴展,所以 Mozilla 一直想把它合并到 PNG 標準里面去,但它目前并沒有獲得 PNG 組織官方的認可。
APNG 簡史
MNG
在 APNG 之前它還有一個老冤家叫 MNG(Multiple-image Network Graphics)即多圖像網(wǎng)絡(luò)圖形,1996 年 6 月提出 PNF(Portable Network Frame)草案,同年8月更名為 MNG ,2001 年 1 月 31 日發(fā)布 MNG 規(guī)范 1.0 版本,MNG 是出自 PNG 開發(fā)組之手,但由于結(jié)構(gòu)復(fù)雜的 MNG 程序庫,使用過程會占用大量的資源,早期只有較少的瀏覽器支持,Chrome、IE、Opera、Safari 則從未支持過。
APNG
2004 年,由 Mozilla 公司兩位 Mozilla 程序員 Stuart Parmenter 和 Vladimir Vuki?evi? 共同設(shè)計出 APNG,他們希望 Mozilla 社區(qū)能使用它,但提案未能通過。
libpng程序庫
2006 年,Google Summer of Code 活動中,加拿大圣力嘉學(xué)院的學(xué)生為 libpng 程序庫加入了對 APNG 支持,此后開發(fā)者再次推薦給 Mozilla 社區(qū),不過仍然遭到拒絕。
首次支持
2007 年 3 月 23 日,Mozilla 后知后覺,在 Mozilla Firefox 3.0 中 首次支持 APNG 格式。
標準化申請
2007 年 4 月 20 日,Mozilla 希望 APNG 能成為官方標準,因此 PNG 組織發(fā)起投票,最終以8:10的票數(shù)否決了 APNG 進了官方標準,因為 PNG 組織決心繼續(xù)推廣 MNG,但這不并影響 Mozilla 繼續(xù)支持 APNG。
為什么GIF能存活這么長時間
誕生于 1987 年的 GIF 為什么能存活這么久?
主要有四個原因:
- 幾乎所有的主流瀏覽器都支持 GIF
- 早期選擇不多,GIF 幾乎是唯一選擇(GIF - 1987、JPEG - 1992、PNG - 1996、APNG - 2004、WebP - 2010)
- 實現(xiàn)起來簡單,制作的工具多
- 采用 LZW 數(shù)據(jù)壓縮算法,使得 GIF 體積小,在早期慢速的互聯(lián)網(wǎng)易于傳播
為什么要取代它?
1.圖像質(zhì)量


如果你使用的是非 Firefox、Safari 瀏覽器,那 APNG 格式的圖片會向下兼容顯示為靜態(tài)圖,你可以更換 Firefox、Safari 瀏覽器或者在 Chrome 瀏覽器安裝 APNG Extension for Google Chrome 擴展來兼容,通過兩者對比能總結(jié)出以下區(qū)別:
GIF:
- 最多支持 8 位 256 色,色階過渡糟糕,圖片具有顆粒感
- 不支持 Alpha 透明通道,邊緣有雜邊
APNG:
- 支持 24 位真彩色圖片
- 支持 8 位 Alpha 透明通道
- 向下兼容 PNG
2.圖片體積



從幾組 GIF、APNG、WebP 的對比中可以發(fā)現(xiàn),無論在純色的圖片或是多彩的圖片,大部分情況下 APNG 依舊能比 GIF、WebP 以及有損的 WebP 的體積小。
APNG 的組成
APNG 是基于 PNG 格式擴展的,首先需要了解一個簡單的 PNG 文件組成結(jié)構(gòu):
PNG Signature | IHDR | IDAT | IEND
PNG 由 4 部分組成,首先以 PNG Signature(PNG簽名塊)開頭,緊接著一個 IHDR(圖像頭部塊),然后是一個或多個的 IDAT(圖像數(shù)據(jù)塊),最終以 IEND(圖像結(jié)束塊)結(jié)尾。
APNG 規(guī)范引入了三個新大塊,分別是:acTL(動畫控制塊)、fcTL(幀控制塊)、fdAT(幀數(shù)據(jù)塊),下圖是三個獨立的 PNG 文件組成 APNG 的示意圖。

- acTL 塊必須在第一個 IDAT 塊之前,用于告訴解析器這是一個動畫 PNG,包含動畫幀總數(shù)和循環(huán)次數(shù)的信息
- fcTL 塊是每一幀都必須的,出現(xiàn)在 IDAT 或 fdAT 之前,包含順序號、寬高、幀位置、延時等信息
- fdAT 塊與 IDAT 塊有著相同的結(jié)構(gòu),除了 fcTL 中的順序號
從圖中可以發(fā)現(xiàn)第一幀與后面兩幀不同,那是因為第一幀 APNG 文件存儲的為一個正常的 PNG 數(shù)據(jù)塊,對于不支持 APNG 的瀏覽器或軟件,只會顯示 APNG 文件的第一幀,忽略后面附加的動畫塊,這也是為什么 APNG 能向下兼容 PNG 的原因。
APNG 幀間優(yōu)化
APNG 會通過算法計算幀之間的差異,只存儲幀之前的差異,而不是存儲全幀,使得 APNG 文件大小有顯著的減少。
制作APNG
已經(jīng)有很多工具支持制作 Animated PNG 圖片,相信將來也會越來越多。
如果只是想體驗一下制作的效果,可以使用這個站點來快速生成: assembler
制作 Animated PNG 的工具與方法參考
- 使用 APNG Anime Maker 制作 apng howtech.tv/graphics/ho…
- 使用 GIF Movie Gear 制作 apng www.gamani.com/apng.htm