一.WebP 的由來
現(xiàn)代圖像壓縮技術(shù)對我們的生活方式影響很大苞俘。數(shù)碼相機(jī)能將上千張高質(zhì)量圖片存儲到一張內(nèi)存卡里膳灶、智能手機(jī)可以與鄰近設(shè)備快速分享高分辨率的圖片悔常、網(wǎng)站與手機(jī)等移動設(shè)備能快速展示各種富媒體循帐。
然而护赊，如果圖片只能以最原始的格式進(jìn)行存儲的話惠遏，以上所有都只是紙上空談。
在 APP骏啰、瀏覽器或 PC 端节吮、還是移動端等各種設(shè)備里，通常使用 JPEG 這種損耗較大的格式對圖片進(jìn)行高效率的管理判耕，而使用 PNG 這種失真較小的格式傳送圖表透绩、圖標(biāo)以及圖畫等。
然而，在過去幾年間渺贤，盡管視頻的格式發(fā)展迅速雏胃，圖像格式卻有些不盡人意。
直到 2010 年志鞍，谷歌推出了全新的 WebP（發(fā)音為 「Weppy」）格式瞭亮，一種開源且同時支持有損與無損壓縮的圖片格式，才改善了這一現(xiàn)狀固棚。
WebP 格式文件要比常用的 JEPG 與 PNG 格式小得多统翩，而且還支持許多高級特性，比如有損模式下的透明性此洲，在低質(zhì)厂汗、高壓縮設(shè)置下更為養(yǎng)眼的圖片質(zhì)量等。
二.WebP 的意義
前兩年 Google 進(jìn)行了一個統(tǒng)計調(diào)查：如果亞馬遜頁面加載每慢 100ms呜师，將影響他們 1% 的收入娶桦；如果谷歌頁面加載慢 500ms ，流量將銳減 20%汁汗，這個數(shù)據(jù)到現(xiàn)在只會更加恐怖衷畦！
評價網(wǎng)站性能好壞的一個主要指標(biāo)就是頁面響應(yīng)時間，也就是說用戶打開完整頁面的時間知牌。IT 業(yè)內(nèi)的人一般都了解祈争，普通的基于 JEPG 還有 PNG 圖片格式的網(wǎng)頁，其圖片資源加載往往都占據(jù)了頁面耗時的主要部分角寸，技術(shù)運(yùn)維人員需要做的就是要 BOSS 知道這個事實而已菩混，進(jìn)而推動 WebP 技術(shù)的使用。
現(xiàn)在業(yè)內(nèi)的很多前端監(jiān)控工具都是基于撥測的模擬訪問扁藕。假設(shè)沮峡，在網(wǎng)絡(luò)良好、用戶機(jī)器良好亿柑、用戶使用 pc 有線網(wǎng)帖烘、運(yùn)營商及 DNS 無任何問題等等情況下的訪問，這是真實的用戶訪問么橄杨？！照卦！
像下圖這樣的式矫，針對用戶訪問頁面時間的真實監(jiān)控，才能用來作為推動某項技術(shù)落地于網(wǎng)站的有力證據(jù)役耕。
然后采转，再通過類似資源加載耗時這樣的功能，就像上面說的那樣，基于真實的用戶體驗來抓出拖慢頁面響應(yīng)時間的真正元兇——圖片故慈！
筆者之前做過前端優(yōu)化的工作板熊，國內(nèi)外的前端性能優(yōu)化工具也使用了不少，最近也詢問了周圍做性能優(yōu)化的朋友察绷，現(xiàn)階段可以較好實現(xiàn)上面兩個功能的工具有：
OneAPM Browser Insight干签、AppDynamics、Ruxit拆撼，大家有興趣的話可以去嘗試下容劳。
WebP 的意義就在于此，通過較小的文件來降低帶寬的消耗闸度，為線上服務(wù)降低流量成本竭贩，更快的展示和更短的圖像共享時間，為網(wǎng)站及移動應(yīng)用用戶帶去更好的用戶體驗莺禁。
在本文中留量，主要介紹 Cloudinary 基于云的即時 WebP 圖像生成技術(shù)以及 Google 開發(fā)的通過代碼行來實現(xiàn)的 WebP 圖像的生成。
三.WebP 的強(qiáng)大優(yōu)勢
1.同等質(zhì)量但是圖片更小
通過 Cloudinary 這個軟件哟冬，簡單地改變 CDN 提供的 URL 的文件擴(kuò)展名楼熄，就可以進(jìn)行圖像格式的即時轉(zhuǎn)換。
例如柒傻，有一張以公共 ID 名 「sample」 上傳到云的 JPG 圖片孝赫，現(xiàn)在我們要在網(wǎng)站上嵌入該圖像 300x200 px 的縮略圖。
下圖 1 是由 Cloudinary 使用 JPG 格式生成的红符，而圖 2 是使用 WebP 格式生成的青柄。(注意，通過谷歌 Chrome 瀏覽器才能正確地查看 WebP 圖像）
圖 1.sample.jpg 27.9KB JPG
圖2.sample.webp 12.4KB WebP
如果檢查網(wǎng)絡(luò)數(shù)據(jù)预侯，你會發(fā)現(xiàn)致开，JPG 文件是 27.9?KB 而 WebP 文件只有 12.4?KB，而兩張圖片看起來幾乎相同萎馅。這意味著節(jié)省了56%的帶寬双戳。如果你的網(wǎng)站包含了大量圖片，就可以節(jié)省一半的流量糜芳，讓你的網(wǎng)站以兩倍于之前的速度加載飒货，訪問者肯定更加高興。
如果使用客戶端庫峭竣，既可以在公共 ID 后面連接「.webp」塘辅，也可以將「format」參數(shù)設(shè)置為「webp」。例如皆撩，在 Ruby on Rails 和 PHP 中：
<%= cl_image_tag("sample.webp", :crop => :scale, :width => 300) %>
<pre>
<?php echo cl_image_tag("sample", array("format" => "webp", "width" => 300,
"crop" => "scale")); ?>
</pre>
2.壓縮之后質(zhì)量無明顯變化扣墩！
JPG 和 WebP 都支持有損壓縮格式哲银，允許你控制目標(biāo)圖像的質(zhì)量。
目標(biāo)圖像的質(zhì)量和文件大小之間存在明顯的折中關(guān)系呻惕。在很多情況下荆责，可以很大程度降低圖像的質(zhì)量和尺寸，而用戶卻幾乎不會注意到其中的差別亚脆。
不過做院，JPEG 格式的圖片在質(zhì)量較低時會有明顯的缺陷，尤其是當(dāng)圖片包含微小的細(xì)節(jié)或文本時型酥，但 WebP 格式則沒有明顯的缺陷山憨，但也會在低質(zhì)量設(shè)置時產(chǎn)生稍微模糊的圖像。
你可以將 Cloudinary 的「quality」參數(shù)（或者 URL 的「q」參數(shù)）設(shè)置為1到99之間的任何值（默認(rèn)值為90）來自己測試一下弥喉。
下面的例子將樣本圖片的質(zhì)量設(shè)置為30%郁竟。圖一是 JPG 圖片的效果，圖二是 WebP 圖片的效果由境。
圖1.sample.jpg 10.6KB
圖2.sample.webp 7.1KB WebP
顯然棚亩，只有眼尖的人才能察覺質(zhì)量上的差別，質(zhì)量降低后的圖片仍舊保持了不錯的觀感虏杰，WebP 格式圖片在這一點(diǎn)上尤為突出讥蟆。30% 的質(zhì)量設(shè)置下，JPG 圖片的大小為 10.6KB纺阔，而 WebP 僅為 7.1KB瘸彤。
相比之下，WebP 格式的圖片減小了33% 的大小笛钝，而與 JPG 格式的原圖相比质况，低質(zhì)量的 WebP 格式圖片只占了其四分之一大小。
下面的 Node.js 與 Django 示例會產(chǎn)生與上例效果相似的交付 URL玻靡。
cloudinary.image("sample.webp", { width: 300, crop: 「scale」, quality: 30 });
cloudinary.CloudinaryImage("sample.webp").image(width = 300,
crop = 'scale', quality = 30)
3.完美支持無損 WebP 圖像
以上所有例子中结榄，WebP 都是有損格式，只保留了 90% 或更低的質(zhì)量囤捻。
WebP 同樣支持一如 PNG 格式的無損模式臼朗，這種無損模式對于柵格化的矢量圖形非常有用（比如，logo）蝎土，因為這類圖像一旦保存為有損模式视哑，就會出現(xiàn)明顯的質(zhì)量下降。
想要生成無損的 WebP 文件誊涯，只需將 Cloudinary 的 「quality」 變量設(shè)置為 100:
圖1.cloudinary_icon.webp
在 Ruby on Rails 也是一樣：
<%= cl_image_tag("sample.webp", :quality => 100) %>
四.確定用戶比例
正如上面提到的黎炉，并不是所有的瀏覽器都支持的 WebP 圖片格式。
目前支持 WebP 的主要是 Chrome醋拧，Android 4.0+ 版本還有 Opera 瀏覽器。這確實是限制 WebP 推廣的最大問題，技術(shù)人員需要有選擇性地決定何時利用它丹壕。
但庆械，在另一方面講，Chrome 是相當(dāng)受歡迎菌赖，尤其是針對 IT 人員或者各個行業(yè)的高素質(zhì)人員來講缭乘，所以，即使只為了提升 Chrome 用戶的用戶體驗并且節(jié)省 Chrome 瀏覽器所消耗的那一部分帶寬琉用，使用 WebP 仍然是值得的堕绩。
那么問題來了，盡管 Chrome 瀏覽器和 Android 系統(tǒng)的普及程度是人盡皆知的邑时，關(guān)于網(wǎng)站訪客的瀏覽器比例奴紧，技術(shù)人員同樣需要拿出一定的數(shù)據(jù)來像 Boss 證明，轉(zhuǎn)化 WebP 圖像這個操作是有意義的晶丘。
所以針對網(wǎng)站用戶統(tǒng)計的工具就非常重要了黍氮，而且這個工具還不能是像 GA、百度統(tǒng)計以及 CNZZ 這樣的營銷工具浅浮，一定要基于真實用戶訪問的用戶訪問統(tǒng)計圖才有說服力沫浆。
這個要識別起來其實很難的，因為各種機(jī)型瀏覽器非常復(fù)雜滚秩，目前國內(nèi)外 APM （性能優(yōu)化）領(lǐng)域涉及這個方面并且做的符合需求的工具也給大家推薦幾個：
OneAPM Browser Insight专执、AppDynamics、NewRelic
五.通過命令行將圖像轉(zhuǎn)換為WebP
除了可以通過 Cloudinary 這款軟件來生成 WebP 圖片之外郁油，還可以通過代碼命令來生成相應(yīng)的 WebP 圖片本股。
谷歌已開發(fā)了大量實用的命令行將圖像轉(zhuǎn)換為 WebP，每個人都可以從谷歌開發(fā)者網(wǎng)站下載已艰。當(dāng)你有一個實用程序的副本之后痊末，你可能想要將實用程序的 bin 文件夾添加到您的本地路徑，這可以通過將以下代碼添加到你的主目錄 下的.bash_profile 文件中來實現(xiàn)(針對 Mac/Linux 系統(tǒng))哩掺。
PATH=$PATH:"/path/to/libwebp-utilities/bin"
export PATH
你需要更新下引用路徑來表示你的系統(tǒng)上 WebP 實用程序文件夾的位置凿叠。重新啟動終端止，就能夠訪問命令行實用工具了嚼吞。
另外盒件，Mac 可以使用homebrew來安裝實用程序。
brew install webp
注:homebrew 不是總能匹配項目網(wǎng)站的最新版的舱禽。
安裝實用程序完成后炒刁，就可以使用 cwebp 將 JPEG 或 PNG 圖像轉(zhuǎn)換成 WebP 格式。
cwebp [options] -q quality input.jpg -o output.webp
質(zhì)量選項應(yīng)該是 0 (差)到 100 (很好)之間的數(shù)字誊稚，典型的質(zhì)量值大約是 80翔始，但是你也可以多多嘗試罗心，直到文件質(zhì)量和大小都讓你滿意。
完整的選項列表城瞎，可以使用此實用工具運(yùn)行帶有 -longhelp 的 cwebp 命令渤闷，或者查看幫助文檔。
注:也可以使用 dwebp 實用程序?qū)?WebP 圖像轉(zhuǎn)換回 PNG脖镀、PAM飒箭、PPM 或 PGM 圖像。
dwebp input_file.webp [options] [-o output_file]
六.基于訪客瀏覽器的動態(tài) WebP 生成
就像上文說過的蜒灰，為了僅針對 Chrome/Android4/Opera 的訪客生成 WebP 圖像弦蹂，你可以使用 JS 代碼根據(jù)訪客的瀏覽器信息加載圖像。
Cloudinary 的 jQuery 插件能幫助你動態(tài)地生成展示 URL强窖，后者會即時地生成圖片凸椿，再通過帶有高級緩存的 CDN 快速地展示結(jié)果。
例如毕骡，你可以在 HTML 頁面定義圖片標(biāo)簽削饵，將 「src」 屬性設(shè)置為空白圖片，將 「data-src」 屬性設(shè)置為已經(jīng)上傳至 Cloudinary 的實際圖片的公共 ID 值未巫。
[站外圖片上傳中……(11)]
下面的 jQuery 代碼會將所有圖片標(biāo)簽轉(zhuǎn)換為動態(tài)生成的圖像 URL窿撬，而不是占位的空白圖片。
$('img').webpify();
該頁面加載很快叙凡，無需等待圖片加載劈伴。之后，上面的 jQuery 代碼會動態(tài)地更新圖片標(biāo)簽握爷，根據(jù)訪客瀏覽器支持 WebP 格式與否跛璧，生成 WebP 圖像或 JPG 圖像。
Chrome 下的結(jié)果：
<img src="http://res.cloudinary.com/demo/image/upload/c_fill,h_100,w_150/sample.webp"
width="150" height="100" data-crop="fill" data-src="sample.jpg">
其他瀏覽器下的結(jié)果：
<img src="http://res.cloudinary.com/demo/image/upload/c_fill,h_100,w_150/sample.jpg"
width="150" height="100" data-crop="fill" data-src="sample.jpg">
欲知有關(guān) jQuery 插件的更多細(xì)節(jié)新啼，可以點(diǎn)此查看文檔追城。
七.總結(jié)
現(xiàn)如今，網(wǎng)站與移動應(yīng)用的富媒體內(nèi)容越來越豐富燥撞，追蹤帶寬使用情況座柱、優(yōu)化下載和上傳時間，對于優(yōu)化用戶體驗都是至關(guān)重要的物舒。很明顯色洞，與 JPEG 或 PNG 相比 包括在圖片大小和質(zhì)量之間的平衡，以及這個新興的格式支持的功能等方面來講冠胯，WebP 有許多優(yōu)點(diǎn)火诸。
WebP 格式是幫助你優(yōu)化用戶體驗的又一利器，雖然瀏覽器對 WebP 的支持仍有很多需要改進(jìn)的地方荠察，但是恰當(dāng)是使用一些工具和技術(shù)置蜀，很容易體會到 WebP 的好處奈搜，也不會疏遠(yuǎn)使用不支持這種格式的瀏覽器的用戶。
注：本文改編自外文文章“How to support WebP images, save bandwidth and improve user experience” 盯荤，by Nadav Soferman ,由 OneAPM 產(chǎn)品運(yùn)營整理改編發(fā)布.
原文地址:
http://cloudinary.com/blog/how_to_support_webp_images_save_bandwidth_and_improve_user_performance
Browser Insight 是一個基于真實用戶的 Web 前端性能監(jiān)控平臺媚污，能夠幫大家定位網(wǎng)站性能瓶頸，網(wǎng)站加速效果可視化廷雅；支持瀏覽器、微信京髓、App瀏覽 HTML 和 HTML5頁面航缀。想閱讀更多技術(shù)文章，請訪問 OneAPM 官方技術(shù)博客堰怨。
本文轉(zhuǎn)自 OneAPM 官方博客
