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

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

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

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

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

報(bào)告稱，將動(dòng)畫 GIF 文件轉(zhuǎn)換為有損 WebP 可將文件大小減少 64%，轉(zhuǎn)換為無(wú)損 WebP 可將文件大小減少 19%。

WebP文件格式是基于RIFF（ File （文件））的文檔格式?？梢钥吹轿募暮灻?2 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

獨(dú)立庫(kù)用作 WebP 規(guī)范的參考實(shí)現(xiàn)，可從 Git 存儲(chǔ)庫(kù)或 獲得。

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

為什么要這樣做？

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

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

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

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

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

左：650 KB（實(shí)際大?。?。右：44.9 KB（轉(zhuǎn)換后的目標(biāo)大?。?/p>

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

另一張圖片放大：

PNG（左圖）和WebP（右圖）都是從JPG轉(zhuǎn)換而來(lái)的。對(duì)比兩張圖片可以看出，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ā)行版的存儲(chǔ)庫(kù)中可用。轉(zhuǎn)換的子命令是 ，它需要的所有參數(shù)都是輸入和輸出文件：

convert pixel.png pixel.webp

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

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

如果您是用戶，則需要一個(gè)轉(zhuǎn)換插件，因?yàn)槟J(rèn)情況下不包括 WebP 支持。在 2.0 許可下發(fā)布，0.2.1 是一個(gè)用于打開和保存 WebP 圖像（包括動(dòng)畫圖像）的模塊。

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

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

Mac://插件/。

WebP 開啟

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

以下說(shuō)明可用于：

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

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

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

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

”

WebP 和未來(lái)

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

通過(guò)：

作者：Jeff 題目：譯者：校對(duì)者：wxy

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