一款基於瀏覽器的 GIF 製作工具可以在動態 GIF 的每個可見影格上放置一則最多 80 個字元的單行外框字幕,整個解碼並重新編碼的流程完全在本機執行,無需上傳檔案。該工具會從你的裝置讀取 GIF,在畫布上重建每個可見影格,在你指定的位置繪製一整行白色文字並加上深色外框,然後回傳一個全新的 GIF 供你下載。由於資料完全不會送到伺服器,因此不需要建立帳號,事後也不用裁掉浮水印,更不必排隊。代價是功能範圍:這是一款專注於字幕的工具,並非完整的影片編輯器,因此每個影格只繪製一行,無法處理多層文字、自訂字型或個別影格的時間設定。如果你的目標是乾淨的標題、反應句,或是整個動畫中位置固定不變的標註文字,這款工具正是為此設計,僅此而已。
基於瀏覽器的工具實際能做什麼
為 GIF 加上文字工具可接受來自你裝置、大小不超過 20 MB 的動態 GIF,在邏輯畫布的上方、中央或下方為每個可見影格繪製一則簡短字幕,並匯出一個可從頁面直接下載、持續循環播放的新 GIF。字幕是透過 HTML 畫布上的 fillText 與 strokeText 來繪製,這就是文字呈現白色並帶深色外框、在大多數一般背景上都能保持清晰可讀、而不需要在背後加上一塊實心色塊的原因。
輸出結果由三項屬性定義:
- 一行,一種樣式。同一則字幕會在每個可見影格重複出現,因此並不支援影格之間閃爍、淡入淡出或捲動的訊息效果。
- 一個邏輯畫布。文字被限制在影像範圍內;工具並不會以新的邊框、上下黑邊或留白條來延伸動畫。
- 一個新檔案。匯出的是一個全新編碼的 GIF,而不是在原始輸入檔上進行位元層級的修補。
如何使用 GIF 工具加上文字
整個工作流程包含三個明確步驟與一次檢視確認:
- 從你的裝置選擇一個動態 GIF。檔案大小上限為 20 MB,其邏輯畫布任一邊的像素不得超過 4,096 像素,單一影格的像素總數不得超過 300 萬像素,且影格數不得超過 50 個。
- 輸入一則簡短字幕(最多 80 個字元),然後選擇字幕位置:頂部、中央或底部。請盡量讓訊息簡短;字型大小是依據畫布尺寸與字幕長度計算,較長的詞句會自動縮小以容納進去,而不是自動換行。
- 選擇「Add text to GIF」,在預覽中至少觀看一個完整的循環播放,然後下載產生的動畫。替換檔案或編輯字幕會清除先前的結果,因此不會誤把舊的下載檔當成新設定的結果。
為什麼工具要在繪製前先合成影格
動態 GIF 並非由一疊彼此獨立的圖片組成。一個檔案可能先儲存一張完整影像,接著只儲存小幅變動的矩形區塊,其中包含透明設定與處置指令,用以告訴下一個影格應該保留像素、清除某個區域,或還原回先前的畫布狀態。若直接將文字繪製在原始矩形上,加上字幕後的輸出會出現背景消失,或在移動的主體後方留下殘影。為了避免這種情況,工具會先解碼每個 GIF 影像區塊、套用前一個影格的處置行為,並重建出檢視者實際應該看到的完整邏輯畫布。然後才會在這個完整影格上繪製外框字幕,這也正是字幕能在整個動畫中看起來穩定的原因。
同樣的理由也說明了為何匯出的是一個新 GIF,而非原地編輯。GIF 使用調色盤,而加上文字會改變每個影格的像素,因此瀏覽器會將每個加上字幕的影格量化為 GIF 調色盤,並寫入一個持續循環播放的新動畫。解碼後的可見影格與個別影格的延遲時間會被保留,但原始的調色盤表、註解、應用程式擴充、位元層級的最佳化設定,以及有限循環次數等則不會保留。各平台的瀏覽器色彩管理與字型呈現也可能略有差異,這就是為什麼工具會要求你在預定的顯示尺寸下檢視下載下來的動畫。
硬性限制與輸出大小
工具強制實施一組小範圍的硬性限制,以避免瀏覽器被要求解碼一個在解壓縮後遠超出其處理能力的壓縮檔案。完整限制屬於產品合約的一部分:
| 限制項目 | 數值 |
|---|---|
| 輸入檔案大小 | 上限 20 MB |
| 邏輯畫布寬度或高度 | 每邊上限 4,096 像素 |
| 邏輯畫布面積 | 每個影格上限 3,000,000 像素 |
| 影像影格數 | 每個動畫上限 50 個 |
| 字幕長度 | 上限 80 個字元 |
| 位置 | 僅限頂部、中央或底部 |
任何超出這些範圍的情況都會產生明確的錯誤訊息,且不會保留任何先前的輸出結果。回報的輸出大小就是新檔案的實際大小;工具並不保證結果會變小。原本以極小的更新矩形最佳化的 GIF,在經過全幀重新編碼後通常會變大,因為現在每個影格都是一張完整的影像。如果加上字幕後的檔案比預期更大,另一篇關於在不失品質的前提下縮減動態 GIF 檔案大小的教學會涵蓋下一步的做法。
這款工具無法做到的事
當你即將發布或傳送一支加上字幕的影片時,如實說明功能範圍相當重要。這款工具刻意只涵蓋狹窄的範圍:
| 它能做到 | 它做不到 |
|---|---|
| 在每個可見影格上放置一則外框字幕 | 堆疊多層文字圖層或個別影格的字幕 |
| 保留解碼後的可見影格與個別影格的延遲時間 | 保留原始的調色盤表、中繼資料或有限循環次數 |
| 完全在目前的瀏覽器分頁中執行 | 將 GIF 上傳到伺服器或要求登入帳號 |
| 匯出一個新的循環 GIF 供下載 | 產生 MP4、WebP,或進行原地位元編輯 |
| 將每個加上字幕的影格量化為 GIF 調色盤 | 保證檔案變小或社群網站的相容性 |
| 在輸入無效時停止並顯示明確錯誤 | 修復損壞的 GIF 或推斷理想的訊息內容 |
此外,這款工具也不會在頁面關閉後永久保留任何檔案,不會保留音訊,也不會在每個瀏覽器的字型呈現與色彩管理下表現得完全一致。
下載前的快速品質檢查
簡短的檢視流程能在字幕問題進入聊天室或動態消息前就先抓出大多數狀況:
- 在預覽中至少觀看一個完整的循環播放,接著在預計張貼檔案的應用程式中再看一次。轉場與處置效果以動態方式判斷會比靜態縮圖來得更容易。
- 確認所選的位置不會遮住重要的主體。底部字幕可能會擋住標誌或手勢;頂部字幕可能會落在頭髮或標誌上方;中央字幕則是三者中最具干擾性的。
- 以動畫實際顯示的大小閱讀字幕。細微的漸層與相片在經過調色盤轉換後可能會產生色差,而非常小的 GIF 可能沒有足夠的像素來呈現清晰的文字。
- 留意輸出大小。如果新檔案比原始檔案大上許多,在分享前先將加上字幕的結果交給另一個獨立的 GIF 最佳化工具處理。
- 保留原始的 GIF。這款工具永遠不會直接編輯來源檔,因此你可以隨時回到未加字幕的版本,嘗試不同的位置。
如此一來,整個工作流程就有一個明確的完成界線:加上字幕、預覽、檢查,然後才發布或傳送。
延伸閱讀:在瀏覽器中從圖片製作 GIF。