GIPHY 風格的字幕，指的是一行簡短的白色文字，帶有深色描邊，置中出現在一個動態 GIF 每一格畫面的頂端、正中央或底部。你可以用為 GIF 加上文字這個工具，在瀏覽器中為你本機的任何 GIF 加上這種字幕，而不需要上傳檔案；這個工具會解碼每一格畫面、組合出觀眾應該看到的完整可見畫布、在上面畫出帶描邊的字幕，然後把結果重新編碼成一個全新的 GIF，讓你從裝置上下載。這種外觀，就是大多數人聯想到通訊軟體裡那種反應圖字幕的樣子：一句簡短的話——通常不到十個字——用來點出這個瞬間、加上一句妙語，或標示畫面上正在發生的事，不需要帳號、不需要排隊，也沒有伺服器端的編輯器在處理你的來源檔案。整個流程都不要求這個 GIF 離開你的裝置，所以從你選取檔案的那一刻起，一直到你選擇下載新版本為止，原始檔案都留在你的機器上。
GIPHY 風格的字幕實際上長什麼樣子
大多數人所說的「GIPHY 風格」，範圍比完整的設計編輯器要窄得多：一行置中的粗體白色文字，帶有深色描邊，尺寸要能在 GIF 的分享尺寸下清楚易讀，並且放在畫面的其中一個邊緣，或正中央。這句話幾乎總是很短——一個標題、一句反應、一句妙語，或一個標籤——因為更長的內容會擠壓畫面，讓畫布得配合文字調整，而不是反過來。「為 GIF 加上文字」這個工具，鎖定的正是這種風格。它接受最多 80 個字元的字幕，用白色搭配深色描邊畫出來，讓它在許多常見的背景上都保持清楚易讀，並讓你選擇「頂端」「置中」或「底部」作為位置。字型大小是依照畫布尺寸與字幕長度計算出來的，而不是固定的像素大小，所以在一段高瘦的反應短片上放一個短詞，不會膨脹成一整條橫幅，而在一個小小的貼圖 GIF 上放一個長句子，也不會消失不見。這正是你在通訊軟體中，看到疊加在反應 GIF 上的那種字幕的樣子：一行、置中、一眼就能看清楚，而且在動畫還沒來得及分散你的注意力之前，就已經呈現完畢。
為什麼在瀏覽器本機編輯適合這項工作
為 GIF 加上文字是一件小型、一次性的編輯工作，大多數人並不想為了在一段反應短片上加個字幕，就得安裝桌面軟體、填寫註冊表單，或把檔案放到別人的伺服器上。「為 GIF 加上文字」這個工具完全在你目前的瀏覽器分頁中執行。GIF 解碼、畫面合成、畫布文字繪製、編碼，以及下載用的 Blob，全部都在本機完成——沒有上傳、沒有帳號、沒有排隊、沒有浮水印，也沒有伺服器端的編輯步驟。這很重要，因為來源檔案、解碼後的畫面、畫布像素，以及輸出的 Blob，都只會留在你的裝置上，除非你明確選擇下載結果。如果你改變主意想換一句字幕，或選擇了另一個 GIF，任何舊的工作都會被取消，先前的結果也會被移除，這樣一份過期的下載檔案，就不會被誤認成新的設定產生的結果。當你想幫一個內含螢幕截圖、內部圖片，或任何你不想交給第三方的素材的 GIF 加上字幕時，同樣這種只在瀏覽器內完成的做法就很有用。若想看同一種私密工作流程的另一份對照說明，請參閱不需要應用程式或上傳、就能為 GIF 加上文字這篇指南。
用三個步驟加上 GIPHY 風格的字幕
- 在「為 GIF 加上文字」頁面上，用檔案選擇器，從你的裝置中選取一個最多 20 MB 的動態 GIF。
- 在字幕欄位中輸入一句最多 80 個字元的簡短字幕，然後選擇「頂端」「置中」或「底部」，決定帶描邊的文字要出現在每一格可見畫面的哪個位置。
- 選擇「為 GIF 加上文字」，讓瀏覽器組合出每一格完整的可見畫布、畫上帶描邊的字幕，並重新編碼成一個新的循環播放 GIF，接著在下載結果之前，至少完整觀看一次循環播放的預覽。
從選取檔案到磁碟上出現一個已加上字幕的 GIF，整個流程就是這樣。如果檔案大於 20 MB、邏輯畫布的任一邊超過 4,096 像素、單一畫面的像素數超過三百萬，或這個動畫的畫面數超過 50 格，這個工具就會停下來，顯示一則明確的錯誤訊息，且不會留下任何先前的輸出結果生效。更換檔案或編輯字幕，都會取消任何舊的工作並移除先前的結果，所以下一次下載一定會反映目前的設定。
這個編輯器會保留什麼、又會取代什麼
一個動態 GIF，比一疊各自獨立的圖片要複雜得多。一個檔案可以先放一張完整影像，接著放好幾個小型的更新矩形區塊，可以使用透明度，還可以攜帶處置指令，告訴下一格畫面要保留像素、清除某個矩形區域，還是還原成較早的畫布狀態。如果直接在原始的矩形區塊上畫文字，會讓加上字幕後的輸出看起來像是背景消失了，或出現殘影，所以這個工具會先把每一個 GIF 影像區塊，組合成觀眾應該看到的完整邏輯畫布，然後才在這張完整畫面上畫出帶描邊的字幕。這個匯出過程刻意設計成產生一個全新的 GIF，而不是就地修改位元組，這代表瀏覽器會把每一格加上字幕後的完整畫面，量化成一份最多 256 色的全新調色盤，並寫成一個持續循環播放的動畫。有些屬性會隨著檔案保留下來，有些則不會。
| 屬性 | 匯出時會保留 | 匯出時會被取代或捨棄 |
|---|---|---|
| 解碼後的可見畫面順序 | 是 | — |
| 各畫面的顯示延遲時間 | 是 | — |
| 循環播放行為 | 持續循環播放 | 原本的有限次循環設定不會被保留 |
| 原始調色盤資料 | — | 每一格都重新量化成全新的調色盤 |
| 註解與應用程式擴充區段 | — | 重新編碼時會被移除 |
| 位元組層級的最佳化選擇 | — | 完整畫面重新編碼，沒有漸進式的差異修補 |
| 來源中繼資料 | — | 不會保留在輸出的 Blob 中 |
請把原始 GIF 當成唯一的真實依據，把匯出的檔案當成加上字幕後的版本。如果你想完整保留原本的動畫，請在開始之前先保留好來源檔案，之後不論何時需要不同的字句或位置，都可以再從它重新製作出加了字幕的版本。
為什麼匯出的檔案最後可能會變得更大
加上文字會改變每一格畫面的像素內容，所以加上字幕後的版本，會重新量化並重新編碼，而不是直接補回原始的位元組。有些原本用微小更新矩形區塊做過最佳化的 GIF，在完整畫面重新編碼之後常常會變大，因為現在每一格畫面帶的都是整張可見畫布，而不是一小塊有變動的區域。頁面會在編碼完成後回報實際的輸出檔案大小，但並不保證檔案會變小。細緻的漸層與照片，在經過調色盤轉換後，也可能會有些微變化，因為每一張完整畫面都被限制在最多 256 色之內。
文字本身，是用瀏覽器標準的畫布文字繪製方式畫出來的：白色填色是在 CanvasRenderingContext2D 上用fillText畫出來的，深色描邊則是用對應的strokeText呼叫畫出來的，這樣字幕在許多常見背景上都能保持清楚易讀，而不需要另外加上背景色塊。字型大小是依照畫布尺寸與字幕長度推算出來的，文字被限制在邏輯畫布範圍內，而不會用新的邊框去延伸整個動畫。用來繪製字幕的這兩個畫布方法，在 MDN 上分別記載於CanvasRenderingContext2D.fillText與CanvasRenderingContext2D.strokeText，這也是為什麼瀏覽器的字型呈現在不同平台之間可能會有些微差異，值得在下載後的動畫預期的顯示尺寸下再檢查一次。
分享之前先檢查加了字幕的 GIF
下載完成之後，請在檢視器中開啟這個新檔案，或把它放進預定要使用的地方，並完整看過一次循環播放。瀏覽器、你的作業系統，以及目的地應用程式，彼此在文字與 GIF 調色盤的呈現上都可能會有些微差異，所以請在預定的顯示尺寸下檢查這個動畫，再進行發布。確認這行小字幕在實際的分享尺寸下仍然清楚易讀，確認所選的位置沒有遮住畫面中重要的主體，也確認在考量處置方式的合成步驟之後，各畫面之間的轉換看起來仍然正確。如果來源 GIF 非常小，可能沒有足夠的像素，讓自動縮放的字幕保持清晰，這種情況下換一句更短的字句，或使用更大的來源檔案，效果會比較好。這個頁面不會修復損壞的 GIF，不會保留音訊，不會建立 MP4 或 WebP，不會幫你推測理想的訊息內容，也不保證與社群網站相容，所以請規劃好留著原始的 GIF，以備日後想重新加上字幕或重新編碼這段動畫。如果目前的瀏覽器無法解碼所提供的 GIF，或無法配置所需的畫布，這個工具會停下來，顯示一則明確的錯誤訊息，且不會留下任何先前的輸出結果生效，所以你絕不會拿到來自先前執行過程、下載到一半的檔案。