# GIF 分析 — 一個 GIF 裡到底裝了什麼

幀、延時、調色盤，以及每個位元組的去向。

> 在瀏覽器裡把 GIF 拆開看：每一幀的延時和處置方式、顏色表、循環次數，以及體積去了哪裡的逐位元組明細。什麼都不上傳。

本頁是一個完全在你的瀏覽器裡執行的互動式工具，地址是 https://abox.tools/zh-TW/gif-analyzer/。你交給它的任何內容都不會被上傳。下面是這個頁面用文字對該工具的全部說明；要使用它，請開啟這個地址。

## 你的 GIF **不會上傳**。這裡根本沒有伺服器。

檔案由你自己的瀏覽器開啟並拆解：讀塊結構、解 LZW、以及這個頁面上畫出的每一幀，都發生在這臺機器上。就算這裡有什麼東西想把檔案送走，頁面的另一端也根本沒有伺服器可以接。

- ✗ 不上傳
- ✗ 不註冊
- ✓ 斷網可用
- ✓ 開源
- ✓ 檔案不出這臺機器

## GIF 分析的步驟

1. **選一個 GIF。** 拖到選擇框裡，或者自己找出來。瀏覽器直接從磁碟上讀，這期間沒有任何東西發往別處。
2. **先看概覽。** 畫布尺寸、幀數、動畫聲稱自己有多長，以及它實際播多久。最後這兩項對不上的次數比多數人想的要多，原因在下一節。
3. **看看有什麼顯眼的。** 那裡的每一行都是從你的檔案上量出來的：沒有哪個瀏覽器會照辦的延時、缺失的循環塊、沒人引用的顏色表、比某些幀還大的後設資料。沒有一條是在猜你本來想做什麼。
4. **看位元組去了哪裡。** 檔案的每個位元組都恰好落在某一行裡，各行加起來正好是這個檔案。要是大部分不在「壓縮畫素」裡，表格的其餘部分會告訴你它在哪裡。
5. **逐幀看下去。** 每一幀都會顯示自己的延時、矩形、處置方式和大小。在「每幀之後的畫布」和「每幀實際存下的內容」之間切換，後者才能看出檔案有沒有最佳化：做得好的 GIF 存的是很小的矩形，做得糟的每次都把整幅畫面存一遍。
6. **需要的話把報告帶走。** 整份分析的純文字，可以貼進訊息裡，也可以和檔案放在一起留著。它是在頁面裡、用你螢幕上已有的內容拼出來的。

## 說得更細的版本

[一個 GIF 裡到底裝著什麼](https://abox.tools/zh-TW/guides/whats-inside-a-gif/): 幀、延時、處置方式和調色盤都講清楚：瀏覽器為什麼不認最短的延時，以及怎麼查出一個 GIF 的體積究竟花在了哪裡。

## 工具箱裡還有

- [圖片轉影片](https://abox.tools/zh-TW/images-to-video/): 一個資料夾的圖片，變成一段影片。
- [影片剪輯](https://abox.tools/zh-TW/trim-video/): 一邊看一邊標出要留的段落，最後拿回一個影片。
- [影片裁剪](https://abox.tools/zh-TW/crop-video/): 把片子切到只剩要緊的那塊。
- [影片倒放](https://abox.tools/zh-TW/reverse-video/): 最後一幀排在最前，連聲音一起。

## 常見問題

### 我的 GIF 會被傳到哪裡去嗎？

不會。檔案的讀取、解壓和繪製都由你自己的瀏覽器在你自己的硬體上完成。這個工具沒有服務端，頁面的 `Content-Security-Policy` 裡寫著它允許聯絡的每一個地址，沒有一個屬於本站。拔掉網線，它照樣分析 GIF。

### 為什麼我的 GIF 播得比延時寫的還慢？

因為所有瀏覽器都拒絕照辦小於百分之二秒的延時，改成把那一幀停十分之一秒。這條規則 1996 年寫進了 Netscape，是為當年那些轉動的地球和「施工中」標牌準備的，此後被抄進了每一個瀏覽器，從來沒人刪掉。 \
\
所以一個每幀都寫著 0.01 秒的 GIF 並不會以每秒 100 幀播放，而是每秒 10 幀，比做它的軟體所設想的慢五到十倍。這個頁面把兩個數字都擺出來，檔案寫的和它實際會做的，並標出受影響的幀。要修，就在做這個檔案的軟體裡把 0.01 寫成 0.02。

### 「處置方式」是什麼意思？

一幀的時間到了之後，螢幕上要留下什麼。動畫看起來正常還是拖影，就由這個欄位決定。 \
\
**原樣留下**意思是下一幀直接蓋在這一幀上，幀本身不透明、彼此互相遮住時就該這麼做。**清回背景**會先把這一幀的矩形擦乾淨，透明就需要它：不擦的話，下一幀透出來的部分會露出上一幀。**還原底下原有的內容**把這一幀畫之前那裡的東西放回去，靜止背景上一個小物體在動，就是這麼存的。至於**未指定**，意思是檔案沒說，而所有檢視器都按「原樣留下」處理。

### 我的 GIF 為什麼這麼大？

「位元組去了哪裡」那張表針對你這個具體檔案回答，而不是泛泛而談，可能的答案就那麼幾種。 \
\
要是幾乎全在**壓縮畫素**裡，那這個檔案就是畫面本身太多：GIF 把每一幀都當作完整畫素來存，沒有運動補償，也沒有畫質旋鈕，所以體積大約就是面積乘幀數。減少幀數、縮小尺寸、減少顏色，就這三個把手。 \
\
要是一大塊在**顏色表**裡，說明檔案在給每一幀各寫一份調色板，每份 768 位元組。要是一大塊在**後設資料**裡，那是某個編輯軟體留下了 XMP 資料包，不動畫面就能刪掉。要是所有幀都覆蓋整個畫布，說明編碼器壓根沒算過究竟哪一部分變了，而對拍攝或錄製來的內容來說，那就是檔案的絕大部分。

### 兩種幀檢視有什麼區別？

**每幀之後的畫布**是檢視器在那一刻顯示的東西：這一幀畫在前面幾幀留下的內容之上。**每幀實際存下的內容**是檔案為這一幀真正儲存的那個矩形，單獨擺出來，底下什麼都不墊。 \
\
有意思的是後者。GIF 允許一幀只存畫面裡變了的那部分，所以一個幾乎不動的視窗的錄屏可以很小。要是你檔案裡每一幀都是整塊畫布，那說明沒人做過這件事，而且光看動畫是看不出來的，只有看存下來的內容才知道。

### 它說我的檔案裡有註釋或 XMP。那是什麼？

隨畫面一起走、但任何檢視器都不會畫出來的文字。註釋塊通常是寫出這個檔案的軟體名。XMP 資料包是影像編輯軟體用來記錄自己做了什麼的 XML，裡面可能有編輯歷史、軟體版本，有時還有作者名字。 \
\
這個頁面把兩者都完整列印出來，因為關於後設資料，值得關心的是它寫了什麼，而不是它存在。這些只給你看，不給別人：這個儲存庫裡沒有任何東西會把其中內容念給誰聽。

### 壞掉的 GIF 打得開嗎？

會試，並且會告訴你它在哪裡放棄了。檔案在某個塊中間斷掉、該出現塊標記的位置換成了別的位元組、某一幀的壓縮資料提前用完，這些情況它照樣會把那之前能讀出來的全部顯示出來，並把問題寫在最上面。分析器最派得上用場的恰好就是這種時候，為了一個壞位元組把整個檔案丟掉，才是錯的。

### 它會改動我的檔案嗎？

不會。這個工具只讀。沒有輸出檔案，沒有重新編碼，這裡也沒有哪個按鈕會寫出一個 GIF，你唯一能下載的是一份純文字的分析結果。你的原件在磁碟上原封不動，這也是「關掉分頁會怎樣」的老實答案。

### 它免費嗎，需要註冊嗎？

免費，沒有帳號，不用登入，也沒有試用期。除了你自己機器的記憶體之外，檔案大小沒有上限。本站帶廣告，經費就是從那裡來的，廣告拿不到任何關於你檔案的資訊。

### 斷網能用嗎？

能。頁面載入一次之後斷開網路，它照樣運作。這也是證明「什麼都沒上傳」最省事的辦法，真要把你的 GIF 送出去分析，拔線那一刻就停了。

## 這條隱私承諾怎麼核實

- **你的 GIF 沒有出去的路。** Content-Security-Policy 裡寫著這個頁面允許聯絡的每一個地址，沒有一個屬於本站。這裡沒有任何可以收走你檔案的接收端，就算有，程式碼裡也沒有把檔案送過去的東西。這行以前寫的是 `connect-src 'none'`，那是沒有例外的。加廣告付出的代價就是它，把這句說出來也是約定的一部分。
- **讀取器就是儲存庫裡的四個檔案。** 這裡沒有用瀏覽器內建的 GIF 解碼器去弄清檔案裡有什麼，因為那個解碼器不會告訴你某個位元組去了哪裡。所以格式是手寫程式碼一步步讀出來的：`src/gif.js` 走完所有塊，`src/lzw.js` 展開畫素，`src/frames.js` 把它們疊起來，`src/budget.js` 再把各部分加回去，核對是否正好等於檔案大小。
- **註釋和後設資料只給你看，不給別人。** GIF 裡可能帶著註釋塊、描述某次編輯的 XMP 資料包，或者顏色配置檔案，這個頁面會把它們全都列印出來。它們只出現在你眼前的螢幕上，別處哪裡都不去：這個儲存庫裡沒有任何一個統計事件會捎帶這些內容，就算有，這個頁面也發不出去。
- **Google 載入了什麼，又拿不到什麼。** 廣告指令碼和統計指令碼來自 Google。關於你檔案的資訊，一條也沒有交給它們，檔案、縮圖、名字、大小、幀數、註釋都沒有。讀取、解壓、繪製 GIF 的每一行程式碼都由這個源提供，也都擺在儲存庫裡。
- **捐助按鈕載入了什麼，又拿不到什麼。** 頁首那個「Buy me a coffee」按鈕由 cdnjs.buymeacoffee.com 的指令碼畫出來，字型取自 Google Fonts。它不過是個連結，不上報訪問，也拿不到關於你或你檔案的任何東西。不點它就什麼都不會發生，點下去到的是別人的站。
- **斷網也照樣能用。** 斷開網路，這個頁面上每一部分都照常工作。這是最省事的一條證明，真要把你的 GIF 送出去分析，拔線那一刻就停了。

**你可以自己核對。**上面這些不用你信。這個頁面是儲存庫裡的模板和配置產生出來的，構建指令碼你能讀，也能自己跑一遍，跑出來的結果就提交在 `dist` 分支上。拿實際發給你的內容，跟你自己從原始碼構建出來的結果對一遍就知道了： https://github.com/A-Box-of-Tools/website

最值得先讀的幾個檔案：`config/site.toml` 裡是 Content-Security-Policy，`src/gif.js` 是逐塊走完整個檔案的讀取器，`src/lzw.js` 是解壓器，`src/budget.js` 負責位元組記帳。它們裡面都沒有一行能碰到網路的程式碼。