從動(dòng)畫GIF到動(dòng)畫WebP的轉(zhuǎn)換

隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，越來(lái)越多的互聯(lián)網(wǎng)內(nèi)容服務(wù)商開始使用動(dòng)圖。一方面，動(dòng)圖內(nèi)容可以給用戶帶來(lái)更鮮活的體驗(yàn)；另一方面，動(dòng)圖內(nèi)容可以更有針對(duì)性的推薦其產(chǎn)品。

時(shí)尚不是你期望在科技界重演的東西——技術(shù)進(jìn)步迅速，幾乎從不回頭。但是，在涉及動(dòng)畫GIF的地方，似乎90年代又來(lái)了。動(dòng)畫GIF無(wú)處不在，不僅在奇怪，俗氣的網(wǎng)站上 - 它們已經(jīng)成為主流?，F(xiàn)在，您可以在騰訊視頻和優(yōu)酷等知名網(wǎng)站中看到以動(dòng)畫GIF形式共享和播放的短視頻。

GIF格式遠(yuǎn)非最佳。雖然它是所有Web瀏覽器和智能手機(jī)都支持的簡(jiǎn)單圖像格式，但GIF文件占用空間大、色彩表現(xiàn)力有限、在終端的解碼效率差的問題越發(fā)突出，導(dǎo)致了動(dòng)圖相關(guān)功能網(wǎng)絡(luò)流量占用大、終端解碼負(fù)擔(dān)重，最終使APP用戶體驗(yàn)變差。

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

從動(dòng)畫GIF到動(dòng)畫WebP的轉(zhuǎn)換

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

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

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

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

bored_animation.webp

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

上面的WebP動(dòng)畫是在訪問動(dòng)態(tài)URL 時(shí)由 Cloudinary 動(dòng)態(tài)生成的。它看起來(lái)與原始圖像相同，但重量?jī)H為419KB。這意味著與原始的1.5MB動(dòng)畫GIF相比，我們節(jié)省了72%的文件大小，帶寬和加載時(shí)間。

默認(rèn)情況下，Cloudinary 在有損模式下生成動(dòng)畫 WebP。用于上述動(dòng)畫 WebP的默認(rèn)質(zhì)量級(jí)別為 80%，但您可以選擇其他質(zhì)量級(jí)別。

讓我們嘗試生成質(zhì)量級(jí)別較低的相同動(dòng)畫 WebP。我們將參數(shù)設(shè)置為 40（直接提供 URL 時(shí)）。您可以在下面看到動(dòng)態(tài)轉(zhuǎn)換 URL 和生成的WebP 動(dòng)畫。qualityq_40

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

bored_animation.webp

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

調(diào)整動(dòng)畫 GIF 的大小和裁剪，并轉(zhuǎn)換為動(dòng)畫 WebP

您可以使用 Cloudinary 的圖像轉(zhuǎn)換 URL 來(lái)裁剪動(dòng)畫 GIF 并調(diào)整其大小。以下轉(zhuǎn)換URL 和生成的圖像將生成相同動(dòng)畫 GIF 的 150×100 北填充矩形。生成的圖像（其中 Cloudinary 已經(jīng)應(yīng)用了某些動(dòng)畫GIF 優(yōu)化）的重量為429KB。

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

w_150,h_100,c_fill,g_north/bored_animation.gif

現(xiàn)在我們可以將此圖像轉(zhuǎn)換為動(dòng)畫WebP。以下 URL 生成相同的 150×100 縮略圖，同時(shí)轉(zhuǎn)換為質(zhì)量為 80% 的動(dòng)畫 WebP。結(jié)果僅重154KB，這意味著我們節(jié)省了64% 的文件大小，而不會(huì)影響質(zhì)量。

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

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

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

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

fl_awebp/cell_animation.webp

解決方案：深維佳圖GIF2WebP動(dòng)圖轉(zhuǎn)碼方案

動(dòng)圖WebP編碼的計(jì)算復(fù)雜度很高，導(dǎo)致此轉(zhuǎn)碼運(yùn)算時(shí)延會(huì)非常驚人。為解決這一問題，深維科技采用FPGA異構(gòu)計(jì)算架構(gòu)，推出深維佳圖GIF2WebP動(dòng)圖轉(zhuǎn)碼方案，借用異構(gòu)計(jì)算的技術(shù)優(yōu)勢(shì)，一次性解決時(shí)延、流量、存儲(chǔ)、計(jì)算等問題，此方案可應(yīng)用于興趣社區(qū)、電子商務(wù)、社交應(yīng)用、在線視頻等眾多領(lǐng)域。

深維佳圖 GIF2Webp動(dòng)圖轉(zhuǎn)碼方案大幅縮減轉(zhuǎn)碼時(shí)延

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

審核編輯 ：李倩