emptygif
語言: 繁體中文

最小的透明 GIF 只有 43 位元組。

這就是它的全部。點選任一位元組查看它的作用,然後複製檔案、下載、外連,或用你自己的程式碼來提供它。

放大後的 43 位元組 GIF:一個透明像素
0000
0010
0020
下載 1×1.gif

R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

每個位元組的作用

GIF 由一連串區塊組成。這個檔案有七個區塊,本頁的每種顏色都對應其中一個。選取一個位元組或區塊即可查看說明。 數值以小端序(little-endian)儲存:低位元組在前,所以 01 00 代表 1。

位元組欄位意義
檔頭 告訴解碼器這是 GIF,以及應該依哪個格式版本來解析。
47 49 46簽章ASCII 字母「GIF」。每個 GIF 檔案都以它們開頭。
38 39 61版本「89a」。透明需要 89a;87a 沒有圖形控制擴充。
邏輯螢幕描述區塊 畫布的尺寸,以及色彩表的設定方式。
01 00畫布寬度1 像素。
01 00畫布高度1 像素。
80封裝旗標四項設定擠在一個位元組裡。最高位元表示後面接著全域色彩表;最低三個位元代表它的大小。
00背景色索引調色盤第 0 項。瀏覽器會忽略它,直接顯示影像後方的內容。
00像素長寬比0 表示正方形像素,不做校正。
全域色彩表 調色盤。像素儲存的是指向這個清單的索引,而不是顏色本身。
FF FF FF調色盤項目紅、綠、藍各佔一個位元組:#ffffff。兩個項目是 GIF 色彩表的最小尺寸。
00 00 00調色盤項目紅、綠、藍各佔一個位元組:#000000。兩個項目是 GIF 色彩表的最小尺寸。
圖形控制擴充 GIF89a 新增的選用區塊。這裡用它讓調色盤第 0 項變成透明。
21擴充引導碼0x21(「!」)表示接下來是擴充區塊。
F9圖形控制標籤0xF9 表示這個擴充是圖形控制擴充。
04區塊大小後面接著 4 位元組的設定。
01封裝旗標最低位元是透明旗標。它已開啟,因此會使用下方的透明色索引。
00 00延遲0 個百分之一秒。只對動畫有意義。
00透明色索引調色盤第 0 項會繪製成完全透明。
00區塊終止符長度為零的子區塊,用來結束該區塊。
影像描述區塊 影像在畫布上的位置和大小。
2C影像分隔符0x2C(「,」)表示影像開始。
00 00左側位置影像從距離畫布左緣 0 像素處開始。
00 00頂端位置影像從距離畫布上緣 0 像素處開始。
01 00影像寬度1 像素。
01 00影像高度1 像素。
00封裝旗標沒有區域色彩表,非交錯式。影像使用全域調色盤。
影像資料 像素資料,以 LZW 壓縮,並切分成每個最多 255 位元組的子區塊。
02LZW 最小碼長2,因此壓縮碼從 3 位元寬開始。
02子區塊大小後面接著 2 位元組的壓縮資料。
44 01壓縮像素從最低位元開始封裝的 LZW 碼。下方說明它們如何解碼。
00區塊終止符長度為零的子區塊,用來結束該區塊。
結尾 標示檔案結束的一個位元組。
3B結尾0x3B(「;」)結束檔案。

封裝位元組的內部

這三個位元組各自存放了幾項小設定。第 7 位元在最左邊。

邏輯螢幕描述區塊 0x80
1有全域色彩表
000色彩解析度
0調色盤依重要性排序
000表格大小:2^(n+1) 項
圖形控制擴充 0x01
000保留
000處置方式
0等待使用者輸入
1啟用透明
影像描述區塊 0x00
0有區域色彩表
0交錯式
0調色盤依重要性排序
00保留
000區域表格大小

兩個位元組如何裝下一個像素

最小碼長為 2 時,解碼器讀取 3 位元的碼。碼 4 清空碼表,碼 5 結束影像,碼 0 到 3 對應調色盤項目。位元組 44 01 從最低位元開始讀取:

0x44 010001000x01 00000001

  1. 001100 = 4清除:從全新的碼表開始
  2. 000000 = 0像素:調色盤第 0 項
  3. 101101 = 5影像結束
  4. 0000000 未使用的填充位元

更大的影像也用同樣的技巧:每個新碼代表比上一個多一個像素的連續像素,所以 1000×1000 的透明 GIF 只需要 1,743 位元組。

還能更小嗎?

可以,只要拿掉解碼器能容忍缺少的部分。我們把每個變體交給三個瀏覽器引擎和 Pillow,並記錄它們畫出的結果。

大小變體ChromiumFirefoxWebKitPillow
43本頁的標準檔案。透明透明透明透明
42沒有結尾位元組。解碼器反正會在資料結束時停止。透明透明透明透明
37完全沒有調色盤。仍然有效:規格允許解碼器使用自己的調色盤,而且索引 0 本來就是透明的。透明透明透明透明
36沒有調色盤,也沒有結尾。透明透明透明透明
35沒有透明區塊:像素以調色盤顏色 0(白色)繪製。白色白色白色白色
351987 年的格式。它無法把顏色標示為透明。白色白色白色白色
34有透明區塊,但沒有壓縮像素。透明透明透明錯誤
33同上,但拿掉結尾。透明透明透明錯誤
29沒有調色盤,也沒有透明設定。每個引擎自行選擇顏色。黑色白色透明黑色
26完全沒有壓縮資料的影像。透明透明透明錯誤
14只有檔頭、畫布大小和結尾,裡面沒有影像。透明錯誤透明錯誤

需要在所有環境都能用時,請用 43 位元組。37 位元組仍是有效的 GIF,而且在我們測試的每個引擎中都顯示為透明。再小就得依賴解碼器的寬容度,29 位元組的檔案就呈現了各引擎之間的分歧。

於 2026年9月23日 以 Chromium 153.0.8010.12, Firefox 155.0, WebKit 26.6, Pillow 12.2.0 測試。

產生任意尺寸

透明或單色,從 1×1 到 65535×65535。在你的瀏覽器中產生,不會上傳任何東西。

填色
常用尺寸

1×1 · 43 位元組

下載 GIF

在你的技術堆疊中提供它

173 個可直接執行的程式碼片段。挑一個適合你的:每個都會在你指定的路徑回傳 image/gif 回應。如果你在上方改了尺寸或顏色,程式碼片段會使用那個 GIF。

Elixir, Erlang & Gleam

Express JavaScript

安裝
npm i express
檔案
server.mjs
執行
node server.mjs
import express from 'express';

const GIF = Buffer.from('R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==', 'base64');

const app = express();

app.get('/pixel.gif', (req, res) => {
  res.set('Cache-Control', 'no-store');
  res.type('gif').send(GIF);
});

app.listen(8080);

我們執行了這段程式碼,並比對了它回傳的位元組。 開啟頁面

用途

  • 追蹤像素與信標:伺服器記錄請求,並以最小的有效圖片回應。
  • 延遲載入圖片的預留位置,讓 img 標籤在真正的圖片來源到位前就是有效的。
  • HTML 電子郵件中的固定尺寸間隔圖,因為郵件裡的 CSS 支援參差不齊。
  • 需要真實圖片、又不想附帶圖檔的測試與 mock。

追蹤像素沒有看起來那麼可靠

開啟「郵件隱私保護」後,Apple Mail 會透過代理伺服器預先載入遠端圖片,所以一次「開啟」可能根本不是真人。Gmail 也會透過自己的代理伺服器擷取並快取圖片。許多用戶端預設會封鎖遠端圖片。做網頁分析時,navigator.sendBeacon()204 No Content 回應通常比圖片更合適。

常見問題

明明有一個像素,為什麼叫「空」?
GIF 至少要有一個像素。這個是 1×1,唯一的顏色被標示為透明,所以什麼都不會顯示。
這個 43 位元組的檔案有效嗎?
有效。它完全遵循 GIF89a 規格,上表中的每個引擎都把它繪製為透明。
為什麼用 GIF,而不是 PNG 或 WebP?
它比最小的透明 PNG 還小,而且過去 35 年來的所有瀏覽器、郵件用戶端和圖片函式庫都能讀取它。
該用 data URI 還是檔案?
data URI 能省下一次請求,適合預留位置和 CSS。如果請求本身才是重點(例如追蹤像素),就需要檔案或端點。
該送出哪個 Content-Type?
image/gif。如果每個請求都必須到達你的伺服器,再加上 Cache-Control: no-store