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

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

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

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

圖片 [4]

◆ GIF 很老​

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

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

小秘訣

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

◆ 改用 MP4？氣質不對​

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

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

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

◆ 動畫圖的正解是 WebP​

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

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

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

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 左右是甜蜜點，想要檔案更小的話可以試
    試看更低。

◆ 實測檔案大小​

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

 解析度╱格數     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 格（不是「幀 [5]」！）、
品質 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，誰會想要換新機 [12]呢？

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

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

圖片 [15]

── Footnotes​ ──

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

── 連結與圖片 ──

[1] https://wiwi.blog/blog/animated-webp.txt
[2] https://shuyulin1127.com/libresprite-review-and-why-i-quit/
[3] https://eddielv.com/articles/motion-images/
[4] （圖片）https://wiwi.blog/assets/images/crepe-360-10fps-q70-e761868665feff0ece3617fb5a62f224.webp
[5] https://zh.wikipedia.org/zh-tw/%E5%B8%A7%E7%8E%87
[6] https://wiwi.blog/blog/jelly-bigger-than-games.txt
[7] https://www.lcdf.org/gifsicle/
[8] https://wiwi.blog/blog/optimize.txt
[9] https://wiwi.blog/blog/dont-block-my-video.txt
[10] https://wiwi.blog/blog/ffmpeg.txt
[11] https://wiwi.blog/crepe.txt
[12] https://wiwi.blog/blog/apple-obsolescence.txt
[13] https://wiwi.blog/blog/five-quotes.txt
[14] https://wiwi.blog/blog/your-computer-is-not-yours.txt
[15] （圖片）https://wiwi.blog/assets/images/ipad-f20de50f489cb765a1712e64acca15dd.jpg