說到動圖僚稿，大家首先想到的肯定是 GIF。但 GIF 最大的缺點是蟀伸，圖像是基于顏色列表的（存儲的數(shù)據(jù)是該點的顏色對應(yīng)于顏色列表的索引值）蚀同，最多只支持 8 位（256 色）。這使得使用 GIF 格式不可能得到高清的動畫圖片啊掏。
APNG 是 Mozilla 在 2008 年發(fā)布的一種圖片格式蠢络，旨在替換掉畫質(zhì)低劣的 GIF 動畫。它實際上只是相當(dāng)于 PNG 格式的一個擴展迟蜜，所以 Mozilla 一直想把它合并到 PNG 標(biāo)準(zhǔn)里面去刹孔，但它目前并沒有獲得 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 格式轧叽。
標(biāo)準(zhǔn)化申請
2007 年 4 月 20 日，Mozilla 希望 APNG 能成為官方標(biāo)準(zhǔn)刊棕，因此 PNG 組織發(fā)起投票炭晒，最終以8：10的票數(shù)否決了 APNG 進了官方標(biāo)準(zhǔn)，因為 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
感謝您的閱讀哀峻。
本文主要節(jié)選自‘凹凸實驗室’的 APNG 那些事涡相，歡迎大家關(guān)注凹凸實驗室。
