網頁中的動態GIF圖片是非常受歡迎的，因為它們相比靜態圖片更生動，相比網頁視訊更簡單。但是GIF圖片通常具有較大的體積，就導致網頁載入速度變慢，記憶體使用增加。通過使用htmlvideo，可以使瀏覽器中的GIF圖片在減少98%體積的情況下，仍然具有相對較高的質量。

我們注意到這篇文章是Google Web Fundamentals上傑里米·瓦格納 (Jeremy Wagner)的一篇文章的複寫版本，原文可點選這裡檢視。

我對傑里米表達深深的歉意，由於我並未第一時間辨認出這是複製他的工作。稽核確認一直都是我和整個團隊非常重視的工作。對於這次的事件，我非常抱歉。

— 瑞秋 安德魯 (Rachel Andrew), 代表編輯團隊

動態GIF圖片有很多優勢：它們很容易製作並且所有瀏覽器都支援。但是GIF格式的設計初衷並不是為了儲存動畫，而是為了將多張圖片壓縮到單個檔案中。為此用了一種無損的壓縮演算法 (LZW 壓縮演算法)，來使GIF圖片可以在短時間內下載，即使在較慢的連線狀態下 ，也是如此。

後來，GIF檔案允許內部儲存的一系列的圖片可以隨時間展示，這才有了動畫功能。當時GIF動畫預設只會播放一次，在最後一幀圖片展示完之後，就會停止。網景瀏覽器2.0 首次給動態GIF增加了迴圈播放的能力，這極大地促進了GIF動畫的崛起。

GIF作為動畫儲存格式，有很大的限制。動畫中的每一幀嚴格限制有256種顏色，多年以來，壓縮技術的發展已經促進了動畫和視訊檔案的壓縮和使用。但GIF格式不同於這些傳統的視訊格式，不能利用這些新技術的優勢，導致其幾秒的內容就需要很大的空間儲存，因為裡面有很多重複的內容被儲存。

即使你試圖用一些GIF工具，像Gifsicle，來降低圖片質量和動畫長度，你也很難把GIF檔案控制到合適的尺寸。這就是為什麼像Giphy，Imgur和the likes這些有很多GIF圖片的網站，不會去用GIF格式，而是把它們轉換成html5 video呈現出來的原因。正如Pinterest的工程師團隊發現的那樣, 把動態GIF圖片轉換成video，可以減少載入時間，重放更加平滑，帶給使用者更好的體驗。

因此，我們來看一下這些能夠讓我們把HTML5 video代替動態GIF的技術。我們會學到如何把GIF轉換成視訊檔案，並且把這些視訊檔案合適地嵌入到網頁中，讓其表現出和GIF同樣的效果。最後，我們會考慮一些用這項方案所可能帶來的缺點。

動態GIF轉換成Video

第一步是把GIF檔案轉換成一種視訊格式。在主流瀏覽器中，大約有94%的瀏覽器都支援MP4格式的視訊，所以MP4可以是一個很安全的預設視訊格式選項。

94%的瀏覽器支援MP4格式 (詳情)

另外WebM格式也是一個可選項，WebM格式與MP4格式相比，具有更小的檔案尺寸和更高的視訊質量。然而，瀏覽器還沒有廣泛地支援這種格式，所以你不能把所有MP4檔案都替換成WebM格式檔案。

IE和Safari不支援WebM (詳情)

因為<video>標籤支援多種&lt;source&gt;檔案，所以我們可以把WebM視訊放到瀏覽器中，對於不支援此格式的瀏覽器可以回退到MP4格式。

現在我們去把GIF轉換成MP4和WebM。有一些線上的工具可以幫助我們，但是這些工具大部分都是基於ffmpeg的，所以我們跳過這些工具，直接使用ffmpeg。ffmpeg是一個免費開源的處理視訊和音訊檔案的命令列工具。它也可以用來把動態GIF轉換成視訊格式。

為了確定你的機器上是否有ffmpeg，你需要開啟終端，執行ffmpeg命令。這會打印出一些相關資訊，如果沒有，需要安裝。在Windows，macOS和Linux上的安裝說明可點選這裡。因為我們需要轉換成WebM，所以你需要確保用ffmpeg打包你安裝的任何東西都需要用libvpx編譯。

為了更好地執行文章的中命令，你需要準備一個超過28MB的GIF檔案，或者可以用這一張。下一部分我們開始介紹如何把GIF轉換成MP4。

廣州vi設計http://www.maiqicn.com 辦公資源網站大全 https://www.wode007.com

GIF 轉換成 MP4

開啟終端，進入你測試GIF檔案所在目錄，執行下面命令，把GIF檔案轉換成MP4檔案:

ffmpeg -i animated.gif video.mp4

執行命令後，根據你要轉換的GIF檔案大小，需要等待數秒，之後會在當前目錄生成一個vedio.mp4的檔案。命令中的-i表示要後面指定輸入檔案路徑，接著要指定輸出檔案的路徑 (本例子中vedio.mp4就是輸出檔案)。對一個28MB的GIF檔案可以轉換成一個只有536KB大小的MP4檔案，在保持動畫質量的前提下，有98%壓縮量。

我們可以做的還有更多。ffmpeg有很多選項可以讓我們進一步地調節輸出檔案。 一種方法是用位元速率控制方法如CRF (constant Rate Factor)，來進一步減少輸出檔案大小。你需要執行如下命令：

ffmpeg -i animated.gif -b:v 0 -crf 25 video.mp4

正如你看到的，上面的命令比之前的命令多了一些新的引數。-b:v通常是用來限制輸出位元率，當用CRF模式時，它必須設定為0。-crf用來控制輸出視訊的質量，可接受0 - 51之間的數值，這個值越小，則視訊質量越高，檔案尺寸越大。

執行上面的命令，壓縮後的視訊檔案大小隻有386KB，並且視訊質量和之前的並無明顯區別。如果你想進一步減少檔案大小，你可以增大crf的值。需要記住，crf值越大，視訊質量會越差。

GIF轉換成WebM

你可以將GIF檔案轉換成WebM檔案，執行如下命令:

ffmpeg -i animated.gif -c vp9 -b:v 0 -crf 41 video.webm

這個命令和前面介紹的轉換成MP4檔案的命令幾乎一樣，僅有的區別是有一個新引數-c，這個引數通常來指定進行轉換的編碼解碼器。上面命令用vp9編碼解碼器，它是繼承vp8編碼解碼器。

另外，這個命令中crf的值為41，因為不同的視訊格式相同的crf值也是代表不同的視訊質量。這個命令產生的WebM檔案只有16KB，遠小於MP4格式的檔案，但是視訊質量並沒有明顯差別。

現在我們知道如何把GIF檔案轉換成視訊檔案，接下來我們看如何在瀏覽器中用HTML5的<video>標籤來模仿GIF圖片的動畫效果。

瀏覽器中用Video替換GIF

在網頁中，把一個視訊表現得像GIF並不是簡單得把視訊檔案放到<img>標籤中，但是解決方法也不復雜。動態GIF的主要特徵如下:

• 自動播放

• 連續迴圈播放

• 無聲播放

既然知道了GIF檔案的這些特性，那麼我們可以改變視訊檔案的某些屬性來具備這些特徵。下面就展示瞭如何將視訊檔案表現出GIF的特徵：

<video autoplay loop muted playsinline src="video.mp4"></video>

瀏覽器中的這行程式碼就表示這個視訊是自動播放，迴圈播放，無聲播放並且不展示任何視訊控制組件。這就使網頁中的視訊表現出和GIF無異，同時表現出更好的效能。

你可以為視訊指定更多的源，通過在<video>中用&lt;source&gt;，如下所示:

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

這些程式碼告訴瀏覽器從指定的源中去選擇視訊檔案。在上面的例子中，如果瀏覽器支援WebM格式的視訊，那麼頁面將會下載並播放，但是如果不支援，MP4格式視訊會被下載並播放。

為了相容較老的不支援HTML5 video的瀏覽器， 可以新增如下內容來顯示原始GIF圖片。

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

    Your browser does not support HTML5 video.       
    <a href="/animated.gif">Click here to view original GIF</a>
</video>

或者把GIF檔案新增到<img>標籤中:

<video autoplay loop muted playsinline>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
    <img src="animated.gif">
</video>

現在我們已經測試瞭如何在瀏覽器中用HTML5 video模擬GIF圖片，接下來我們會考慮一些這種辦法可能會存在的問題。