Lighthouse 報表的「Opportunities」部分會列出所有 GIF 動畫,並估算將這些 GIF 轉換為影片可節省的秒數:
為何應改用影片取代 GIF 動畫
使用大型 GIF 檔案呈現動畫內容會降低網路傳輸效率。將大型 GIF 轉換為影片,可大幅節省使用者的頻寬。建議你改用 MPEG4/WebM 影片格式呈現動畫內容,或是使用 PNG/WebP 格式顯示靜態圖片,以減少網路傳輸的資料量。
建立 MPEG 影片
將 GIF 轉換成影片的方法有很多種。FFmpeg 是本指南中使用的工具。如要使用 FFmpeg 將 GIF my-animation.gif
轉換為 MP4 影片,請在主控台中執行下列指令:
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 做為影片嵌入的服務。