這個頁面的程式碼沒跑起來。

直接從資料夾裡開啟 index.html,瀏覽器會攔下 JavaScript 模組,於是你選好一個 GIF 之後,頁面不會有任何反應。改用 http 把這個資料夾提供出去:

powershell -ExecutionPolicy Bypass -File serve.ps1

然後開啟 http://localhost:8080/。

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

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

語言: 繁體中文
檢視原始碼
你的 GIF 不會上傳。這裡根本沒有伺服器。

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

即時檢查: 檢查中…

離線: 檢查中…

不用信我們說的。開啟開發者工具,盯著「網路」面板,分析一個 GIF 試試。沒有哪個請求帶上圖片、縮圖,或者檔名。嫌麻煩就直接拔掉網線,照樣分析。

選一個 GIF

以 Markdown 檢視

GIF 分析的步驟

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

說得更細的版本

一個 GIF 裡到底裝著什麼 幀、延時、處置方式和調色盤都講清楚:瀏覽器為什麼不認最短的延時,以及怎麼查出一個 GIF 的體積究竟花在了哪裡。

常見問題

我的 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 送出去分析,拔線那一刻就停了。