═══ 動畫圖的正解是 WebP ═══

2026年5月9日 · 閱讀時間約 5 分鐘 ┊ 純文字版

最近看到 Shuyu 和 Eddie 在各自的 Blog 上都提到了關於 GIF 動畫圖的問題。讓我來分
享一下我的做法。

（這是一張長達 10 秒鐘的循環動畫圖，檔案大小只有 659 KB！）

[crepe-360-10fps-q70-e76186]

◆ GIF 很老​

有很長一段時間，GIF（Graphics Interchange Format，圖像互換格式）是唯一能在網頁
上顯示動畫的圖片格式，這也是為什麼「GIF」成為了動畫圖的代名詞。

但問題是，GIF 格式非常老舊，1987 年發明，最後一次更新是 1989 年（其實好像也還好
，沒有我老？）。如果只是用在 88x31 的小按鈕就算了，但現代人使用動圖的習慣非常「
奢華」──長寬動不動就 500 px 起跳、每秒 30 格（台灣的講法是「影格╱畫格╱張」都可
以，但不是「幀」唷）──用 GIF 來存的話，檔案大小瞬間就會爆掉。

小秘訣

如果一定要用 GIF 格式，但還是想讓檔案盡可能小一點，試試看用 Gifsicle 這個軟體來
最佳化（不是「優化」喔）！

◆ 改用 MP4？氣質不對​

一個解決方式是直接插入 MP4 影片檔。不過 Markdown 中沒有插入影片的原生語法，每次
都要手寫 HTML <video> 標籤，有點麻煩。

而且，我覺得影片檔的「氣質」就是跟動圖不一樣。就算把播放控制列關掉、設定成循環
播放，味道就還是不太對，沒有動圖那種完美的無縫循環感。更別說動圖還支援設定「每
格[DEL:幀:DEL]獨立」的延遲時間，可以做出影片格式無法呈現的節奏感。

另外，影片檔如果有聲音，瀏覽器就不會讓它自動播放，得在程式碼裡額外設定成靜音；
可能還會需要加 playsinline，才能讓某些手機瀏覽器就地播放，而不是跳到全螢幕。

◆ 動畫圖的正解是 WebP​

WebP 是 Google 在 2010 年推出的開放圖片格式，同時支援靜態圖和動畫，而且壓縮效率
比傳統格式好非常多。

因為 WebP 是真正的「圖片」，所以你只要用 Markdown 寫 ![哈囉可麗餅](cat.webp) 或
一個普通的 <img> 標籤就可以直接插入了。它會自動循環，不需要任何奇怪的
JavaScript，也沒有累贅的播放介面。用起來就像 GIF 檔案一樣簡單，但檔案小非常多！

想把影片轉成 WebP 動畫圖片，只要一行 FFmpeg 指令就搞定：

ffmpeg -i input.mp4 -vf "scale=360:-1,fps=12" -c:v libwebp_anim -loop 0 -compression_level 6 -quality 70 -an output.webp

  • scale=360:-1 是縮放尺寸。只要設一邊就好，另一邊寫 -1，FFmpeg 就會自動等比例
    縮放。
  • fps=12 每秒幾格[DEL:幀:DEL]。我覺得動圖的每秒格[DEL:幀:DEL]數不要太多，會更
    有動圖的氣質；我大部分都設 8-15 之間。
  • -compression_level 6 是設定「盡最大努力」尋找最佳壓縮方式。會比較慢，但檔案
    會更小。
  • -quality 70 是品質設定。我覺得 70、75 左右是甜蜜點，想要檔案更小的話可以試
    試看更低。

◆ 實測檔案大小​

我用了可麗餅的十秒鐘影片來測試，以下是兩種格式檔案大小的比較：

 解析度╱格數     GIF   WebP -quality 70
640x360, 30fps 13.8 MB 5.4 MB
320x180, 30fps 3.4 MB  1.7 MB
320x180, 15fps 2.2 MB  940 KB

這篇文章最上面實際用的那張，最後調成 360x203、每秒 10 格（不是「幀」！）、品質
70，檔案大小只有 659 KB。

◆ WebP 的唯一缺點​

WebP 格式唯一的缺點，就是要比較近代的瀏覽器才支援。^1

Chrome 在 2014 年支援、Firefox 拖到 2019，Safari 甚至要到 2020 年以後（而且必須
搭配 macOS 11 或 iOS 14 以後版本）才能完整支援 WebP 格式。所以我在 Wiwi.Blog 上
只在動畫圖才用 WebP，一般的圖片還是選擇相容性最好的 JPEG 和 PNG。

像是我手上的 iPad Mini 4（2015 年出品），系統最高只能跑到 iOS 12，瀏覽器再也無
法更新，就完全看不到 WebP。一台明明還很漂亮的平板，卻因為被蘋果的軟體綁死，現在
連一張貓咪動圖都打不開，超鳥。當然對於蘋果來說，這設計完全合理──如果十年前的平
板，今天還能正常地看到 WebP，誰會想要換新機呢？

再次印證了 Richard Stallman 的那句話：「如果使用者不能控制程式，那就是程式在控
制使用者。」千萬別買只能跑封閉作業系統的產品呀！

（iPad Mini 4：看不到 WebP 動圖，但至少還能用來 ssh 啦。）

[ipad-f20de50f489cb765a1712e64acca15dd]

── Footnotes​ ──

 1. 其實在 WebP 之後，還有一個更新、壓縮率更好的格式叫 AVIF。但 AVIF 的相容性就
    更差了，許多 2024 年以前的系統和裝置都不支援，現在用它可能還太早。 ↩