了解這款開源圖像編輯工具以節(jié)省時間和空間。

WebP 是 2010 年開發(fā)的一種圖像格式，可為網(wǎng)頁上的圖像提供出色的無損和有損壓縮。 網(wǎng)站開發(fā)用戶可以使用 WebP 創(chuàng)建更小、更詳細的圖像以提高站點速度。更快的加載速度對于網(wǎng)站的用戶體驗和網(wǎng)站的營銷效果至關(guān)重要。

為了在所有設(shè)備和用戶之間實現(xiàn)最佳加載，您網(wǎng)站上的圖片文件大小不應(yīng)超過 500 KB。

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

無損 WebP 還支持透明度。雖然有損 RGB 壓縮是可以接受的，但有損 WebP 還支持透明度，通常比 PNG 文件小三倍。

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

WebP文件格式是基于RIFF（ File （文件））的文檔格式。可以看到文件的簽名是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

獨立庫用作 WebP 規(guī)范的參考實現(xiàn)，可從 Git 存儲庫或 獲得。

全球 80% 的網(wǎng)絡(luò)瀏覽器都與 WebP 格式兼容。在撰寫本文時php多圖片上傳代碼，的瀏覽器尚不兼容。這個問題的解決方案是提供 JPG/PNG 圖像和 WebP 圖像網(wǎng)站優(yōu)化，有方法和插件可以做到這一點。

為什么要這樣做？

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

我使用 web.dev 來檢測其中一個網(wǎng)頁，該工具由 2.0 許可證提供，可以在以下位置找到。

根據(jù)其官方描述，“是一款旨在提高網(wǎng)頁質(zhì)量的開源自動化工具。您可以在任何公共或經(jīng)過身份驗證的網(wǎng)頁上運行它。它具有性能、可用??性、漸進式 Web 應(yīng)用程序、 SEO 審計等小程序開發(fā)，你可以在瀏覽器的開發(fā)工具中運行php多圖片上傳代碼，也可以通過命令行運行，也可以作為Node模塊運行，你輸入一個URL，它會對頁面進行一系列的審計，然后生成頁面的審計結(jié)果報告。報告的失敗審核條目給出了頁面應(yīng)該如何優(yōu)化的想法。每個審核都有相應(yīng)的文檔解釋為什么該項目很重要以及如何修復(fù)它?！?/p>

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

我測試的頁面返回了三張圖片。在它生成的報告中，它提供了建議和目標(biāo)。我選擇了報告 650 KB 的 app-。通過將其轉(zhuǎn)換為 WebP 格式，預(yù)計將圖像大小減小到 61 KB，節(jié)省 589 KB。我將其轉(zhuǎn)換為 ，使用默認的 WebP 設(shè)置保存，文件大小為 44.9 KB。甚至比預(yù)期的還要好！從下面的截圖可以看出，兩張圖片的視覺質(zhì)量是一樣的。

左：650 KB（實際大?。Ｓ遥?4.9 KB（轉(zhuǎn)換后的目標(biāo)大小）。

當(dāng)然，你也可以使用開源的圖像編輯工具 GIMP 將圖像導(dǎo)出到 WebP。它提供了幾個質(zhì)量和壓縮參數(shù)：

另一張圖片放大：

PNG（左圖）和WebP（右圖）都是從JPG轉(zhuǎn)換而來的。對比兩張圖片可以看出，WebP 不僅文件體積更小，而且視覺質(zhì)量也更好。

將圖像轉(zhuǎn)換為 WebP

您還可以使用命令行工具將圖像從 JPG/PNG 轉(zhuǎn)換為 WebP：

在命令行中使用，將 PNG 或 JPG 圖像文件轉(zhuǎn)換為 WebP 格式。您可以使用以下命令將PNG圖像文件轉(zhuǎn)換為質(zhì)量參數(shù)為80的WebP圖像。

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

您也可以使用 ，它可能在您的發(fā)行版的存儲庫中可用。轉(zhuǎn)換的子命令是 ，它需要的所有參數(shù)都是輸入和輸出文件：

convert pixel.png pixel.webp

使用編輯器將圖像轉(zhuǎn)換為 WebP

要在圖像編輯器中將圖像轉(zhuǎn)換為 WebP，請使用 GIMP。從 2.10 版本開始，它原生支持 WebP。

如果您是用戶，則需要一個轉(zhuǎn)換插件，因為默認情況下不包括 WebP 支持。在 2.0 許可下發(fā)布，0.2.1 是一個用于打開和保存 WebP 圖像（包括動畫圖像）的模塊。

為了能正常使用，需要把它放到目錄的bin文件夾中：

x64: C:\\\\插件\.8bi

Mac://插件/。

WebP 開啟

許多網(wǎng)站都是用（我的）構(gòu)建的。那么，如何上傳 WebP 圖片呢？在撰寫本文時，它還不受支持。但是當(dāng)然已經(jīng)有插件可以滿足這種需求，因此您可以在您的網(wǎng)站上準(zhǔn)備 WebP 和 PNG/JPG 圖像（供用戶使用）。

以下說明可用于：

“直接上傳WebP圖片怎么樣？很簡單，只要在你的主題.php文件中添加幾行即可。默認不支持顯示和上傳WebP文件，但我會告訴你如何傳遞幾行。使其支持的簡單步驟。登錄到您的管理界面，轉(zhuǎn)到“外觀/主題編輯器”并找到 .php。復(fù)制下面的代碼并將其粘貼到文件末尾并保存：

//** * for webp .*/ ($) { $['webp'] = '/webp'; $;}('', '');

如果您想在“媒體/庫”時看到縮略圖預(yù)覽，那么您還需要將以下代碼添加到您的 .php 文件中。要找到 .php 文件，請轉(zhuǎn)到“外觀/主題編輯器”并搜索 .php，然后將以下代碼復(fù)制并粘貼到文件末尾并保存：

//** * / for webp .*/ ($, $path) { if ($ === ) { $pes = ( ); $info = @( $path );如果 (($info) ) { $ = ; } (!($info[2], $pes)) { $ = ; } 其他 { $ = 真； } } $;}('', '', 10, 2);

”

WebP 和未來

WebP 是一種強大且經(jīng)過優(yōu)化的格式。它看起來更好，壓縮更好，并且具有大多數(shù)其他常見圖像格式的所有功能。不要再等了，現(xiàn)在就使用它。

通過：

作者：Jeff 題目：譯者：校對者：wxy

本文由LCTT原創(chuàng)編譯，榮耀登陸中國