GIF vs 短影片：什麼時候該用哪個？
在需要展示動態內容時，你通常有兩個選擇：GIF 動圖或短影片（MP4/WebM）。兩者各有優缺點，選擇哪個取決於你的使用場景。本文將從檔案大小、畫質、相容性等面向深入比較。
GIF vs 短影片：核心差異
| 比較項目 | GIF | 短影片（MP4/WebM） |
|---|---|---|
| 檔案大小 | 大（同畫質下是影片的 5-20 倍） | 小 |
| 畫質 | 最多 256 色，無損但有限 | 數百萬色，高品質 |
| 音訊 | 不支援 | 支援 |
| 自動播放 | 自動循環播放 | 需要設定或使用者互動 |
| 瀏覽器支援 | 100% | 接近 100%（需考慮編碼格式） |
| 社群媒體 | 廣泛支援 | 廣泛支援 |
| 頻寬消耗 | 高 | 低 |
| 互動性 | 無（純圖片） | 可暫停、拖動、全螢幕 |
關鍵數據：根據 HTTP Archive 的數據，一個典型的 GIF 動圖平均約 1-5 MB，而同樣內容的 MP4 影片通常只需 200-500 KB。在網頁效能方面，影片幾乎總是更好的選擇。
什麼時候該用 GIF？
1. 短小的反應圖和迷因
GIF 的文化意義使它在社群互動中無可取代。「發一個 GIF」已經成為表達情緒的標準動作，這是短影片無法替代的社交功能。
2. 簡單的 UI 動畫展示
在技術文件或教學中展示一個按鈕動畫或載入效果，GIF 是最直接的方式。它不需要播放器，直接嵌入就能顯示。
3. 不支援影片的平台
某些平台（如部分論壇、電子郵件）不支援嵌入影片，但支援 GIF。在這些場景中，GIF 是唯一的動態圖片選擇。
什麼時候該用短影片？
1. 網頁效能優先
如果你在乎網頁載入速度和 Core Web Vitals 分數，用影片取代 GIF 是最簡單的優化方式。Google 的 Lighthouse 審計工具會特別標記大型 GIF 並建議使用影片替代。
2. 需要高畫質
產品展示、教學影片、螢幕錄製等需要高畫質的場景，256 色的 GIF 無法勝任。影片支援數百萬色和更高的解析度。
3. 內容較長
超過 5 秒的動態內容，使用影片幾乎總是更好的選擇。GIF 的檔案大小會隨時長線性增長，而影片的壓縮效率隨時長增加而提高。
HTML 中的最佳實踐
如果你想在網頁中獲得「GIF 般」的自動播放體驗但使用影片格式，可以使用以下 HTML 標籤：
- 使用
<video autoplay loop muted playsinline>標籤 - 提供 WebM 和 MP4 兩種格式作為 fallback
muted屬性是自動播放的必要條件（瀏覽器政策要求）playsinline屬性防止 iOS Safari 自動進入全螢幕
結語
GIF 和短影片各有其最佳使用場景。在社群互動和簡單展示中，GIF 的便利性和文化價值無可取代。在網頁效能和畫質要求較高的場景中，影片是更好的選擇。理想的做法是根據內容和平台選擇最合適的格式。
參考文獻
- HTTP Archive. "State of Images." Web Almanac, 2023. https://almanac.httparchive.org/en/2022/media
- Cloudflare. "How to improve website performance by replacing GIFs with videos." Cloudflare Blog, 2023. https://blog.cloudflare.com/
- Google. "Replace animated GIFs with video for faster page loads." Web Fundamentals, 2024. https://web.dev/replace-gifs-with-videos/
- Google. "Lighthouse performance audits." Chrome Developers, 2024. https://developer.chrome.com/docs/lighthouse/performance/