隨著移動互聯網的發展，越來越多的互聯網內容服務商開始使用動圖。一方面，動圖內容可以給用戶帶來更鮮活的體驗；另一方面，動圖內容可以更有針對性的推薦其產品。

時尚不是你期望在科技界重演的東西——技術進步迅速，幾乎從不回頭。但是，在涉及動畫GIF的地方，似乎90年代又來了。動畫GIF無處不在，不僅在奇怪，俗氣的網站上 - 它們已經成為主流?，F在，您可以在騰訊視頻和優酷等知名網站中看到以動畫GIF形式共享和播放的短視頻。

GIF格式遠非最佳。雖然它是所有Web瀏覽器和智能手機都支持的簡單圖像格式，但GIF文件占用空間大、色彩表現力有限、在終端的解碼效率差的問題越發突出，導致了動圖相關功能網絡流量占用大、終端解碼負擔重，最終使APP用戶體驗變差。

GIF格式不適用于全彩色視頻。它僅使用256種顏色（沒有半透明的alpha通道），更適合繪圖而不是照片或視頻幀。對于單個相框，JPEG 在質量和文件大小方面都是一種更好的格式，但 JPEG 不支持動畫。

從動畫GIF到動畫WebP的轉換

以下無聊的人的動畫GIF已從維基媒體上傳到Cloudinary。雖然這是一個相對較小的279×193的圖像，但這個短視頻的重量高達1.5MB。如果您的網站上有30張這樣的圖片，則總共為45MB，這需要時間來加載。如果您的站點每天有1000名訪問者，則僅這些圖像的每月帶寬就為1.3TB！

https://res.cloudinary.com/demo/image/upload/bored_animation.gif

Cloudinary的媒體管理服務支持上傳，轉換和管理各種媒體文件，包括圖像，視頻和音頻到新興媒體類型。下面的代碼示例（在所有流行的框架中）構造一個動態 URL，用于將上面的動畫GIF 轉換為動畫 WebP。此URL 啟用該標志（或者，如果您直接提供URL），并引用同一圖像，將其文件擴展名更改為（這告訴 Cloudinary 您要將圖像轉換為此文件格式）。awebpfl_awebpbored_animation.webp

https://res.cloudinary.com/demo/image/upload/fl_awebp/

bored_animation.webp

注意：動畫 WebP 目前僅受Chrome 瀏覽器支持。如果您在此處看到損壞的圖片，請嘗試在Chrome（v32 或更高版本）中打開此博客文章。

上面的WebP動畫是在訪問動態URL 時由 Cloudinary 動態生成的。它看起來與原始圖像相同，但重量僅為419KB。這意味著與原始的1.5MB動畫GIF相比，我們節省了72%的文件大小，帶寬和加載時間。

默認情況下，Cloudinary 在有損模式下生成動畫 WebP。用于上述動畫 WebP的默認質量級別為 80%，但您可以選擇其他質量級別。

讓我們嘗試生成質量級別較低的相同動畫 WebP。我們將參數設置為 40（直接提供 URL 時）。您可以在下面看到動態轉換 URL 和生成的WebP 動畫。qualityq_40

https://res.cloudinary.com/demo/image/upload/fl_awebp,q_40/

bored_animation.webp

當質量設置為40%時，視覺差異幾乎不明顯，但生成的文件僅重195KB。與 80% 質量的動畫 WebP 相比，這節省了 53% 的大小和帶寬，并且與原始 GIF 相比，大小減少了87%。

調整動畫 GIF 的大小和裁剪，并轉換為動畫 WebP

您可以使用 Cloudinary 的圖像轉換 URL 來裁剪動畫 GIF 并調整其大小。以下轉換URL 和生成的圖像將生成相同動畫 GIF 的 150×100 北填充矩形。生成的圖像（其中 Cloudinary 已經應用了某些動畫GIF 優化）的重量為429KB。

https://res.cloudinary.com/demo/image/upload/

w_150,h_100,c_fill,g_north/bored_animation.gif

現在我們可以將此圖像轉換為動畫WebP。以下 URL 生成相同的 150×100 縮略圖，同時轉換為質量為 80% 的動畫 WebP。結果僅重154KB，這意味著我們節省了64% 的文件大小，而不會影響質量。

https://res.cloudinary.com/demo/image/upload/

w_150,h_100,c_fill,g_north,fl_awebp,q_80/bored_animation.webp

動畫 WebP 格式對于繪圖動畫也非常有用，而不僅僅是視頻。以下示例顯示了從維基媒體上傳到 Cloudinary 的動畫繪圖。左側的原始動畫GIF重790KB，而右側的WebP版本質量為80%，僅重375KB（減少52.5%）。

https://res.cloudinary.com/demo/image/upload/

fl_awebp/cell_animation.webp

解決方案：深維佳圖GIF2WebP動圖轉碼方案

動圖WebP編碼的計算復雜度很高，導致此轉碼運算時延會非常驚人。為解決這一問題，深維科技采用FPGA異構計算架構，推出深維佳圖GIF2WebP動圖轉碼方案，借用異構計算的技術優勢，一次性解決時延、流量、存儲、計算等問題，此方案可應用于興趣社區、電子商務、社交應用、在線視頻等眾多領域。

深維佳圖 GIF2Webp動圖轉碼方案大幅縮減轉碼時延

對比CPU方案，深維佳圖GIF2WebP動圖轉碼方案將轉碼處理延遲（端到端的單張圖像處理延遲）平均降低了15倍。即從十幾秒到幾十秒縮短到零點幾秒到1秒多，這種場景下的WebP動圖就從不可用變成可用。

審核編輯 ：李倩