webp是什么格式

webp是google在2010年開發的圖片格式，為網頁上的圖片提供了的無損和有損壓縮。web開發人員可以使用webp創建尺寸更小、細節更豐富的圖片，從而提高網站的速度。更快的加載速度對于網站的用戶體驗和網站的營銷效果至關重要。

為了在所有設備和用戶中達到比較佳的加載效果，您網站上的圖片文件大小不應超過500 kb。

相比png圖片，webp無損圖片通常比png圖片至少小25%。在相同的ssim(結構相似性)質量指數下，webp有損圖像通常比jpeg圖像小25%到34%。

無損webp也支持透明。但是在可以接受有損rgb壓縮的情況下，有損webp也支持透明，通常比png文件小三倍。

google報告稱，動畫gif文件轉換為有損webp后文件大小減少了64%，轉換為無損webp后文件大小減少了19%。

webp文件格式是基于riff(資源交換文件格式)的文檔格式。使用hexdump，您可以看到文件的簽名是52 49 46 46(riff):

$ hex dump-canonical pixel . webp 00000000 52 49 46 46 26 00 00 00[.] |riff.webpvp 8 | 00000010 1a 00 00 00 30 01 00 9d[.] |.0.*.| 00000020 0e 25 a4 00 03 70 00 fe [.] |.%.p.`.| 0000002e

獨立libwebp庫，作為webp技術規范的參考實現，可以從google的git倉庫或者tar包中獲取。

全80%的瀏覽器都與webp格式兼容。在寫這篇文章的時候，蘋果的safari瀏覽器不兼容。解決這個問題的辦法是提供jpg/巴布亞新幾內亞的圖片和webp圖片。有一些方法和wordpress插件可以做到這一點。

為什么要這么做？

我的部分工作是設計和維護我們組織的網站。由于網站是一個營銷工具，而網站的速度是衡量用戶體驗的重要指標，所以我一直致力于提高網站的速度。通過將圖片轉換成webp來減少圖片的大小是一個很好的解決方案。

我用web.dev檢測了其中一個網頁。該工具由燈塔公司提供，遵循apache 2.0許可證，可在https://github.com/googlechrome/lighthouse.找到

根據它的描述，“燈塔是一個開源的自動化工具，旨在提高網頁的質量。您可以在公共或經過身份驗證的網頁上運行它。它對性能、可用性、漸進式網絡應用、搜索引擎優化等進行審計。可以在chrome瀏覽器的開發工具中運行燈塔，也可以從命令行運行或者作為node模塊運行。您輸入一個指向燈塔的網址，燈塔將對該網頁執行一系列審計，然后生成該網頁的審計結果報告。您可以從報告中失敗的審計條目中了解如何優化網頁。每次審計都有一個相應的文檔，解釋項目為什么重要以及如何解決它。”

創建一個較小的webp圖片

我測試的頁面返回了三張圖片。在它生成的報告中，它提供了建議和目標。我選擇了它來報告650 kb的app-graphic圖片。通過轉換成webp格式，估計圖像大小可以減少到61 kb，節省589 kb。我在photoshop里轉換了，用默認的webp設置保存。它的文件大小是44.9kb.比預期的要好！從下面的photoshop截圖可以看出，兩張圖片在視覺質量上是完全相同的。

左：650 kb(實際大小)。右：44.9 kb(轉換后的目標大小)。

當然，也可以使用開源圖像編輯工具gimp將圖像導出到webp。它提供了幾個質量和壓縮參數：

另一張照片放大后：

png(左圖)和webp(右圖)都是從jpg轉換過來的。對比兩張圖，可以看出webp不僅文件大小更小，視覺質量也更好。

將圖片轉換為webp

您還可以使用linux命令行工具將圖片從jpg/巴布亞新幾內亞轉換為webp:

在命令行使用cwebp將png或jpg圖片文件轉換成webp格式。您可以使用以下命令將png圖片文件轉換為質量參數為80的webp圖片。

cwebp-q80 image.png-o image . webp

您也可以使用image magick，它可以在您的分發倉庫中找到。轉換的子命令是convert，它需要的所有參數都是輸入輸出文件：

轉換pixel.webp像素

使用編輯器將圖片轉換為webp

要在圖片編輯器中將圖片轉換為webp，可以使用gimp。從2.10版本開始，它本機支持webp。

如果你是photoshop用戶，你需要一個轉換插件，因為默認情況下photoshop不包含webp支持。根據apache許可證2.0發布的webpshop 0.2.1是一個用于打開和保存webp圖片(包括動畫圖片)的photoshop模塊，可以在https://github.com/webmproject/webpshop.找到

為了正常使用，需要將其放入photoshop插件目錄下的bin文件夾中：

windows x64:c : \程序文件\ adobe \ adobe photoshop \插件\webpshop.8bi

mac:應用/adobe photoshop/插件/webpshop.plugin

wordpress上的webp

很多網站都是用wordpress搭建的(我的網站是)。因此，沃

dpress如何上傳webp圖片？在寫這篇文章的時候，并不支持。但是當然也有滿足這個需求的插件，所以你可以在你的網站上同時準備webp和png/jpg圖片(針對蘋果用戶)。

馬呂斯主持中有以下說明：

“把webp圖片直接上傳到wordpress會怎么樣？很簡單。只需在你的主題functions.php文件中添加幾行。wordpress默認不支持顯示和上傳webp文件，但是我將通過幾個簡單的步驟向您展示如何讓它支持。登錄到你的wordpress管理員界面，進入“外觀/主題編輯器”找到functions.php。復制以下代碼，將其粘貼到文件中并保存：

//* * *為webp圖像文件啟用上載。*/function webp _ upload _ mimes($ existing _ mimes){ $ existing _ mimes[" webp "]=" image/webp "；返回$ existing _ mimes} add _ filter(" mime _ type "，" webp _ upload _ mimes ")；

如果您想在“媒體/媒體庫”中查看縮略圖預覽，您需要將以下代碼添加到functions.php文件中。為了找到functions.php文件，進入“外觀/主題編輯器”并搜索functions.php，然后復制以下代碼，將其粘貼到文件中并保存：

//** *為webp圖像文件啟用預覽/縮略圖。*/function webp _ is _ displayed($ result，$ path){ if($ result===false){ $ displayed _ image _ types=array(imagetype _ webp)；$ info=@ getimagesize($ path)；if(empty($ info)){ $ result=false；} elseif(！in_array($info[2]，$ displayed _ image _ types)){ $ result=false；} else { $ result=true} }返回$ result} add _ filter(" file _ is _ displayed _ image "，" webp _ is _ displayable "，10，2)；

"

webp與未來

webp是一種健壯且優化的格式。它看起來更好，有更高的壓縮比，并且具有大多數其他常見圖片格式的所有特征。不要再等了，現在就用。