什么是WebP以及如何在WordPress中使用WebP圖像

本文轉載自查看原文 2019-07-24 15:26 621 wordpress網站開啟webp功能/ 什么是webp/ webp

圖像通常是緩慢加載網頁的最大原因之一。它們不僅減慢了加載時間，而且還可以占用服務器上的大量空間和資源。仔細選擇文件類型並壓縮它們有助於降低加載速度，但它們只能在圖像質量受損之前進行優化。另一種選擇是使用最優化的圖像文件類型之一：來自Google的WebP。

什么是WebP

WebP是Google專門為網絡設計的光柵圖像格式。它提供無損和有損壓縮，允許網頁設計人員以較小的文件大小顯示更豐富的圖像。

WebP有損圖像使用預測編碼來對圖像進行編碼。它通過查看相鄰像素來預測值來減小文件大小，然后僅對差異進行編碼。有損圖像比JPEG的可比圖像小34％。

WebP無損圖像使用已經看過的圖像片段重建新像素。如果找不到匹配項，則可以使用本地調色板。無損圖像比與PNG相同的圖像小26％。無損WebP支持alpha通道（透明度），文件大小比PNG的可比圖像小3倍。

什么是WebP文件

WebP文件使用 VP8 或 VP8L 圖像數據，以及基於 RIFF的容器。它使用文件擴展名.webp。該libwebp 庫是為WebP的規范的參考實現。您可以在git存儲庫中看到庫或作為 tarball。

它將如何改變您的網頁設計實踐

WebP的主要優點是文件較小，因此網頁加載速度更快，您將從服務器中使用更少的資源。這也意味着如果訪問者使用支持它們的瀏覽器，您將能夠使用更多顏色的更大圖像，而不會增加服務器的當前負載。

您不必非常認真地在布局中使用較小的區域來處理圖像。您可以使用適用於設計的尺寸，而不必因為頁面速度或加載時間而使設計適合較小的圖像。

如何在WordPress中使用WebP圖像

Google+的
Facebook的
推特

ChromeP和Opera瀏覽器以及許多圖像編輯工具本身都支持WebP。您仍然可能遇到WordPress的安全問題。有幾種方法可以將WebP與WordPress一起使用。您可以轉換文件，但最好的選擇是使用插件。

WebP轉換插件

將WebP圖像用作設計人員或開發人員的最佳方法之一是您無需執行創建文件的工作。相反，您只需安裝轉換插件即可。您將以JPEG或PNG格式上傳普通圖像，插件會將這些文件轉換為WebP，以便將圖像傳送給訪問者。

此方法的優點是您只需要處理已經習慣的文件類型，而無法使用WebP的訪問者仍將接收原始文件類型。那些可以接收WebP文件類型的人將看到更快的加載時間。

另一種方法是允許您將WebP文件上傳到您的網站。不推薦使用此方法，因為並非所有瀏覽器都支持此格式。這意味着您的部分訪問者將無法查看您的圖片。

有幾個免費和高級插件可以將圖像轉換為WebP。這里有一些免費選項。

EWWW圖像優化器

Google+的
Facebook的
推特

EWWW Image Optimizer是一個帶有WebP轉換功能的免費插件。它生成JPEG和PNG的WebP版本。它包含許多選項，例如Apache兼容的重寫規則，以及替代的WebP重寫選項。它與高速緩存和CDN兼容，並與KeyCDN的Cache Enabler插件配合使用。

這個可能是最容易使用的。內置的WebP功能允許您使用JPEG的有損轉換和PNG的無損轉換，並且轉換是自動的。您所要做的就是安裝插件並啟用WebP選項卡中的功能。無需其他設置。

短像素圖像優化器

Google+的
Facebook的
推特

ShortPixel Image Optimizer是一個免費的插件，可以將任何JPEG，PNG或GIF轉換為WebP。它使用有損和無損壓縮。它也適用於支持WebP的緩存插件。它為可以查看它們的瀏覽器提供WebP圖像，為那些不能查看它們的瀏覽器提供其他格式。

它還可以選擇使用HTML將WebP圖像添加到前端頁面中。為此，您可以使用<picture>標記而不是普通的<img>標記。要將其設置為自動轉換圖像，只需在“高級”選項卡中啟用該功能即可。您可以根據需要恢復圖像。

WebP Express

Google+的
Facebook的
推特

WebP Express是一個免費的插件，可以生成不到JPEG大小一半的圖像。它將JPEG和PNG路由到要轉換的圖像轉換器或已轉換的圖像。無論圖像如何到達服務器，它都能正常工作。它適用於媒體庫，庫和CSS引用的主題圖像。

它不適用於Microsoft IIS服務器或WAMP，並且尚未使用多站點進行測試。它確實需要一些轉換方法的設置，但你有幾個可供選擇。圖像將首先使用頂部的轉換方法，如果該圖像失敗，它將沿着列表向下工作，直到找到適用於圖像的方法。您可以按照希望它們使用它們的順序拖動它們。

Opti MozJpeg Guetzli WebP

Google+的
Facebook的
推特

Opti MozJpeg Guetzli WebP是一個免費的插件，它是在考慮Google Pagespeed Insights的情況下創建的。它使用Mozilla MozJpeg，Google Guetzli和Google WebP圖像編碼器來轉換圖像。編碼器可以在本地安裝，也可以使用內置的ssh客戶端。它使用與作者虛擬機的ssh連接遠程訪問編碼器。

它可以將所有非alpha通道PNG轉換為JPEG。它會在進行更改之前備份您的圖像。您可以隨時還原圖像。

WebP示例

對於我的例子，我想展示一些質量和尺寸差異。我將各種格式和質量級別的相同圖像保存起來進行比較。我實際上是在我的圖像編輯器中顯示圖像的屏幕截圖。我正在使用帶有WebP插件的Paint.NET。當我將這些圖像上傳到這個網站時，這些圖像的尺寸會減小一些，所以它們看起來可能會比實際上看起來有點不同，但希望它們能提供一個很好的比較。