動畫圖的正解是 WebP
最近看到 Shuyu 和 Eddie 在各自的 Blog 上都提到了關於 GIF 動畫圖的問題。讓我來分享一下我的做法。
（這是一張長達 10 秒鐘的循環動畫圖，檔案大小只有 659 KB！）
GIF 很老
有很長一段時間，GIF（Graphics Interchange Format，圖像互換格式）是唯一能在網頁上顯示動畫的圖片格式，這也是為什麼「GIF」成為了動畫圖的代名詞。
但問題是，GIF 格式非常老舊，1987 年發明，最後一次更新是 1989 年（其實好像也還好，沒有我老？）。如果只是用在 88x31 的小按鈕就算了，但現代人使用動圖的習慣非常「奢華」──長寬動不動就 500 px 起跳、每秒 30 格（台灣的講法是「影格╱畫格╱張」都可以，但不是「幀」唷）──用 GIF 來存的話，檔案大小瞬間就會爆掉。
改用 MP4？氣質不對
一個解決方式是直接插入 MP4 影片檔。不過 Markdown 中沒有插入影片的原生語法，每次都要手寫 HTML <video> 標籤，有點麻煩。
而且，我覺得影片檔的「氣質」就是跟動圖不一樣。就算把播放控制列關掉、設定成循環播放，味道就還是不太對，沒有動圖那種完美的無縫循環感。更別說動圖還支援設定「每格獨立」的延遲時間，可以做出影片格式無法呈現的節奏感。
另外，影片檔如果有聲音，瀏覽器就不會讓它自動播放，得在程式碼裡額外設定成靜音；可能還會需要加 playsinline，才能讓某些手機瀏覽器就地播放，而不是跳到全螢幕。
動畫圖的正解是 WebP
WebP 是 Google 在 2010 年推出的開放圖片格式，同時支援靜態圖和動畫，而且壓縮效率比傳統格式好非常多。
因為 WebP 是真正的「圖片」，所以你只要用 Markdown 寫  或一個普通的 <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每秒幾格。我覺得動圖的每秒格數不要太多，會更有動圖的氣質；我大部分都設 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 啦。）
