俗話説：一圖勝千言。在網上，圖片雖然可以讓用户更加簡單明瞭地看到更多信息，但是圖片體積也可以抵過上千字節甚至更多。研究表明，打開一個 HTTP 網頁，其中圖片平均佔比為 64%。在圖片佔比如此高的情況下，用户對圖片的體積就有非常高的要求了。
我們可以通過圖片壓縮的方式來縮小圖片體積。但是要如何保證圖片體積縮小的同時而不大幅降低圖片質量呢？傳統的圖片格式，如 JPEG，PNG，GIF 等格式圖片已經沒有太多的優化空間，而 Google 於 2010 年推出 WebP 圖像格式。WebP 圖像在相同素質下，比 JPG 體積小 25-34％，比 PNG 則小 26％，並且，WebP 更可以做到動態 GIF 的部分功能，也支持透明化及失真，無失真壓縮等模式。
市面上的瀏覽器，例如 Chrome，Firefox，Microsoft Edge 都已經支持 WebP，隨着 iOS 14 以及 macOS Big Sur 的發佈，在 WebP 發佈的 11 年後，蘋果終於跟進，Safari 開始支持 WebP。至此，主流瀏覽器均已正式支持 WebP 格式，相信今後 WebP 會獲得更為廣泛的部署和支持。
WebP 的由來
WebP 的誕生起初是因為 Google 開發了一種基於 VP8 視頻編碼格式的 WebM 視頻格式，Google 的工程師意識到 WebM 格式非常適合壓縮關鍵幀，由此開發了 WebP 圖片格式。
WebP 主要目標是使圖片質量和 JPEG 格式質量相同的情況下，減少圖片文件的體積，從而減少互聯網上圖片的發送時間和流量消耗。發佈不久之後，WebP 便被整合到 Chrome 以及 Android 系統中，並且 Google 發佈了函數庫，讓 iOS 應用等其他平台支持 WebP 格式。
相較於 JPEG 只能提供有損壓縮，WebP 同時提供有損壓縮和無損壓縮：
- 有損 WebP 壓縮使用的圖像編碼方式與 VP8 視頻編解碼器中壓縮視頻關鍵幀的方法相同。利用圖像已編碼部分預測未編碼部分，將圖像細分來進行預測處理，分塊越細預測越準確。獲取編碼數值後將原圖像數據減去預測數據得到差值，僅對差值進行編碼，以此控制大小；
- 無損 WebP 壓縮使用已知的圖像片段來精確地重建新的像素，在無法找到相應的匹配值的情況下，使用本地調色板進行優化。
WebP 的壓縮效果
與其他圖片格式相比，WebP 集合了多種圖片文件格式的優點。它可以像 JPEG 一樣適合壓縮照片和其他細節豐富的圖片，或者像 GIF 一樣顯示動態圖片，又或者像 PNG 一樣支持透明圖像。根據 Google 的測試，WebP 無損壓縮圖片比 PNG 圖片少了 45％ 的文件體積，即使這些 PNG 圖片在使用 pngcrush 和 PNGOUT 處理後，WebP 依舊可以減少 28％ 的文件體積。
同等質量下得到體積更小的圖片，這也是 WebP 的意義。通過壓縮圖片體積來降低帶寬的消耗，為線上服務降低流量成本，更快的展示和更短的圖像共享時間，為網站及移動應用用户帶去更好的用户體驗。像淘寶、京東這類有着大量商品圖片的電商網站，或者如花瓣、unsplash 等圖庫業務，都已經開始使用 WebP 來提高頁面加載速度。
在項目中使用 WebP
既然 WebP 有這麼多優勢，並且瀏覽器平台基本都已經支持，那如何在項目中部署 WebP 呢？
我們可以先使用 webpack、gulp 等插件來批量轉換出一批 WebP 圖片格式的圖片，然後在前端使用 <picture> 標籤，在訪問端支持 WebP 的情況下，實現自動加載 WebP 格式的圖片。
<picture class="picture">
<source type="image/webp" srcset="image.webp">
</picture>如果瀏覽器支持WebP格式，就會加載image.webp，否則會加載image.jpg。
又或者，我們有很多的頁面往往會用到圖片的“懶加載”——通常是把圖片的 URL 放在 img 元素的一個自定義屬性中，然後用 JS 在適當的時機將 URL 賦值給 src 屬性。用類似的原理，我們可以根據瀏覽器是否支持 WebP 格式，給 img 元素賦予不同的 src 值，例如下方的偽代碼。
$('[data-url]').each(function(item, index){
var ext = window.__supportWebP__ ? '.webp' : ''
$(this).attr('src', $(this).attr('data-url') + ext)
})以上都是常見的一些項目改造實現使用 WebP 的操作方法。但是這類改造都要涉及到代碼改造、項目重新部署，那麼有沒有更加優雅、更加快捷的方式，來使自己的網頁快速用上 WebP 呢？
又拍雲目前已經支持 WebP 圖片格式轉換，而且還支持 WebP 自適應功能。在又拍雲後台一鍵開啓 WebP 自適應功能，即可通過 CDN 平台智能判斷客户端瀏覽器是否支持 WebP 解碼，如果支持則返回 WebP 格式圖片，如果不支持則會返回原圖，在客户端以及源站無需任何改動。
在我們的實踐中，使用了 WebP 格式後，圖片的體積普遍縮小了 1/3 以上，既加快了網頁/App 的加載速度，節省了帶寬訪問流量，也讓用户流暢絲滑的訪問體驗更上一層樓。我們也做了一個 WebP 的壓縮效果體驗頁面，您也可以來快速體驗 WebP 的神奇魔力
推薦閲讀
Doge.jpg 的背後是什麼，你知道麼？
網頁出現不河蟹彈窗？那是被劫持了！
