俗話說：一圖勝千言。在網(wǎng)上，圖片雖然可以讓用戶更加簡單明了地看到更多信息，但是圖片體積也可以抵過上千字節(jié)甚至更多。研究表明，打開一個(gè) HTTP 網(wǎng)頁，其中圖片平均占比為 64%。在圖片占比如此高的情況下，用戶對(duì)圖片的體積就有非常高的要求了。

我們可以通過圖片壓縮的方式來縮小圖片體積。但是要如何保證圖片體積縮小的同時(shí)而不大幅降低圖片質(zhì)量呢？傳統(tǒng)的圖片格式，如 JPEG，PNG，GIF 等格式圖片已經(jīng)沒有太多的優(yōu)化空間，而 Google 于 2010 年推出 WebP 圖像格式。WebP 圖像在相同素質(zhì)下，比 JPG 體積小 25-34％，比 PNG 則小 26％，并且，WebP 更可以做到動(dòng)態(tài) GIF 的部分功能，也支持透明化及失真，無失真壓縮等模式。

市面上的瀏覽器，例如 Chrome，Firefox，Microsoft Edge 都已經(jīng)支持 WebP，隨著 iOS 14 以及 macOS Big Sur 的發(fā)布，在 WebP 發(fā)布的 11 年后，蘋果終于跟進(jìn)，Safari 開始支持 WebP。至此，主流瀏覽器均已正式支持 WebP 格式，相信今后 WebP 會(huì)獲得更為廣泛的部署和支持。

WebP 的由來

WebP 的誕生起初是因?yàn)?Google 開發(fā)了一種基于 VP8 視頻編碼格式的 WebM 視頻格式，Google 的工程師意識(shí)到 WebM 格式非常適合壓縮關(guān)鍵幀，由此開發(fā)了 WebP 圖片格式。

WebP 主要目標(biāo)是使圖片質(zhì)量和 JPEG 格式質(zhì)量相同的情況下，減少圖片文件的體積，從而減少互聯(lián)網(wǎng)上圖片的發(fā)送時(shí)間和流量消耗。發(fā)布不久之后，WebP 便被整合到 Chrome 以及 Android 系統(tǒng)中，并且 Google 發(fā)布了函數(shù)庫，讓 iOS 應(yīng)用等其他平臺(tái)支持 WebP 格式。

相較于 JPEG 只能提供有損壓縮，WebP 同時(shí)提供有損壓縮和無損壓縮：

• 有損 WebP 壓縮使用的圖像編碼方式與 VP8 視頻編解碼器中壓縮視頻關(guān)鍵幀的方法相同。利用圖像已編碼部分預(yù)測未編碼部分，將圖像細(xì)分來進(jìn)行預(yù)測處理，分塊越細(xì)預(yù)測越準(zhǔn)確。獲取編碼數(shù)值后將原圖像數(shù)據(jù)減去預(yù)測數(shù)據(jù)得到差值，僅對(duì)差值進(jìn)行編碼，以此控制大小；

• 無損 WebP 壓縮使用已知的圖像片段來精確地重建新的像素，在無法找到相應(yīng)的匹配值的情況下，使用本地調(diào)色板進(jìn)行優(yōu)化。

WebP 的壓縮效果

與其他圖片格式相比，WebP 集合了多種圖片文件格式的優(yōu)點(diǎn)。它可以像 JPEG 一樣適合壓縮照片和其他細(xì)節(jié)豐富的圖片，或者像 GIF 一樣顯示動(dòng)態(tài)圖片，又或者像 PNG 一樣支持透明圖像。根據(jù) Google 的測試，WebP 無損壓縮圖片比 PNG 圖片少了 45％ 的文件體積，即使這些 PNG 圖片在使用 pngcrush 和 PNGOUT 處理后，WebP 依舊可以減少 28％ 的文件體積。

同等質(zhì)量下得到體積更小的圖片，這也是 WebP 的意義。通過壓縮圖片體積來降低帶寬的消耗，為線上服務(wù)降低流量成本，更快的展示和更短的圖像共享時(shí)間，為網(wǎng)站及移動(dòng)應(yīng)用用戶帶去更好的用戶體驗(yàn)。像淘寶、京東這類有著大量商品圖片的電商網(wǎng)站，或者如花瓣、unsplash 等圖庫業(yè)務(wù)，都已經(jīng)開始使用 WebP 來提高頁面加載速度。

在項(xiàng)目中使用 WebP

既然 WebP 有這么多優(yōu)勢(shì)，并且瀏覽器平臺(tái)基本都已經(jīng)支持，那如何在項(xiàng)目中部署 WebP 呢？

我們可以先使用 webpack、gulp 等插件來批量轉(zhuǎn)換出一批 WebP 圖片格式的圖片，然后在前端使用 標(biāo)簽，在訪問端支持 WebP 的情況下，實(shí)現(xiàn)自動(dòng)加載 WebP 格式的圖片。

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

如果瀏覽器支持WebP格式，就會(huì)加載image.webp，否則會(huì)加載image.jpg。

又或者，我們有很多的頁面往往會(huì)用到圖片的“懶加載”——通常是把圖片的 URL 放在 img 元素的一個(gè)自定義屬性中，然后用 JS 在適當(dāng)?shù)臅r(shí)機(jī)將 URL 賦值給 src 屬性。用類似的原理，我們可以根據(jù)瀏覽器是否支持 WebP 格式，給 img 元素賦予不同的 src 值，例如下方的偽代碼。

$('[data-url]').each(function(item, index){var ext = window.__supportWebP__ ? '.webp' : ''$(this).attr('src', $(this).attr('data-url') + ext) })

以上都是常見的一些項(xiàng)目改造實(shí)現(xiàn)使用 WebP 的操作方法。但是這類改造都要涉及到代碼改造、項(xiàng)目重新部署，那么有沒有更加優(yōu)雅、更加快捷的方式，來使自己的網(wǎng)頁快速用上 WebP 呢？

又拍云目前已經(jīng)支持 WebP 圖片格式轉(zhuǎn)換，而且還支持 WebP 自適應(yīng)功能。在又拍云后臺(tái)一鍵開啟 WebP 自適應(yīng)功能，即可通過 CDN 平臺(tái)智能判斷客戶端瀏覽器是否支持 WebP 解碼，如果支持則返回 WebP 格式圖片，如果不支持則會(huì)返回原圖，在客戶端以及源站無需任何改動(dòng)。

在我們的實(shí)踐中，使用了 WebP 格式后，圖片的體積普遍縮小了 1/3 以上，既加快了網(wǎng)頁/App 的加載速度，節(jié)省了帶寬訪問流量，也讓用戶流暢絲滑的訪問體驗(yàn)更上一層樓。我們也做了一個(gè) WebP 的壓縮效果體驗(yàn)頁面，您也可以來快速體驗(yàn) WebP 的神奇魔力

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。