為什麼大家都在用 WebP？

發表於2023-09-18
Web

WebP 是谷歌在 2010 年提出的一種新型的圖片格式，放到現在來講，已經不算是“新”技術了，畢竟已經有了更新的 JPEG XL 和 AVIF 。但是在日常工作中，大家時常會碰到儲存下來的圖片的字尾是 .webp。那麼 WebP 到底有什麼魔力，讓越來越多的網站“拋棄”常用的 PNG、JPG 而青睞它呢？

瞭解 WebP

長期以來，載入速度一直是最佳化網站最重要的因素之一，訪問者和搜尋引擎都將呼叫頁面所需的時間作為重要的評價標準。精簡的程式碼或使用快取機制是解決網站快速載入方案的一部分，而網頁中展示的圖片大小也影響著載入速度，這時 WebP 就有了用武之地。

WebP 圖片格式來源於 VP8 影片編解碼器，也就是 WebM 影片容器，是 WebM 影片格式的單個壓縮框架。VP8 編解碼器的一個強大功能就是能夠進行幀內壓縮，能將影片的每個幀都被壓縮，再壓縮幀與幀之間的差異。WebP 的壓縮演算法分為有失真壓縮演算法和無失真壓縮演算法。

有失真壓縮演算法：基於 VP8 影片編解碼器，它可以透過犧牲一些影像細節來減小檔案大小。有失真壓縮演算法可以根據影像的特徵和顏色分佈等資訊，選擇最佳的壓縮方式和引數，以達到最小化檔案大小的目的。

無失真壓縮演算法：基於 LZ77 演算法和 ANS 編碼器，它可以在保持完整影像的情況下減小檔案大小。無失真壓縮演算法可以根據影像的特徵和顏色分佈等資訊，選擇最佳的壓縮方式和引數。

WebP 的高效壓縮和快速載入速度，使其成為網頁設計的理想格式。WebP 廣泛應用於許多網站和應用程式中，包括 Google Chrome 瀏覽器、YouTube、Facebook、Pinterest 和 WordPress 等。雖然前幾年有部分瀏覽器不支援 WebP，到了今天，除了已經退休的 IE 瀏覽器，基本上瀏覽器都已經開放支援 WebP。

WebP 的優勢

對於含有大量圖片的網站，它們大部分會使用 WebP 格式的圖片，不僅可以減少流量頻寬，也可以減少使用者訪問的載入時間，提高使用者體驗。目前 WebP 已成為主流網站喜歡的圖片格式。

更小的檔案大小

相較於傳統的 PNG、JPG，甚至是動圖 GIF 的格式，WebP 比它們的空間更小。根據谷歌的測試，WebP 格式的圖片可以比 JPEG 格式的圖片小 26%-34%，比 PNG 格式的圖片小 25%-34 %。

更快的載入速度

由於 WebP 格式的圖片檔案更小，所以可以更快地載入和顯示，提高使用者的訪問速度和體驗。特別是在移動裝置和低頻寬環境下，WebP 格式的圖片可以更快地載入和顯示，減少使用者的等待時間和流量消耗。

高質量的影像顯示

WebP 格式的圖片可以提供高質量的影像顯示效果，尤其是在有失真壓縮的情況下，可以保持比 JPEG 格式更好的影像質量。這是因為 WebP 格式的圖片採用了基於 VP8 影片編解碼器的壓縮演算法，可以在犧牲一部分細節的情況下保持更好的影像質量。

支援透明度、動畫效果

WebP 格式的圖片不僅可以支援有損和無損的壓縮方式，還支援透明度和動畫效果。特別是在處理透明度和動畫效果時，WebP 格式的圖片可以比 GIF 和 PNG 格式更小，同時保持更好的顯示效果。

在網頁中運用 WebP

既然 WebP 這麼好用，那麼如何在網頁中運用 WebP 圖片呢？這其實很簡單，我們可以透過 HTML 程式碼，在網頁中運用 WebP 格式的圖片。例如：xml

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="image">
</picture>

在上面的程式碼中，<picture> 元素包含了兩個 <source> 元素和一個 <img> 元素。<source> 元素用於指定不同格式的圖片，<img> 元素則是在所有格式的圖片都無法顯示時顯示的預設圖片。替換：對於不支援 WebP 格式的瀏覽器，可以使用 JavaScript 進行檢測和替換。例如：stylus

var img = new Image();
img.onload = function() {
  if (img.width > 0 && img.height > 0) {
    document.getElementById('my-img').src = 'image.webp';
  }
}
img.onerror = function() {
  document.getElementById('my-img').src = 'image.jpg';
}
img.src = 'image.webp';

在上面的程式碼中，使用 JavaScript 建立一個新的 Image 物件，並指定其 src 屬性為 WebP 格式的圖片。如果圖片能夠正常載入，則將 <img> 元素的 src 屬性設定為 WebP 格式的圖片，否則將其設定為其他格式的圖片。

這時，也有使用者會擔心，並不是所有的瀏覽器都支援 WebP，例如 IE。這裡強烈推薦下又拍雲 WebP 自適應功能，無需網站伺服器和前端等層面技術上的任何改動，就能解除你的顧慮。在後臺一鍵開啟 WebP 自適應功能，即可透過 CDN 平臺智慧判斷客戶端瀏覽器是否支援 WebP 解碼，如果支援則返回 WebP 格式圖片，如果不支援則會返回原圖，在客戶端以及源站無需任何改動。

技術的發展總是迅速的，近兩年來 JPEG XL 和 AVIF 兩種新興的圖片格式已經逐漸開始流行，它們在壓縮效率、影像細節保留等方面已經在一定程度上超過了 WebP，讓我們期待一下未來的圖片格式發展吧。

相關文章