為動態 GIF 加上文字，代表在迴圈動畫的每一個完整影格上繪製單一可見的字幕，然後把結果匯出成新的 GIF 檔。為了讓影像在播放時字幕仍然清楚易讀，字幕通常會以白色繪製並加上深色外框，置中於同一行，並依照動畫的邏輯畫布尺寸縮放，而不是依檔案中的原始位元組縮放。由於 GIF 是把每一個影格儲存成完整影像、局部更新矩形、透明資訊與清除指令，文字只有在工具先把每個影格合成為檢視者應該看到的完整畫面、在疊加任何東西之前，才會看起來正確。這個單一的合成步驟，正是加了字幕卻能保留原本背景的 GIF，和播放時出現殘影、區塊缺漏或條紋的 GIF 之間的差別。了解這點就能明白為什麼會有以瀏覽器為基礎的字幕工具，也為什麼一款專注的編輯器——在每個可見影格上繪製單一帶外框的字幕，然後在本機重新編碼——會是在不上傳的情況下為動態 GIF 加上字幕最可靠的方式。
如果你曾經試著在一般的照片編輯器裡把文字疊加到 GIF 上，然後眼看著迴圈變得支離破碎——移動物體原本的位置留下一道像素殘影、一條被清除的背景條紋，或是前一格淡淡的重影——那你就已經碰過 GIF 合成的問題了。這不是你的檔案有瑕疵，而是這個格式為了省空間所採取的方式，而這也正是專門的 為 GIF 加上文字 工具設計要填補的缺口。這個頁面不會假裝自己是完整的設計編輯器，這種專注正是它的重點:每一格畫一條置中且帶外框的文字，全程在本機處理，下載成由你掌控的新檔案。
為什麼動態 GIF 比一疊照片更難處理
GIF 不是一個裝著獨立圖片的資料夾。這個格式被設計來維持較小的檔案大小，做法是允許每個影格以完整影像、變動的小區塊，或帶有透明與清除指令的方式儲存，告訴下一格要保留、清除或從畫布中較早的區域還原什麼。當你只編輯檔案提供的矩形區塊來「在 GIF 上繪圖」時，你最後可能會得到一個影格，缺少那些本應被保留下來的背景部分。
在繪製任何字幕之前，可靠的工具會解碼影像區塊套用每個影格的清除行為，然後重建出檢視者應該看到的完整邏輯畫布。只有在這塊畫布組合完成之後，它才會繪製字幕，並把新的影格交給 GIF 編碼器。這就是為什麼兩個工具能處理同一個來源檔，卻產生明顯不同的輸出:一個編輯的是原始矩形，另一個編輯的是合成後的影像。
瀏覽器的畫布文字繪製基本元素也是遵循同樣的概念。CanvasRenderingContext2D fillText 方法 負責放置字型輪廓，而搭配的 strokeText 呼叫 則畫出深色外框，讓字幕在忙碌的背景上仍然清晰可讀。字型大小本身是依畫布尺寸與字幕長度計算，因此文字會留在邏輯畫布之內，而不是加上黑色橫條把動畫撐高。
在瀏覽器中為動態 GIF 加上文字
整個工作只需要三次點擊和一段簡短的文字。工具在你目前的分頁中執行，因此 GIF 從未上傳到任何地方;解碼、合成、繪製、編碼與下載 Blob 全部都在本機完成。
- 開啟「為 GIF 加上文字」頁面，從你的裝置選擇一個大小不超過 20 MB 的動態 GIF。
- 在文字欄位中輸入不超過 80 個字元的字幕，然後選擇字幕位置為頂部、置中或底部。
- 選擇「為 GIF 加上文字」，讓工具以帶外框的字幕重建每一格，在預覽中檢視完整迴圈，然後下載新的已加字幕 GIF。
這就是在目標為「一條可讀的文字、在每個可見影格上都待在同樣位置」時，為動態 GIF 加上文字的完整工作流程。如果結果看起來不對，更換字幕或位置再執行一次即可;替換檔案或編輯字幕會取消任何進行中的作業並移除先前的結果，讓你不會不小心下載到過期的輸出。
字幕位置、長度與樣式一覽
提供三種位置選擇，每一種適合不同類型的訊息。由於字幕會在每個可見影格的相同位置繪製，一開始就選對位置可以省去第二次作業。
| 位置 | 字幕所在位置 | 最佳用途 |
|---|---|---|
| 頂部 | 沿著畫布上緣置中 | 標題、標頭、鋪陳句子 |
| 置中 | 沿著畫布中央置中 | 簡短反應、單字標註 |
| 底部 | 沿著畫布下緣置中 | 副標、字幕說明、情境說明 |
字幕是單行白色文字加上深色外框，大小會依據畫布尺寸與字幕長度自動調整。外框正是讓文字在亮色與暗色背景上都能保持清晰的原因，因此你不需要再加上自己的方框或陰影。文字會被限制在動畫的邏輯畫布內，代表字幕不會把 GIF 撐高或撐寬;它只會疊在畫面之上。
字句請保持簡短。80 字元的上限有其道理:較長的字幕會迫使字型變小，而非常小的文字在 GIF 被縮成聊天視窗或動態消息適合的大小後，就會變得難以閱讀。挑選一個即使 GIF 被縮成聊天縮圖或表情符號大小的反應圖時仍能清楚呈現的詞句。單一短詞或四到六個字的句子通常最為可靠;更長的內容會迫使字型變小，在 GIF 被縮小後就更難閱讀。
開始前值得確認的硬性限制
以瀏覽器為基礎的編輯器無法接受網路上所有類型的 GIF，這些安全限制是為了避免頁面嘗試配置超過分頁能處理的像素工作量。如果這些數字中有任何一個過大，工具會回傳錯誤，並且不會留下任何部分下載。
| 限制 | 最大值 |
|---|---|
| 選擇的 GIF 檔案大小 | 20 MB |
| 畫布寬度或高度 | 4,096 像素 |
| 單一影格的像素數 | 3,000,000 |
| 動畫中的影像影格數 | 50 |
原本使用極小更新矩形的 GIF，在經過全幅重新編碼後，檔案大小也可能會變大，即使它在磁碟上的原始大小較小也一樣。頁面會回報實際的輸出大小，但並不保證一定會產生較小的檔案。如果來源動畫的影格數或畫布超過上限，就無法直接處理，因此超過這些數字的檔案必須先在另外的步驟中分割或裁剪，字幕工具才能接受。
分享前檢視已加字幕的結果
輸出是一個全新的 GIF，而不是就地修改位元組的結果，這在兩個方面很重要。第一，匯出會保留來源的可見影格順序與每格延遲，因此動畫的播放速度仍與原本一致。第二，原始的調色盤表、註解區塊、應用程式擴充與原本的迴圈次數都不會被保留，因為每個影格都已經重新量化到新的 GIF 調色盤，以容納繪製上去的字幕。
下載前，請至少在預覽中看過一個完整的迴圈。檢查的項目都是實際可操作的:
- 小字在 GIF 實際顯示大小下仍清楚可讀。
- 選擇的位置不會遮住動畫的主要主體。
- 轉場仍然正確，沒有移動物體原本位置出現可見的殘影。
- 細膩的漸層或照片在調色盤轉換後沒有出現條紋化。
在實際使用該 GIF 的應用程式或聊天視窗中檢視下載後的動畫再發布，因為瀏覽器的字型呈現、色彩管理與 GIF 解碼器在各家平台之間都有些微差異。如果另一個位置閱讀起來效果較好，請改變位置並以原本的來源檔重新執行工具，而不是嘗試重新為已加字幕的 GIF 再加一次字幕。瀏覽器的色彩管理與字型呈現也會因作業系統而略有不同，因此在桌面預覽中看起來清晰的字幕，在手機螢幕上可能會變得模糊;在實際呈現大小下快速測試，能在 GIF 被分享前抓出大多數的可讀性問題。
對於簡短的反應字幕、在聊天應用程式中分享的 GIF，或快速的迷因式標註，以上的工作流程通常已經足夠。若是較長的解說文字、多層標題，或是會在迴圈中出現與消失的動態文字，你需要的是完全不同的工具;這個工具讓字幕在每一格上都保持靜止且相同，讓迴圈維持可預測。
想進一步了解，請參閱 如何在瀏覽器中將 WebP 檔轉成 GIF。