Lighthouse 報表的「商機」部分會列出所有動畫 GIF,以及將這些 GIF 轉換為影片後預估節省的秒數:
![Lighthouse 使用影片格式 (用於稽核動畫內容) 的螢幕截圖](https://developer.chrome.com/static/docs/lighthouse/performance/efficient-animated-content/image/a-screenshot-the-lightho-8a0ec21794e2.png?authuser=19&hl=zh-tw)
為什麼要用影片取代動畫 GIF 圖片
大型 GIF 在提供動畫內容方面的效率不彰。只要將大型 GIF 轉換成影片,就能大幅節省使用者的頻寬用量。請考慮使用 MPEG4/WebM 影片做為動畫格式,或針對靜態圖片使用 PNG/WebP 格式 (而非 GIF),以節省網路位元組。
建立 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 用量。