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

你曾在 Imgur 或 Gfycat 等服務中看過 GIF 動畫嗎? 在您的開發人員工具中,但想知道 GIF 其實是影片嗎?還有 這種說法您可以把 GIF 動畫放下大一點

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

幸好,這是載入效能的其中一環 其實只需要付出少量心力就能獲得巨大收益!將大型 GIF 轉換為 不必耗費大量時間頻寬。

先評估

使用 Lighthouse 檢查你的網站是否有可轉換成影片的 GIF。於 開發人員工具,按一下「稽核」分頁標籤,並勾選「效能」核取方塊。接著執行 Lighthouse 並查看報告。 如有任何可轉換的 GIF,畫面上應該會顯示「使用 動畫內容的影片格式:

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

建立 MPEG 影片

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

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 像素 乘以 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,Webm 則為 341 KB。

在這個例子中,初始 GIF 為 3.7 MB,而 MP4 版本則是 MP4。 551 KB,WebM 版本只有 341 KB!

將 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。