將 GIF 動畫換成影片,加快網頁載入速度

您是否曾在開發工具中檢查過 Imgur 或 Gfycat 等服務中的 GIF 動畫,但只要發現該 GIF 確實是影片,有好理由動畫 GIF 可呈現右下方大尺寸

開發人員工具網路面板顯示 13.7 MB 的 GIF。

幸好,這是載入效能的其中一個領域,您可以付出少許心力,才能獲得巨大的益處!只要將大型 GIF 轉換為影片,就能節省大量使用者頻寬

先評估

使用 Lighthouse 檢查網站是否有可轉換成影片的 GIF。在開發人員工具中,按一下「稽核」分頁標籤,然後勾選「效能」核取方塊。接著執行 Lighthouse 並查看報表。如有任何 GIF 可供轉換,系統應會顯示「使用影片格式製作動畫內容」建議:

Lighthouse 稽核失敗,請使用影片格式製作動畫內容。

建立 MPEG 影片

將 GIF 轉換為影片的方法有很多種,FFmpeg 是在本指南中使用的工具。如要使用 FFmpeg 將 GIF (my-animation.gif) 轉換為 MP4 影片,請在主控台中執行下列指令:

ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

這會讓 FFmpeg 採用my-animation.gif作為輸入、以 -i 標記簽署,並將其轉換成稱為 my-animation.mp4 的影片。

libx264 編碼器僅適用於尺寸平均的檔案,例如 320 x 240 像素的檔案。如果輸入的 GIF 具有奇怪的尺寸,您可以加入裁剪篩選器,以避免 FFmpeg 擲回「高度/寬度不能以 2 整除」錯誤:

ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

建立 WebM 影片

雖然 MP4 自 1999 年以來就開始推出,但 WebM 是相對在 2010 年推出的新型檔案格式。WebM 影片比 MP4 影片小很多,但並非所有瀏覽器都支援 WebM,因此適合產生這兩種影片。

如要使用 FFmpeg 將 my-animation.gif 轉換為 WebM 影片,請在主控台中執行下列指令:

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

比較差異

GIF 和影片之間的成本可說是相當可觀。

檔案大小比較結果顯示,GIF 為 3.7 MB、mp4 為 551 KB,網路 m 為 341 KB。

在本範例中,初始 GIF 為 3.7 MB,而 MP4 版本 (551 KB) 和 WebM 版本 (僅 341 KB) 為 3.7 MB!

將 GIF 圖片換成影片

GIF 動畫有下列三個必須複製的影片特徵:

  • 自動播放。
  • 這類物件會持續循環播放 (通常但可以避免重複播放)。
  • 他們沒空。

幸好,您可以使用 <video> 元素重新建立這些行為。

<video autoplay loop muted playsinline></video>

含有這些屬性的 <video> 元素會自動播放、不斷循環播放、不播放音訊,以及以內嵌方式播放 (也就是非全螢幕),以及 GIF 動畫預期能達到的所有功能!🎉

最後,<video> 元素需要一或多個 <source> 子元素,指向瀏覽器可選擇的不同影片檔案,視瀏覽器的格式支援而定。同時提供 WebM 和 MP4,以便在瀏覽器不支援 WebM 的情況下改回使用 MP4。

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm">
  <source src="my-animation.mp4" type="video/mp4">
</video>

對最大內容繪製 (LCP) 的影響

請注意,雖然 <img> 元素是 LCP 候選項目,但不含 poster 圖片<video> 元素則不是 LCP 候選項目。如要模擬 GIF 動畫,此解決方案「不應」<video> 元素中加入 poster 屬性,因為該圖片不會使用。

這對你的網站有何影響?建議您繼續使用 <video> 而不是動畫 GIF,但瞭解這類媒體並不適合 LCP 使用,因此系統會改用下一個最大的候選項目。由於 GIF 和 <video> 檔案的大小通常較大且下載速度較慢,因此改用其他 LCP 候選項目或許還能改善網站的 LCP。