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

Lighthouse 報表的「Opportunities」部分會列出所有 GIF 動畫，並估算將這些 GIF 轉換為影片可節省的秒數：

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

為什麼要將動畫 GIF 替換為影片

使用大型 GIF 檔案呈現動畫內容會降低網路傳輸效率。將大型 GIF 圖片轉換成影片，即可大幅節省使用者的頻寬。考慮使用 MPEG4/WebM 影片顯示動畫和 PNG/WebP ，可減少網路位元組，而非 GIF。

建立 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 降到最低 使用時間與空間

資源