|
為主題增加WebP支持，通過這個新功能可以為網站的圖片智能替換成WebP格式圖片。 WebP？如果你還沒有聽過的話那就先來瞭解一下。 WebP介紹先看下維基百科的介紹 WebP（發音weppy），是一種同時提供了有損壓縮與無損壓縮（可逆壓縮）的圖片文件格式，派生自視頻編碼格式VP8，被認為是WebM多媒體格式的姊妹項目，是由Google在購買On2 Technologies後發展出來，以BSD授權條款發佈。WebP最初在2010年發佈，目標是減少文件大小，但達到和JPEG格式相同的圖片質量，希望能夠減少圖片檔在網絡上的發送時間。2011年11月8日，Google開始讓WebP支持無損壓縮和透明色（alpha通道）的功能，而在2012年8月16日的參考實做libwebp 0.2.0中正式支持。根據Google較早的測試，WebP的無損壓縮比網絡上找到的PNG檔少了45％的文件大小，即使這些PNG檔在使用pngcrush和PNGOUT處理過，WebP還是可以減少28％的文件大小。從上面的介紹可以看出，WebP是谷歌推出的一種圖片格式，它的優點就是同等畫面質量下，體積比jpg、png這些少了28%甚至45％，這也意味著使用webp可以使圖片體積更小從而達到極大提升圖片加載速度的效果，並且也能降低服務器帶寬和流量成本（說不定可以節省幾套主題的費用）。 簡單來說就是2個方面的好處： - 用戶體驗：更少的加載時間，減少等待；
- 節約成本：更少的帶寬、流量，節省建站成本
實際效果如何呢？下面以JustNews主題演示站為例進行測試，效果如圖： 如圖所示，開啟webp前圖片大小4.5M，開啟後只有2.3M，幾乎減少了一半，效果非常明顯。 WebP的兼容性既然webp這麼好，為什麼沒有大範圍使用呢？ 圖中右上角圈起來的數字看到沒？根據全球瀏覽器份額情況統計是有73.17%是支持的，並且這麼優秀的圖片格式已經被越來越多的瀏覽器和設備兼容，這是大勢所趨，所以我們認為這個兼容問題是有必要找到解決方案的。 WPCOM主題WebP智能兼容方案在我們新版的WordPress主題中，我們在前端js代碼中增加了智能識別瀏覽器特性是否支持webp格式的功能，如果支持的話，則會自動替換成webp格式的圖片，這時候瀏覽器加載的就是webp圖片，如果瀏覽器不支持的話，則會繼續使用之前的圖片，這樣就能完美的解決兼容性問題了。 其中有兩個技術細節需要單獨說一下：webp轉換和js識別替換。 webp轉換 由於webp並不是全部兼容，所以平常圖片還是需要用jpg、png這種通用格式，但是如果用戶自己轉換的話那就會很麻煩了，每張圖片親自轉換也很累的，而服務器端自動完成轉換的話會涉及到第三方擴展的安裝、配置，這對普通用戶是非常困難的，而虛擬主機用戶就更沒希望了，所以在webp轉換上主題是基於第三方雲儲存或者CDN的自動轉換服務完成的，例如常見的七牛、阿里雲OSS、騰訊雲cos、又拍雲這些都是有的。 js識別替換 之所以選擇在js端識別，是基於2方面原因考慮的： - 如果在PHP進行圖片處理，無法避免頁面緩存的問題：例如使用兼容webp的瀏覽器訪問，生成了支持webp的緩存，那麼使用不兼容的瀏覽器訪問就會自動返回這個緩存，這時候webp圖片就無法正常顯示了；
- PHP無法正確判斷是否兼容：可能偽造瀏覽器UA信息，也可能預設的兼容列表過時導致判斷錯誤
不過選擇js識別的話也會面臨一個問題：由於瀏覽器加載渲染頁面的原因，js在執行的時候圖片可能已經加載完成，也就是說js來不及替換成webp格式就已經加載了原來的格式圖片了，如果這時候再加載webp不僅毫無意義，反而多此一舉浪費資源。所以鑒於這個緣故，webp的識別替換是需要配合主題的圖片延遲加載（lazyload）功能，開啟了lazyload的圖片頁面加載完成後不會立即加載，而是根據瀏覽器滾動到圖片的位置的時候加載，剛好完美解決了上面的問題了。 所以最後由於這兩個技術問題的原因，我們的webp需要配合第三方服務進行webp轉換，以及開啟主題的圖片延遲加載功能才可生效。 WebP功能開啟說了這麼多，這麼牛的功能怎麼開啟呢？
| 
