強勁迷你，Safari 14.0 的功臣你不來看看麼？

俗話說：一圖勝千言。在網上，圖片雖然可讓用戶更加簡單明瞭地看到更多信息，可是圖片體積也能夠抵過上千字節甚至更多。研究代表，打開一個 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">
  ![](image.jpg)
</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 的背後是什麼，你知道麼？

網頁出現不河蟹彈窗？那是被劫持了！