天天看點

GIF圖檔原理和儲存結構深入解析

GIF是一種使用LZW壓縮,支援多張圖像的容器。支援256色,透明通道為1bit。作為網際網路表情包的載體,GIF這項80年代的技術依然生生不息。

但它的弊端也是顯而易見的:易出現毛邊,色彩表現低劣,檔案壓縮比不高。針對這些問題,Mozilla釋出了APNG來代替老舊的GIF技術,同時許多開源元件也用WebP格式來代替GIF。

GIF在iOS的尴尬處境

長久以來,iOS一直被吐槽不能用GIF。造成這一局面的主要原因是:

  • iOS關于照片的場景不會自動播放GIF,也沒有角标。
  • 一些應用将GIF視為靜态圖像去操作,導緻使用者保持了一個GIF後,結果應用将其儲存成JPG。
  • iOS隻能通過imageI/O去操作GIF資料,UIKit對其絕緣。

GIF的存儲結構

由于曆史的原因,GIF有兩個版本,但它們的檔案結構是一樣的,都是由不同用途的資料塊構成,可分為控制塊和資料塊。控制塊裡是決定GIF表現的參數,資料塊裡的資料由前面的控制塊裡的參數來解釋。

一個GIF檔案的内部結構如下圖:

GIF圖檔原理和儲存結構深入解析

GIF結構

Header:包含檔案簽名與版本号。

Trailer: 檔案結束辨別符。

GIF Data: Header 與 trailer 之間就是GIF檔案的資料。

我們從一個簡單的GIF圖入手,它包含兩張圖像:

GIF圖檔原理和儲存結構深入解析

這是它的十六進制資料,我用顔色區分了不同的資料塊:

GIF圖檔原理和儲存結構深入解析

Paste_Image.png 

Header

GIF檔案的開頭是 Header 資料塊,長度為6位元組,ASCII值為“GIF87a”或”GIF89a”,前三位為GIF簽名,後三位為不同年份的版本号。

GIF圖檔原理和儲存結構深入解析

Paste_Image.png

利用這點,在iOS中判斷二進制檔案是否為GIF時,可以簡單去判斷它的前四位是否是”GIF8″。事實上絕大多數圖像都可以用檔案簽名來判斷類型。

GIF 内容

GIF資料包含多個資料塊,其結構如下:

邏輯螢幕描述符

0A000A00 B30000

這一資料塊由7個位元組組成,前四個位元組分别是圖像渲染區域的寬高。GIF的資料是按照大端序存儲的,0x0A00為10,是以這個GIF的寬高均為10。

接下來是一個壓縮位元組,第一個 Bit 為标志位,表示全局顔色清單是否存在。接下來三個Bit表示圖像調色闆中每個顔色的原色所占用的Bit數,011表示占用4個Bit,111占用8個Bit,以此類推。調色闆最多隻包含由24-Bit顔色中選出的256個顔色(實際有很多優化方案能提高顔色分辨率,如加入局部調色闆)。第五個Bit為标志位,表示顔色清單排序方式。若為1,表示顔色清單是按照顔色在圖像中出現的頻率降序排列。随後三個Bit表示全局顔色清單的大小,計算方法是2^N+1 ,其中N為這三個Bit的二進制數值。

第六個位元組是表示背景色在全局顔色清單中的索引,若無全局顔色清單則此位元組無效。在GIF的圖像資料中,沒有被指定顔色的像素會被背景色填充。

最後一個位元組是像素的寬高比,大多數時候這個值都是0,若值為N, 則圖像的寬高比:

aspectRatio = (pixelAspectRatio + 15) / 64

GIF圖檔原理和儲存結構深入解析

全局顔色清單

000000 80000000 80008080 00000080 80008000 8080C0C0 C0808080 FF000000 FF00FFFF 000000FF FF00FF00 FFFFFFFF FF

由前面的邏輯螢幕描述符可知,全局顔色清單的大小是16,每個顔色占三個位元組,按照RGB排列,是以它占有48個位元組。資料流中,顔色是按照清單中的索引存儲的。

應用程式擴充

>

x

GIF中擴充塊都以0x21開始,後一個位元組是擴充标簽,辨別擴充用途。

應用程式擴充的标簽是0xFF,它包含有應用程式的辨別資訊和應用程式資料。其中 Netscape 應用程式擴充常用于控制GIF的動畫循環次數。Netscape 擴充長19個位元組,前14個是應用程式的ACSII資訊,後四個是資料子塊,用于指定GIF的循環次數, 按無符号整型存儲,0表示無限循環。

GIF圖檔原理和儲存結構深入解析

圖形控制擴充

21F90409 32000F00

圖形控制擴充塊屬于”89a”版本的定義。它在一個圖像資料塊的最前端,用來指定圖像的透明度與動畫屬性。圖形控制擴充的開端兩位元組是0x21F9,其中0x21表示這是一個擴充,F9表示擴充用于圖形控制。第三個位元組是塊大小(它到結束符之間的資料)。第四個位元組是壓縮字段,前三個Bit保留,四到六Bit是disposal method。第四、五個位元組是圖像控制擴充後面的圖像的動畫時間,以無符号整型存儲。第六個位元組是透明色索引,之後是塊結束符0x00。

GIF圖檔原理和儲存結構深入解析

圖像描述符

2C000000 000A000A 0000

圖像描述符位于GIF中每一個圖像資料的前端,由0x2C開始,長度為10個位元組。第一個位元組是圖像描述符的辨別0x2c,後面八個位元組表示圖像的frame(left, top, width, height),用來在動畫中局部更新圖像。最後一個是壓縮位元組,主要是關于局部顔色清單的資訊,其中第二個Bit表示圖像的存儲方式是交織還是連續。

GIF圖檔原理和儲存結構深入解析

局部顔色清單

如果上面的局部顔色清單标志位為1,那麼局部顔色清單會排列在圖像描述符後面,它隻對緊跟在它之後的圖像資料有效。如果局部顔色清單标志位為0,那麼圖像資料将使用全局顔色清單索引顔色。局部顔色清單的大小計算方法和像素顔色格式與全局顔色清單相同。

圖像資料

041C 1080472B 0549DA9B BAAE58E7 4D4F288E E629A519 697E1C0C 92DB1301 00

GIF的圖像資料是經過LZW壓縮的二進制流,通過解碼可以将其按照顔色清單中的顔色進行像素填充。第一個位元組是LZW最小編碼大小,用來進行資料解碼。第二個位元組是圖像資料的大小,之後的都是圖像資料,直到塊結束符。

結束符

3B

GIF的動畫原理

GIF動畫的循環次數是由應用擴充來控制的,而GIF動畫每一幀的過渡方式是由圖形控制擴充控制,圖像描述符控制圖像繪制的區域。

圖形控制擴充中控制動畫的參數分别是:disposal method,user input flag,delay time,transparency color。

disposal method

disposal method占3Bit,能夠表示0-7。

  • disposal method = 1

解碼器不會清理畫布,直接将下一幅圖像渲染上一幅圖像上。

  • disposal method = 2

解碼器會以背景色清理畫布,然後渲染下一幅圖像。背景色在邏輯螢幕描述符中設定。

  • disposal method = 3

解碼器會将畫布設定為上之前的狀态,然後渲染下一幅圖像。

  • disposal method = 4-7

保留值

user input flag

當user input flag為1時,GIF會在有使用者輸入事件(滑鼠、鍵盤)時才會過渡到下一幅圖像。

delay time

delay time占兩個位元組,為無符号整數,控制目前幀的展示時間,機關是0.01秒。

transparency color

如果圖形控制擴充的透明色标志位為1,那麼解碼器會通過透明色索引在顔色清單中找到改顔色,标記為透明,當渲染圖像時,标記為透明色的顔色将不會繪制,顯示下面的背景。

圖像渲染區域

GIF中圖像描述符指定了目前幀需要渲染的區域,這樣GIF的過渡動畫就隻用繪制兩幀之間不同的區域,前提是diposal method的值為1。

實驗

根據上面的知識,将第一幀的圖形控制擴充改為:

21F90409 0A000900

這裡将透明色改成了紅色(紅色在全局顔色清單中的索引是9),并将delay time改為0.1秒。修改完的GIF為:

繼續閱讀