圖片格式:GIF

雖然在現代網路中並不實用,但 GIF (Graphics Interchange Format) 專門介紹圖片編碼的核心概念。

GIF 可視為圖片資料的包裝函式。它擁有多種排序方式,稱為「邏輯畫面」,也就是繪製圖片資料的個別影格,就像 Photoshop 文件中的圖層一樣。這就是 GIF 支援其類似翻轉動畫的方式:單一影格繪製到邏輯畫面,然後用另一個影格取代。當然,在處理靜態 GIF 時,這種區別並不重要,圖片會繪製在邏輯畫面中的單一影格。

GIF 使用無損資料壓縮方法;如果您有興趣,則為「Lempel-Ziv-Welch」演算法的變體。雖然這個演算法的運作方式更加詳細,但本質上還是有一點類似,但基本上來說,這個 JavaScript 的運作方式類似「Uglification」JavaScript,也就是檔案中重複的字元字串會儲存在一種內部字典中,因此可以不必每次出現時都重複參照。

使用四到四的方格呈現 GIF 參考資料的視覺化內容。

只有在這樣的情況下,演算法不算簡單是畫筆畫。此操作會再次檢查產生的顏色代碼表格,找出重複的像素顏色序列,並建立第二個可參照程式碼的資料表。然而,任何圖片資料都不會遺失,只是以無需從根本變更的方式加以排序和重整的情況下,即可讀取及整理資料。

雖然 GIF 在技術上使用的是無失真「壓縮」,但有嚴重的限制,會嚴重影響圖片品質:除非圖片已使用 256 色以下的色彩,否則將圖片儲存為 GIF 時一律都會降低擬真度。

每個繪製在 GIF 邏輯畫面的影格最多只能包含 256 種顏色。GIF 也支援「索引透明度」,其中透明像素會參照顏色表格中透明「顏色」的索引。

將值範圍縮小為更小且近似一組輸出值的做法稱為「量化」,這在瞭解圖片編碼時,可能會相當常看到這個術語。這個調色盤量化的結果通常很明顯:

靜態 GIF 範例

如要進一步瞭解這項程序,請回想自己能根據說明重新建立的光柵圖片格線。

三個水平藍色方塊,後面有一個紅色方塊

這次改造就在原始圖片上加入一些細節:多像素,其中一幅更深的藍色:

採用兩四次設定時採用藍色到紅色的橫向方塊,藍色方塊的顏色比其他方塊深。

不要使用任何壓縮 (所以說一下),您可以將此格線描述為:

第 1 列,第 1 欄是 #0000FF。第 1 列的第 2 欄是 #0000FF。第 1 列,第 3 欄是 #0000FF。第 1 列,第 4 欄是 #FF0000。第 2 列,第 1 欄是 #0000FF。第二列是 #000085。第 2 列的第 3 欄是 #0000FF。第 2 列,第 4 欄是 #FF0000。

你可以使用 GIF 無失真資料壓縮和色彩索引等功能,描述如下:

A:#0000FF,B:#FF0000,C:#000085。第 1 列至第 3 欄是 A。第 1 列,4 欄是 B。第 2 列是 A 欄。第 2 列的第 2 欄是 C。第二列是 A。第 2 列,4 欄是 B。

此舉可將以像素為單位的說明壓縮到幾個地方 (「一到三個欄是...」),並且透過在字典中定義重複的顏色 (由前排) 定義重複的顏色,以節省幾個字元。視覺擬真度不會有任何改變。資訊已經過壓縮,不會造成任何損失。

藍色至紅色橫向方塊,在 2 x 2 尺寸時搭配一個深色像素。

如您所見,單一深藍色像素對我們的編碼大小有很大的影響。如果要將自己限制使用量化調色盤,可以進一步減少:

答:#0000FF,B:#FF0000。第 1 列至第 3 欄是 A。第 1 列,4 欄是 B。第 2 列第 1 到第 3 欄是 A。第 2 列,4 欄是 B。

不幸的是,這些儲存的位元組導致您遺失了像素完美的不足。

統一藍色和紅色水平方塊。

當然,轉譯引擎不知道,因為我對來源圖片進行編碼的方法還遺漏了深藍色像素的細節。 您已瞭解我們手邊的顏色,您已完全按照我編碼的方式呈現圖片。

現在,在這個誇張的例子中,將三種顏色減少為兩種,可明顯改善品質。在較大且較詳細的圖片上,效果可能會不太明顯,但仍然是可見的。

將陰影等細微的漸層 (如陰影) 進行編碼後,個別像素從周圍環境分開:

綠色背景上有粉色花朵。

在實務上,將無損壓縮和調色盤量化的結合,表示 GIF 不適合用於現代網路開發作業。無損壓縮的效果不足以縮減檔案大小,而調色盤反而明顯降低品質。

最重要的是,只有已使用有限調色盤、硬邊緣 (而非反鋸齒) 和純色 (而非漸層) 的簡易圖片編碼,GIF 只是一種有效格式,而且其他格式的效果最好。精選的 PNG 檔案較小、規模較大,通常是更理想的光柵圖片。不過,在圖示或線條藝術等用途方面,圖示或線條藝術對於圖示或線條藝術而言,兩者都是較差的選擇。GIF 最常見的現代用途是動畫,但要達到這個目標,還是要有更有效且易於存取的新型影片格式。