近期我們對(duì)線上WordPress主題統(tǒng)一進(jìn)行了一次更新，本次更新的主要內(nèi)容是為主題增加WebP支持，通過(guò)這個(gè)新功能可以為網(wǎng)站的圖片智能替換成WebP格式圖片。

WebP？如果你還沒(méi)有聽(tīng)過(guò)的話那就先來(lái)了解一下。

WebP介紹

先看下維基百科的介紹

WebP（發(fā)音weppy），是一種同時(shí)提供了有損壓縮與無(wú)損壓縮（可逆壓縮）的圖片文件格式，派生自視頻編碼格式VP8，被認(rèn)為是WebM多媒體格式的姊妹項(xiàng)目，是由Google在購(gòu)買On2 Technologies后發(fā)展出來(lái)，以BSD授權(quán)條款發(fā)布。

WebP最初在2010年發(fā)布，目標(biāo)是減少文件大小，但達(dá)到和JPEG格式相同的圖片質(zhì)量，希望能夠減少圖片檔在網(wǎng)絡(luò)上的發(fā)送時(shí)間。2011年11月8日，Google開(kāi)始讓W(xué)ebP支持無(wú)損壓縮和透明色（alpha通道）的功能，而在2012年8月16日的參考實(shí)做libwebp 0.2.0中正式支持。根據(jù)Google較早的測(cè)試，WebP的無(wú)損壓縮比網(wǎng)絡(luò)上找到的PNG檔少了45％的文件大小，即使這些PNG檔在使用pngcrush和PNGOUT處理過(guò)，WebP還是可以減少28％的文件大小。

從上面的介紹可以看出，WebP是谷歌推出的一種圖片格式，它的優(yōu)點(diǎn)就是同等畫面質(zhì)量下，體積比jpg、png這些少了28%甚至45％，這也意味著使用webp可以使圖片體積更小從而達(dá)到極大提升圖片加載速度的效果，并且也能降低服務(wù)器帶寬和流量成本（說(shuō)不定可以節(jié)省幾套主題的費(fèi)用）。

簡(jiǎn)單來(lái)說(shuō)就是2個(gè)方面的好處：

  1. 用戶體驗(yàn)：更少的加載時(shí)間，減少等待；
  2. 節(jié)約成本：更少的帶寬、流量，節(jié)省建站成本

實(shí)際效果如何呢？下面以JustNews主題演示站為例進(jìn)行測(cè)試，效果如圖：

webp效果對(duì)比

如圖所示，開(kāi)啟webp前圖片大小4.5M，開(kāi)啟后只有2.3M，幾乎減少了一半，效果非常明顯。

WebP的兼容性

既然webp這么好，為什么沒(méi)有大范圍使用呢？

這是因?yàn)閣ebp畢竟只是谷歌自己推出的，主要應(yīng)用在谷歌自己的chrome瀏覽器和安卓系統(tǒng)，所以是存在兼容性問(wèn)題的，如果使用不兼容的瀏覽器打開(kāi)是無(wú)法顯示webp圖片的，有興趣的話可以看下webp在caniuse上的兼容情況：https://caniuse.com/#search=webp WebP的兼容性

圖中右上角圈起來(lái)的數(shù)字看到?jīng)]？根據(jù)全球?yàn)g覽器份額情況統(tǒng)計(jì)是有73.17%是支持的，并且這么優(yōu)秀的圖片格式已經(jīng)被越來(lái)越多的瀏覽器和設(shè)備兼容，這是大勢(shì)所趨，所以我們認(rèn)為這個(gè)兼容問(wèn)題是有必要找到解決方案的。

WPCOM主題WebP智能兼容方案

在我們新版的WordPress主題中，我們?cè)谇岸薺s代碼中增加了智能識(shí)別瀏覽器特性是否支持webp格式的功能，如果支持的話，則會(huì)自動(dòng)替換成webp格式的圖片，這時(shí)候?yàn)g覽器加載的就是webp圖片，如果瀏覽器不支持的話，則會(huì)繼續(xù)使用之前的圖片，這樣就能完美的解決兼容性問(wèn)題了。

其中有兩個(gè)技術(shù)細(xì)節(jié)需要單獨(dú)說(shuō)一下：webp轉(zhuǎn)換和js識(shí)別替換。

webp轉(zhuǎn)換

由于webp并不是全部兼容，所以平常圖片還是需要用jpg、png這種通用格式，但是如果用戶自己轉(zhuǎn)換的話那就會(huì)很麻煩了，每張圖片親自轉(zhuǎn)換也很累的，而服務(wù)器端自動(dòng)完成轉(zhuǎn)換的話會(huì)涉及到第三方擴(kuò)展的安裝、配置，這對(duì)普通用戶是非常困難的，而虛擬主機(jī)用戶就更沒(méi)希望了，所以在webp轉(zhuǎn)換上主題是基于第三方云儲(chǔ)存或者CDN的自動(dòng)轉(zhuǎn)換服務(wù)完成的，例如常見(jiàn)的七牛、阿里云OSS、騰訊云cos、又拍云這些都是有的。

js識(shí)別替換

之所以選擇在js端識(shí)別，是基于2方面原因考慮的：

  1. 如果在PHP進(jìn)行圖片處理，無(wú)法避免頁(yè)面緩存的問(wèn)題：例如使用兼容webp的瀏覽器訪問(wèn)，生成了支持webp的緩存，那么使用不兼容的瀏覽器訪問(wèn)就會(huì)自動(dòng)返回這個(gè)緩存，這時(shí)候webp圖片就無(wú)法正常顯示了；
  2. PHP無(wú)法正確判斷是否兼容：可能偽造瀏覽器UA信息，也可能預(yù)設(shè)的兼容列表過(guò)時(shí)導(dǎo)致判斷錯(cuò)誤

不過(guò)選擇js識(shí)別的話也會(huì)面臨一個(gè)問(wèn)題：由于瀏覽器加載渲染頁(yè)面的原因，js在執(zhí)行的時(shí)候圖片可能已經(jīng)加載完成，也就是說(shuō)js來(lái)不及替換成webp格式就已經(jīng)加載了原來(lái)的格式圖片了，如果這時(shí)候再加載webp不僅毫無(wú)意義，反而多此一舉浪費(fèi)資源。所以鑒于這個(gè)緣故，webp的識(shí)別替換是需要配合主題的圖片延遲加載（lazyload）功能，開(kāi)啟了lazyload的圖片頁(yè)面加載完成后不會(huì)立即加載，而是根據(jù)瀏覽器滾動(dòng)到圖片的位置的時(shí)候加載，剛好完美解決了上面的問(wèn)題了。

所以最后由于這兩個(gè)技術(shù)問(wèn)題的原因，我們的webp需要配合第三方服務(wù)進(jìn)行webp轉(zhuǎn)換，以及開(kāi)啟主題的圖片延遲加載功能才可生效。

WebP功能開(kāi)啟

說(shuō)了這么多，這么牛的功能怎么開(kāi)啟呢？

  1. 剛剛說(shuō)了，這個(gè)功能是我們主題里面的功能，如果沒(méi)有購(gòu)買我們的主題的話可以了解一下：http://www.air-home.cn/themes

  2. 然后webp轉(zhuǎn)換是依賴第三方云儲(chǔ)存或者CDN完成的，所以需要使用了這類服務(wù)并且了解下他們是否支持webp，目前據(jù)我所知七牛、又拍云、阿里云oss、騰訊云cos都是支持的，可以在主題設(shè)置>優(yōu)化加速里面設(shè)置webp后綴。

  3. 同時(shí)前端webp識(shí)別是配合圖片延遲加載功能，可以在主題設(shè)置>優(yōu)化加速里面開(kāi)啟常規(guī)優(yōu)化-縮略圖延遲加載和文章優(yōu)化-圖片延遲加載。