簡短的回答
開啟 GIF 製作,把圖片拖進去,按它們該播的順序排好,設定每一幀停留多久,然後做出 GIF。你還沒儲存,它就已經在頁面上轉起來了。
底下講的全是隨後會出差錯的那兩件事:檔案比預想的大得多,或者動畫比你填的數字放得慢。兩件都有明確的原因,也都不是工具的毛病。
為什麼 GIF 比你以為的大那麼多
640 畫素、20 幀的 GIF,動輒 8 到 15 MB。同一段動畫換成 MP4 是幾百 KB。那不是 GIF 做得差,那就是這個格式本身。
你用過的其他一切活動畫面格式,存的都是差異。影片編碼器寫下一整幀,之後的幀只寫什麼動了、動到哪裡去了——所以一個人站在不動的背景前說話,那段影片每幀幾乎不花錢。GIF 做不到這個。每一幀都是按整塊畫素存下來,過一遍無失真壓縮器,工具箱裡就這麼多。
也沒有畫質設定,因為壓根沒有一道有損環節可供你往下調。60 % 品質的 JPEG 是一個後面真有滑塊的真選擇;GIF 沒有對應的東西。所以體積大致是面積 × 幀數,想撬動它,就只能去撬這兩個數中的一個。
真正能讓它變小的三件事
按它們管用的順序:
1. 把它做小。這不是幾個選項中的一個,這就是那個選項。體積隨面積走,所以把長邊砍一半,檔案就剩四分之一:640 px 降到 320 px,12 MB 就成了大約 3 MB。網頁裡、聊天視窗裡的 GIF,本來也就是按幾百畫素在看。工具的預設值是 480 px,正是為了這個;而 320 px 是個完全體面的答案。
2. 少用幾幀。十幀、每幀停五分之一秒,和二十幀、每幀十分之一秒,是同樣的兩秒動畫,而檔案只有一半。流暢是按比例直接拿位元組換的,所以只在動作真需要的地方花它。
3. 關掉抖動,把顏色降下來。這一條反直覺。抖動會撒下一層細密的交替畫素,去假裝調色盤裡沒有的顏色,而那層花紋就是雜訊——恰恰是無失真壓縮器壓不動的東西。在平塗的圖形、截圖和線稿上,把它關掉能減掉三分之一的檔案,還常常更好看。在照片上,它是拿看得見的色帶去換這份省下來的體積,所以兩種都試試,用眼睛判斷。
從 256 色降到 64 色也有用,只是沒人們盼的那麼多:它縮短的是碼字,而不是拿掉畫素。
要是這些都還不夠小,誠實的回答是:你在做的其實是一段影片。把同樣這些圖片做成 MP4,大概只有十分之一的體積;而凡是接受 GIF 卻不是用在 <img> 標籤上的地方——包括每一個社交網路——上傳時反正都會把它轉成影片。
GIF 到底能放多快
這個格式把每幀的延時按百分之一秒來存,這讓人覺得你可以要 0.01 秒、拿到每秒一百幀。你拿不到。
每個瀏覽器都會把低於百分之二秒的延時抬到十分之一秒。這條規矩來自 1990 年代,當時的頁面上塞滿了「越快越好」的動畫,而那個年代的機器扛不住;它引入時的所有理由早已不復存在,規矩卻從沒被拿掉,今天照樣管著你的 GIF。
所以實際可用的區間是:
- 0.02 秒(每秒 50 幀)——GIF 被允許的最快值,而且通常比需要的還快。
- 0.05 秒(每秒 20 幀)——順滑的動畫;要做運動,從這裡起步。
- 0.1 秒(每秒 10 幀)——經典的 GIF 味道。幀數減半,檔案減半,而且看上去像是有意為之。
- 0.5 秒往上——那是投影片。每張圖是被看的,不是被動起來的。
低於 0.02 秒的值這裡不提供,因為那是個在現存每一個瀏覽器裡都會悄悄變成 0.1 秒的數。
調色盤,以及它其實在挑什麼
GIF 的一幀最多裝 256 種顏色。一張照片有幾萬種。總得有誰從中挑出 256 種,而那次挑選決定了成品看起來什麼樣——比任何別的設定都決定得多。
工具給了兩種挑法:
每幀各挑最合適的顏色,給每張圖它自己的 256 色。這看起來最銳利,而且對一組彼此無關的照片來說是對的:反正每張要的本來就是完全不同的一套。
整個 GIF 共用一張調色盤,是把所有幀放在一起造出一張表。當這些幀是一個連續序列時用它——同一個場景,隔著幾個瞬間。用逐幀調色盤的話,畫面上任何一點變化都會改變被選中的是哪 256 色,於是整片背景每幀都輕輕挪一點顏色。那種抖動,正是讓一個自制 GIF 一眼看上去就很自制的東西。共用調色盤把它去掉了,還順帶讓檔案更小,因為那張表只寫一次,而不是每幀都寫。
更少的顏色——128、64、32——在任何平塗的東西上都值得試。一個只有八種顏色的標誌動畫,降到 32 色什麼都不會丟;而照片上的差別,一眼就看得出來。
透明只有一位,故事到此為止
GIF 的一個畫素,要麼整個塗上,要麼整個看不見。中間什麼都沒有:沒有 50 % 的陰影,沒有柔和的邊,沒有漸隱。
所以要是你的原圖帶透明,把透明開啟會讓透明的地方仍然透明——但每一條抗鋸齒的邊,那本是從形狀漸變到虛無的過渡,都會在半途被一刀切成硬的、看得出鋸齒的邊。圓形和文字受害最深。
要是你知道這個 GIF 會擺在什麼顏色上,把它壓到那個顏色上,每次都會更好看。只有在落地的背景真的不知道時,才留著透明——而如果答案是「它在任何背景上都得有柔邊」,那對應的格式是動圖 PNG 或者 WebP,不是 GIF。
順序、時間,以及讓循環接得住
幾件事,知道比自己撞上要快得多:
按名字排序數得對。渲染或者匯出的連號會按你本來的意思排,所以 frame_2 落在 frame_10 前面,而不是後面。按日期排序會把相簿還原成拍攝的先後,那正是檔名從 0001 重新開始時你想要的。
最後一幀留久一點。每幀都一樣長的循環,讀起來緊追不捨。把最後一幀按住半秒左右,眼睛就有了落腳的地方,整件事看上去也像是有意為之。每一幀都有自己的停留時間,就是為了這個。
循環不該跳。最後一幀後面緊接著就是第一幀,所以這兩幀差得遠,循環就會「啪」的一下。要麼讓它們靠近,要麼按住最後一幀,把這個切口用成一種手法。
只播一次就是只播一次。有些工具會寫下「循環 1 次」,而各家解碼器從來沒就這個完全談攏——有幾個會播兩遍。這裡選「只播一次」,寫下的是根本沒有循環資訊,而對這一點,有史以來的每個解碼器處理起來都一樣。
為什麼這件事不需要伺服器
做一個 GIF 是兩件瀏覽器沒提供的工作:挑調色盤,和用 LZW 壓畫素。兩件都不大。加起來大約四百行,在儲存庫裡原樣寫著,而且和這裡的其他一切一樣跑在你自己的機器上——網線拔了這一頁照樣能用,原因就在這裡。
那麼多 GIF 工具要你上傳,不是因為這工作難。是因為伺服器才是廣告和帳號待的地方。把一疊照片變成一段動畫,這件事的任何一步,都不要求你的照片離開它們所在的房間。
把檔案傳給線上轉換器安全嗎?那一頁列了四條檢查,它們會告訴你關於任何工具的同一件事,也包括這一個。