還在用GIF?是時候了解一下APNG了

說到動圖,大家首先想到的肯定是 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ì)量

GIF

APNG

如果你使用的是非 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 的工具與方法參考

感謝您的閱讀。
本文主要節(jié)選自‘凹凸實驗室’的 APNG 那些事,歡迎大家關(guān)注凹凸實驗室。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 移動端圖片格式調(diào)研 圖片通常是移動端流量耗費最多的部分,并且占據(jù)著重要的視覺空間。合理的圖片格式選用和優(yōu)化可以為你...
    AngeloD閱讀 1,318評論 0 5
  • 兒子閱讀的習(xí)慣已經(jīng)堅持第15天了。由于他讀的是《課外閱讀》和《人文素養(yǎng)》,里面陌生字比較多,拼讀時候經(jīng)常出錯,我也...
    親子園閱讀 260評論 0 3
  • 我是三門峽市陜州區(qū)西張村鎮(zhèn)張村小學(xué)劉艷華,同時是滬江青椒計劃的學(xué)員。2017年至今,我都做了什么?我開始了記憶搜索...
    陜縣258劉艷華閱讀 341評論 0 2
  • 剛在簡書上面翻閱了一篇“一位從技術(shù)員逐步成為博士生導(dǎo)師”的勵志故事,講述了主人公如何從西北大山里面的苦孩子到進城求...
    一輪姣陽閱讀 746評論 2 5
  • 仔細想來,倒也不是個事 。不過是收碗這不用個把分鐘的事,當即看到擺在桌上的碗筷,沒人去收,可卻引起火來。到底是小氣...
    綠燈blue閱讀 287評論 4 0

友情鏈接更多精彩內(nèi)容