[[325101]]

了解一下這個開源的圖片編輯工具來節(jié)省時間和空間。

WebP 是 2010 年 Google 開發(fā)的一種圖片格式，它為網(wǎng)頁上的圖片提供了卓越的無損和有損壓縮。網(wǎng)站開發(fā)者們可以使用 WebP 來創(chuàng)建尺寸更小、細節(jié)更豐富的圖片，以此來提高網(wǎng)站的速度。更快的加載速度對于網(wǎng)站的用戶體驗和網(wǎng)站的營銷效果是至關(guān)重要的。

為了在所有設(shè)備和用戶中達到最佳加載效果，你網(wǎng)站上的圖片文件大小不應(yīng)該超過 500 KB。

與 PNG 圖片相比，WebP 無損圖片通常至少要比 PNG 圖片小 25%。在同等的 SSIM（結(jié)構(gòu)相似度structural similarity）質(zhì)量指標下，WebP 有損圖片通常比 JPEG 圖片小 25% 到 34%。

無損 WebP 也支持透明度。而在可接受有損 RGB 壓縮的情況下，有損 WebP 也支持透明度，通常其大小比 PNG 文件小三倍。

Google 報告稱，把動畫 GIF 文件轉(zhuǎn)換為有損 WebP 后文件大小減少了 64%，轉(zhuǎn)換為無損 WebP 后文件大小減少了 19%。

WebP 文件格式是一種基于 RIFF（資源互換文件格式resource interchange file format）的文檔格式。你可以用 hexdump 看到文件的簽名是 52 49 46 46（RIFF）：

$ hexdump --canonical pixel.webp
00000000  52 49 46 46 26 00 00 00  [...]  |RIFF&...WEBPVP8 |
00000010  1a 00 00 00 30 01 00 9d  [...]  |....0....*......|
00000020  0e 25 a4 00 03 70 00 fe  [...]  |.%...p...`....|
0000002e

獨立的 libwebp 庫作為 WebP 技術(shù)規(guī)范的參考實現(xiàn)，可以從 Google 的 Git 倉庫 或 tar 包中獲得。

全球在用的 80% 的 web 瀏覽器兼容 WebP 格式。本文撰寫時，Apple 的 Safari 瀏覽器還不兼容。解決這個問題的方法是將 JPG/PNG 圖片與 WebP 圖片一起提供，有一些方法和 Wordpress 插件可以做到這一點。

為什么要這樣做？

我的部分工作是設(shè)計和維護我們組織的網(wǎng)站。由于網(wǎng)站是個營銷工具，而網(wǎng)站的速度是衡量用戶體驗的重要指標，我一直致力于提高網(wǎng)站速度，通過把圖片轉(zhuǎn)換為 WebP 來減少圖片大小是一個很好的解決方案。

我使用了 web.dev 來檢測其中一個網(wǎng)頁，該工具是由 Lighthouse 提供服務(wù)的，遵循 Apache 2.0 許可證，可以在 https://github.com/GoogleChrome/lighthouse 找到。

據(jù)其官方描述，“LIghthouse 是一個開源的，旨在提升網(wǎng)頁質(zhì)量的自動化工具。你可以在任何公共的或需要鑒權(quán)的網(wǎng)頁上運行它。它有性能、可用性、漸進式 web 應(yīng)用、SEO 等方面的審計。你可以在 Chrome 瀏覽器的開發(fā)工具中運行 Lighthouse，也可以通過命令行或作為 Node 模塊運行。你輸入一個 URL 給 Lighthouse，它會對這個網(wǎng)頁進行一系列的審計，然后生成這個網(wǎng)頁的審計結(jié)果報告。從報告的失敗審計條目中可以知道應(yīng)該怎么優(yōu)化網(wǎng)頁。每條審計都有對應(yīng)的文檔解釋為什么該項目是重要的，以及如何修復它。”

創(chuàng)建更小的 WebP 圖片

我測試的頁面返回了三張圖片。在它生成的報告中，它提供了推薦和目標。我選擇了它報告有 650 KB 的 app-graphic 圖片。通過把它轉(zhuǎn)換為 WebP 格式，預計可以把圖片大小降到 61 KB，節(jié)省 589 KB。我在 Photoshop 中把它轉(zhuǎn)換了，用默認的 WebP 設(shè)置參數(shù)保存它，它的文件大小為 44.9 KB。比預期的還要好！從下面的 Photoshop 截圖中可以看出，兩張圖在視覺質(zhì)量上完全一樣。

左圖：650 KB（實際大?。?。右圖： 44.9 KB（轉(zhuǎn)換之后的目標大小）。

當然，也可以用開源圖片編輯工具 GIMP 把圖片導出為 WebP。它提供了幾個質(zhì)量和壓縮的參數(shù)：

另一張圖放大后：

PNG（左圖）和 WebP（右圖），都是從 JPG 轉(zhuǎn)換而來，兩圖對比可以看出 WebP 不僅在文件大小更小，在視覺質(zhì)量上也更優(yōu)秀。

把圖片轉(zhuǎn)換為 WebP

你也可以用 Linux 的命令行工具把圖片從 JPG/PNG 轉(zhuǎn)換為 WebP：

在命令行使用 cwebp 把 PNG 或 JPG 圖片文件轉(zhuǎn)換為 WebP 格式。你可以用下面的命令把 PNG 圖片文件轉(zhuǎn)換為質(zhì)量參數(shù)為 80 的 WebP 圖片。

cwebp -q 80 image.png -o image.webp

你還可以用 Image Magick，這個工具可能在你的發(fā)行版本軟件倉庫中可以找到。轉(zhuǎn)換的子命令是 convert，它需要的所有參數(shù)就是輸入和輸出文件：

convert pixel.png pixel.webp

使用編輯器把圖片轉(zhuǎn)換為 WebP

要在圖片編輯器中來把圖片轉(zhuǎn)換為 WebP，可以使用 GIMP。從 2.10 版本開始，它原生地支持 WebP。

如果你是 Photoshop 用戶，由于 Photoshop 默認不包含 WebP 支持，因此你需要一個轉(zhuǎn)換插件。遵循 Apache License 2.0 許可證發(fā)布的 WebPShop 0.2.1 是一個用于打開和保存包括動畫圖在內(nèi)的 WebP 圖片的 Photoshop 模塊，在 https://github.com/webmproject/WebPShop 可以找到。

為了能正常使用它，你需要把它放進 Photoshop 插件目錄下的 bin 文件夾：

Windows x64 ：C:\Program Files\Adobe\Adobe Photoshop\Plug-ins\WebPShop.8bi

Mac：Applications/Adobe Photoshop/Plug-ins/WebPShop.plugin

Wordpress 上的 WebP

很多網(wǎng)站是用 Wordpress 搭建的（我的網(wǎng)站就是）。因此，Wordpress 怎么上傳 WebP 圖片？本文撰寫時，它還不支持。但是，當然已經(jīng)有插件來滿足這種需求，因此你可以在你的網(wǎng)站上同時準備 WebP 和 PNG/JPG 圖片（為 Apple 用戶）。

在 Marius Hosting 有下面的說明：

“直接向 Wordpress 上傳 WebP 圖片會怎樣？這很簡單。向你的主題 functions.php 文件添加幾行內(nèi)容就可以了。Wordpress 默認不支持展示和上傳 WebP 文件，但是我會向你介紹一下怎么通過幾個簡單的步驟來讓它支持。登錄進你的 Wordpress 管理員界面，進入‘外觀/主題編輯器’找到 functions.php。復制下面的代碼粘貼到該文件最后并保存：

//** *Enable upload for webp image files.*/
function webp_upload_mimes($existing_mimes) {
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

如果你想在‘媒體/媒體庫’時看到縮略圖預覽，那么你需要把下面的代碼也添加到 functions.php 文件。為了找到 functions.php 文件，進入‘外觀/主題編輯器’并搜索 functions.php，然后復制下面的代碼粘貼到文件最后并保存：

//** * Enable preview / thumbnail for webp image files.*/
function webp_is_displayable($result, $path) {
    if ($result === false) {
        $displayable_image_types = array( IMAGETYPE_WEBP );
        $info = @getimagesize( $path );
 
        if (empty($info)) {
            $result = false;
        } elseif (!in_array($info[2], $displayable_image_types)) {
            $result = false;
        } else {
            $result = true;
        }
    }
 
    return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

”

WebP 和未來

WebP 是一個健壯而優(yōu)化的格式。它看起來更好，壓縮率更高，并具有其他大部分常見圖片格式的所有特性。不必再等了，現(xiàn)在就使用它吧。