使用影片格式製作動畫內容

Lighthouse 報表的「機會」部分會列出所有 GIF 動畫,以及將這些 GIF 轉換為影片後,估計可節省的時間 (以秒為單位):

Lighthouse「使用影片格式的動畫內容」稽核的螢幕截圖

為什麼應該以影片取代 GIF 動畫

使用大型 GIF 檔案呈現動畫內容會降低網路傳輸效率。 將大型 GIF 轉換為影片,可大幅節省使用者的頻寬。 建議你改用 MPEG4/WebM 影片格式呈現動畫內容,或是使用 PNG/WebP 格式顯示靜態圖片,以減少網路傳輸的資料量。

製作 MPEG 影片

你可以透過多種方式將 GIF 轉換為影片。 本指南使用的工具是 FFmpeg。如要使用 FFmpeg 將 GIF 轉換為 MP4 影片,請在控制台中執行下列指令:my-animation.gif

ffmpeg -i my-animation.gif my-animation.mp4

這會告知 FFmpeg 將 my-animation.gif 做為輸入內容 (以 -i 旗標表示),並將其轉換為名為 my-animation.mp4 的影片。

建立 WebM 影片

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 動畫有三項影片必須複製的重要特徵:

  • 系統會自動播放。
  • 這些函式會持續迴圈 (通常是這樣,但可以防止迴圈)。
  • 他們保持沉默。

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

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

使用可將 GIF 轉換為 HTML5 影片的服務

許多圖片 CDN 都支援將 GIF 轉換為 HTML5 影片。您將 GIF 上傳至圖片 CDN,圖片 CDN 會傳回 HTML5 影片。

堆疊專屬指南

AMP

你可以對動畫內容使用 amp-anim,這樣一來,畫面外的內容即會盡量節省 CPU 用量。

Drupal

建議您將 GIF 上傳到可將 GIF 做為影片嵌入的服務。

資源