網頁中的動態GIF圖片是非常受歡迎的，因為它們相比靜態圖片更生動，相比網頁視頻更簡單。但是GIF圖片通常具有較大的體積，就導致網頁加載速度變慢，內存使用增加。通過使用html video，可以使瀏覽器中的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> 標簽支持多種 <source> 文件，所以我們可以把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> 中用 <source> ，如下所示:
<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圖片，接下來我們會考慮一些這種辦法可能會存在的問題。