頁面加載性能之video替換GIF

當咱們的網站須要一張動態圖的時候，大部分人腦海中第一印象是GIF，固然也有會想到CSS3，經過設置逐幀動畫來實現，不過這樣的動畫在用戶的眼裏仍是不夠流暢，因此通常開發仍是會選擇GIF，但GIF自己過大，以下圖：

這是加載性能的其中一項，咱們能夠簡單幾個步驟就能讓性能獲得很大的提高，經過將GIF轉換成video，就能省去很大的帶寬。

首先是檢測

Lighthouse 是咱們的最經常使用的檢測手段，若是你的頁面出現了這類GIF，檢測報告會告知你建議的優化項，以下：

建立MPEG格式video

有很多方法能夠將GIF轉換成video，FFmpeg 是咱們用的比較多的一款。如下命令能夠將 my-animation.gif 轉換成MPEG格式的video:

ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

建立WebM格式的video

MP4自1999年就已經存在了，而WebM是2010年才新出現的一種video的格式，它比MP4體積更小，可是並不是全部瀏覽器都支持。如下命令能夠將 my-animation.gif 轉換成WebM格式的video:

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

比較差別

下圖是各類格式的大小對比:

在上面的例子中，GIF格式是3.7M，轉換成MP4以後，只剩551K，轉換成WebM以後，只剩341K。

用video替換GIF

GIF較之於video，須要如下三個特徵：

• 自動播放
• 循環播放
• 靜音

這些 <video> 也都支持，代碼以下:

<video autoplay loop muted playsinline></video>

上面的這個 <video> 標籤會自動播放、靜音、內嵌播放（非全屏），表現的就跟GIF同樣。

最後咱們給 <video> 配上 <source> 源，這樣若是瀏覽器不支持WebM，就會fallback到MP4。

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

總結

平時項目中可能GIF用的很少，但一旦有使用場景，儘量的優先考慮video，由於能夠極大的節省帶寬，提高加載性能。

參考

https://web.dev/replace-gifs-...