俗話說：一圖勝千言。在網上，圖片雖然可以讓用戶更加簡單明了地看到更多信息，但是圖片體積也可以抵過上千字節甚至更多。研究表明，打開一個 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 圖片格式的圖片，然后在前端使用 標簽，在訪問端支持 WebP 的情況下，實現自動加載 WebP 格式的圖片。

<picture class="picture"><source type="image/webp" srcset="image.webp"><img class="image" src="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 的神奇魔力

總結

以上是生活随笔為你收集整理的Safari 14.0 的功臣 Webp？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。