使用WebP圖片加速您的網(wǎng)站

圖像是網(wǎng)絡(luò)的重要組成部分，但是，如果沒有適當(dāng)優(yōu)化或交付，它們可能會給用戶體驗(yàn)帶來很多挑戰(zhàn)。自Google將世界引入WebP作為解決此問題的方法以來，已經(jīng)過去了將近十年。隨著越來越多的瀏覽器，設(shè)備和軟件支持它，Web設(shè)計(jì)人員應(yīng)該開始采用它作為默認(rèn)圖像格式了。

如果您話足夠的時間通過PageSpeed Insights檢測網(wǎng)站，您會發(fā)現(xiàn)Google會抱怨主要的傳統(tǒng)圖像格式，例如JPG，PNG甚至GIF。的確也該抱怨。

即使您將圖像調(diào)整大小到網(wǎng)站的確切規(guī)格并通過壓縮程序運(yùn)行它們，它們?nèi)匀豢赡苁剐阅艹惺軌毫Σ⒄加脦挕８愀獾氖牵羞@些圖像處理都可能損害最終的質(zhì)量。

考慮到圖像對網(wǎng)頁設(shè)計(jì)的重要性，這不是我們可以輕松處理的元素，也不能在優(yōu)化圖像時承擔(dān)起偷工減料的負(fù)擔(dān)。那么，有什么解決方案？

這是Google的建議：

幾年前，Google旨在通過創(chuàng)建一種稱為WebP的下一代圖像格式來解決這一問題。您可以從PageSpeed Insights的這個快照中看到Google建議使用WebP和其他下一代格式來顯著減小圖像的尺寸，同時又能保持圖像的質(zhì)量。

而且，如果您覺得0.75秒看起來不太理想（至少在此示例中如此），但這可能會極大地影響訪問者的生活，坐在那里的人們想知道等待多長時間了。只需減少一秒鐘的載入時間，您的轉(zhuǎn)化率就會與眾不同。

但是WebP是解決此問題的最佳解決方案嗎？今天，我們將研究：

• 什么是WebP，
• 使用它有什么好處，
• 它如何與瀏覽器和設(shè)備一起使用，
• 轉(zhuǎn)換和交付WebP 的挑戰(zhàn)是什么，
• 如何使用KeyCDN 簡化轉(zhuǎn)換和交付。

什么是WebP？

Google在收購一家名為On2 Technologies的公司后于2010年開發(fā)了WebP 。On2致力于多種視頻壓縮技術(shù)，最終成為Google新型視聽格式WebM和下一代圖像格式WebP的基礎(chǔ)。

最初，WebP使用有損壓縮來嘗試為Web創(chuàng)建較小但仍然高質(zhì)量的圖像。

WEBP的有損壓縮

有損壓縮是一種壓縮形式，用于大大減小JPG和GIF的文件大小。但是，為了實(shí)現(xiàn)這一點(diǎn)，需要丟棄或“丟失”文件中的某些數(shù)據(jù)（像素）。反過來，這導(dǎo)致圖像質(zhì)量下降，盡管并不總是那么明顯。

WebP通過更有效地使用有損壓縮（下面將對此進(jìn)行解釋）進(jìn)入圖片，并成為JPG急需的繼任者。

當(dāng)KeyCDN 比較壓縮的JPG與WebP的文件大小的差異時，您可以看到這種差異的絕佳展示：

請注意，即使將JPG壓縮到可比的質(zhì)量，這在文件大小方面也有很大的不同。但是，正如Adrian James在這里解釋的那樣，您必須謹(jǐn)慎使用WebP壓縮。“壓縮設(shè)置與JPEG不一一對應(yīng)。不要指望質(zhì)量為50％的JPEG與質(zhì)量為50％的WebP相匹配。質(zhì)量在WebP規(guī)模上急劇下降，因此從高質(zhì)量開始，然后逐步降低。”

不過，考慮到與JPG相比，WebP可以縮小多少文件大小，這不應(yīng)該成為一個癥結(jié)所在。如果您正在考慮將WebP可以做的事情進(jìn)一步推向極限，那只是思考。

現(xiàn)在，隨著時間的流逝，Google繼續(xù)開發(fā)WebP技術(shù)，最終使其不僅支持真彩色Web圖形，而且還支持XMP元數(shù)據(jù)、顏色配置文件、拼貼、動畫和透明度。

最終，谷歌為WebP帶來了無損壓縮，也使其成為PNG的可行競爭者。

WEBP的無損壓縮

無損壓縮不會像有損壓縮那樣降低圖像質(zhì)量。相反，它通過從文件后端刪除多余的元數(shù)據(jù)來實(shí)現(xiàn)較小的文件大小。這樣，圖像質(zhì)量保持不變，同時減小了尺寸。也就是說，無損壓縮無法實(shí)現(xiàn)有損壓縮可以實(shí)現(xiàn)的文件大小。

直到WebP可以進(jìn)行無損壓縮，這個問題才得以進(jìn)展。

您可以在Google的WebP畫廊中看到一些漂亮的示例，說明WebP的有損壓縮和無損壓縮如何與PNG相對立：

如果WebP圖像的質(zhì)量有任何下降，您的訪問者幾乎不會注意到。他們真正要注意的唯一一件事就是您的網(wǎng)站加載速度。

使用WebP的好處是什么？

僅僅說WebP比JPG和PNG“更好”還不夠。重要的是要了解WebP的工作機(jī)制，以及為什么在其他文件格式上使用WebP這么多好處。

對于傳統(tǒng)的圖像格式，壓縮總是在質(zhì)量和大小間拿捏。

JPG有損壓縮會導(dǎo)致圖像的清晰度和精細(xì)度下降。一旦應(yīng)用，就不能撤消。

WebP有損壓縮則使用所謂的預(yù)測編碼來更準(zhǔn)確地調(diào)整圖像中的像素。正如Google所說，還有其他一些因素在起作用：塊自適應(yīng)量化也有很大的不同。過濾有助于中等/低比特率。與霍夫曼編碼相比，布爾算術(shù)編碼提供了5％-10％的壓縮增益。”

平均而言，Google估計(jì)WebP有損壓縮會導(dǎo)致文件質(zhì)量比相同質(zhì)量的JPG小25％至34％。

至于PNG無損壓縮，它在保持圖像質(zhì)量方面效果很好，但是對圖像大小的影響不如JPG對等。與WebP相比，當(dāng)然不是。

WebP更有效地處理這種類型的壓縮。這是由于使用了多種壓縮技術(shù)以及應(yīng)用于圖像的熵編碼。再次，谷歌解釋了它是如何工作的：“應(yīng)用于圖像的變換包括像素的空間預(yù)測，色彩空間變換，使用局部出現(xiàn)的調(diào)色板，將多個像素打包為一個像素和alpha替換。”

平均而言，Google估計(jì)WebP無損壓縮所產(chǎn)生的文件比相同質(zhì)量的PNG大約小26％。

不僅如此，WebP能夠執(zhí)行其他文件格式無法執(zhí)行的操作。設(shè)計(jì)人員可以在RGB顏色上使用WebP有損編碼，并在具有透明背景（alpha通道）的圖像上使用無損編碼。

動畫圖像以GIF格式提供，也將從WebP壓縮系統(tǒng)中受益。原因如下：

由于這種強(qiáng)大的無損和有損壓縮組合，動畫視頻的尺寸可以比GIF壓縮的視頻小得多。

Google估計(jì)，使用有損壓縮時，平均壓縮量約為GIF原始大小的64％，而使用無損壓縮時，平均壓縮量為19％。

WebP在瀏覽器、設(shè)備和CMS中的接受程度

可以想象，當(dāng)WebP首次發(fā)布時，僅Google的瀏覽器和設(shè)備支持它。但是，隨著時間的流逝，其他平臺已開始為WebP圖像提供支持。

也就是說，WebP仍然沒有通用支持，這可能會給默認(rèn)使用此圖像格式的Web設(shè)計(jì)人員帶來麻煩。

讓我們看一下WebP圖像在不同的平臺的支持程度，然后我們將討論可以解決此問題的方法。

截至2019年撰寫本文時，我可以使用…解釋了以下支持WebP的平臺：

支持以下平臺的最新版本：

• Edge
• Firefox
• Chrome
• Opera
• Opera Mini
• Android Browser
• Opera Mobile
• Chrome for Android
• Firefox for Android
• UC Browser for Android
• Samsung Internet
• QQ Browser
• Baidu Browser

繼續(xù)保持支持的平臺有：

• Internet Explorer
• Safari
• iOS Safari
• KaiOS Browser

不僅瀏覽器支持 WebP。圖像編輯軟件和內(nèi)容管理系統(tǒng)也提供支持。

例如，ImageMagick，Pixelmator和GIMP都支持WebP。使用Sketch的用戶，也可以將文件導(dǎo)出為WebP。對于不支持WebP的軟件（例如Photoshop），用戶通常可以安裝插件，使他們可以打開文件并將其另存為WebP。

內(nèi)容管理系統(tǒng)也處于類似境地。無論用戶是否以這種格式上傳文件，有些人都帶頭將用戶轉(zhuǎn)移到WebP。Shopify和Wix是兩個網(wǎng)站構(gòu)建器，它們可以自動轉(zhuǎn)換和提供WebP格式的圖像。

盡管還有其他平臺本身不支持WebP，但是通常可以使用擴(kuò)展程序或插件來上傳WebP圖像或?qū)⑸蟼鞯膱D像轉(zhuǎn)換為WebP這種下一代格式。

WordPress就是這些平臺之一。Drupal是另一個流行的CMS，它為用戶提供添加了WebP支持的WebP 模塊。Magento是另一個這樣的平臺。

很難找到某種不支持WebP的組件。我知道的唯一不接受它的示例是Squarespace。

WebP轉(zhuǎn)換和交付的挑戰(zhàn)

好的，WebP在網(wǎng)絡(luò)上仍然沒有100％的支持。但是在大多數(shù)情況下，我們在增加對用于設(shè)計(jì)和構(gòu)建網(wǎng)站的工具的支持方面具有某種變通方法。

但是我們?nèi)绾翁幚頌g覽器呢？如果我們的訪客出現(xiàn)在iOS設(shè)備上，那么如果我們的默認(rèn)圖片是WebP，我們?nèi)绾未_保他們?nèi)匀皇盏綀D片？

首先，您需要知道如何將圖像轉(zhuǎn)換為WebP。

去年，前端開發(fā)人員Jeremy Wagner 為此主題撰寫了《粉碎雜志》指南。他介紹了如何使用以下方法轉(zhuǎn)換為WebP：

• Sketch,
• Photoshop,
• The command line,
• Bash,
• Node.js,
• gulp,
• Grunt,
• webpack.

這些選項(xiàng)中的任何一個都可以幫助您將PNG和JPG轉(zhuǎn)換為WebP。您的圖像編輯軟件只能將您帶到目的地的一半。

它會處理轉(zhuǎn)換，但不會幫助您修改原始服務(wù)器，以便它知道何時傳遞WebP以及何時傳遞傳統(tǒng)圖像格式給訪問者。

其中一些方法可讓您根據(jù)訪問者瀏覽器的限制來決定服務(wù)器如何交付圖像。盡管如此，要修改原始服務(wù)器仍需要花費(fèi)一些工作。如果您不愿意這樣做或不想處理它，KeyCDN可以提供解決方案。

解決方案：使用KeyCDN簡化WebP交付

20210828更新：WordPress用戶可以采用新的方法實(shí)現(xiàn)Webp圖片的使用，詳情請看教程《如何在 WordPress 中使用 WebP 圖片？》

KeyCDN了解擁有以閃電般的速度加載的網(wǎng)站的重要性。這就是KeyCDN要做的事情。因此，它開發(fā)出內(nèi)置的WebP緩存和圖像處理解決方案可以幫助開發(fā)人員更輕松地向訪問者提供正確的文件格式，這也就不足為奇了。

什么是WEBP緩存？

緩存是保持任何網(wǎng)站快速運(yùn)行必不可少的一部分。WebP緩存只會使它變得更好。本質(zhì)上，它是一種在HTTP標(biāo)頭中進(jìn)行的內(nèi)容協(xié)商的形式。

它是這樣的：

有人訪問了啟用了KeyCDN的WebP緩存的網(wǎng)站。訪客的瀏覽器將acceptHTTP標(biāo)頭作為請求的一部分發(fā)送給服務(wù)器，并帶有其偏愛的資產(chǎn)類型列表。但是，不是轉(zhuǎn)到原始服務(wù)器（位于Web主機(jī)），而是由邊緣服務(wù)器（位于KeyCDN）處理請求。邊緣服務(wù)器檢查可接受文件類型的列表，并發(fā)送content-type頭作為響應(yīng)。

這是一個看起來像的例子：

curl -I 'https://ip.keycdn.com/example.jpg' -H 'accept: image/webp'
HTTP/2 200
server: keycdn-engine
date: Thu, 06 Jun 2019 08:29:50 GMT
content-type: image/webp
content-length: 56734
last-modified: Tue, 14 May 2019 23:36:28 GMT
etag: "5cdb50fc-1040a"
expires: Thu, 13 Jun 2019 08:29:50 GMT
cache-control: max-age=604800
x-ip: 1
x-ip-info: osz=56734 odim=700x467 ofmt=webp
x-cache: HIT
x-shield: active
x-edge-location: chzh
access-control-allow-origin: *
accept-ranges: bytes

KeyCDN發(fā)送給接受WebP的瀏覽器的內(nèi)容類型請求的示例。（來源：KeyCDN）

因此，對于Google Chrome瀏覽器訪問者，content-type: image/webp將自動接受，并將緩存的WebP資源發(fā)送到瀏覽器。

另一方面，對于Safari用戶而言，該請求將無法接受。但這沒關(guān)系。您的CDN將知道要發(fā)送哪種文件格式。在上面示例的第一行中，您可以看到原始圖像格式為JPG，因此這就是將要交付的文件的版本。

如您所見，無需考慮原始服務(wù)器或準(zhǔn)備文件的多個版本來考慮WebP兼容性。KeyCDN WebP緩存可處理所有這些。

您如何使用KEYCDN WEBP緩存？

KeyCDN用戶可以通過兩種方式利用WebP緩存功能。

通過KeyCDN進(jìn)行圖像處理

第一個只需要翻轉(zhuǎn)開關(guān)并打開KeyCDN的圖像處理即可。啟用后，accept請求標(biāo)頭將自動加載。

當(dāng)然，您不僅可以將圖像處理服務(wù)用于WebP緩存。您可以使用它來調(diào)整所傳送圖像的大小，裁剪，旋轉(zhuǎn)，模糊和其他物理屬性。但是，如果您要簡化圖像傳送系統(tǒng)，并且只想通過WebP加快處理速度，則只需啟用該功能并讓KeyCDN來完成。

WebP通過原始服務(wù)器緩存

假設(shè)您生成了自己的WebP圖像文件。您仍然可以從KeyCDN的WebP緩存解決方案中受益。

為此，您需要正確生成WebP。同樣，這個指南向您展示了如何執(zhí)行此操作。

然后由您配置原始服務(wù)器，以使其僅在accept: image/webp存在時交付WebP 。KeyCDN提供了一些示例，說明如何使用Nginx進(jìn)行此操作：

# http config block
map $http_accept $webp_ext {
    default "";
    "~*webp" ".webp";
}

# server config block
location ~* ^(/path/to/your/images/.+)\.(png|jpg)$ {
    set $img_path $1;
    add_header Vary Accept;
    try_files $img_path$webp_ext $uri =404;
}

KeyCDN演示了如何使用Nginx修改原始服務(wù)器以交付自己的緩存WebP資產(chǎn)。（來源：KeyCDN）

使用Apache：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(path/to/your/images.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

KeyCDN演示了如何使用Apache修改原始服務(wù)器以交付自己的緩存WebP資產(chǎn)。（來源：KeyCDN）

顯然，此選項(xiàng)使您可以更好地控制圖像格式的管理以及如何將其提供給訪問者。就是說，如果您不熟悉WebP，KeyCDN的自動WebP緩存和圖像處理可能是最好的選擇。

WordPress和Magento設(shè)計(jì)師的替代選擇

如果您使用WordPress或Magento設(shè)計(jì)網(wǎng)站，則KeyCDN具有可用于添加WebP支持和緩存的插件。

對于WordPress，您將使用KeyCDN的自定義 Cache Enabler以及Optimus。

Cache Enabler 會圖像是否具有WebP版本。如果存在并且訪問者的瀏覽器支持它，那么它將在緩存的文件中提供該內(nèi)容。如果不存在，則只需轉(zhuǎn)到那里的JPG，PNG或GIF。

Magento開發(fā)人員還具有用于轉(zhuǎn)換和交付WebP的簡化解決方法。首先，您需要安裝Webp擴(kuò)展。然后，您必須在服務(wù)器上配置WebP二進(jìn)制文件。

總結(jié)

Google不得不開發(fā)新的圖像格式，并且越來越多的瀏覽器，設(shè)計(jì)系統(tǒng)和內(nèi)容管理系統(tǒng)都支持它，這是有原因的。

對于原本精簡和小巧的網(wǎng)站，圖片可能會引起很多問題。如果未以正確的大小上傳它們，未壓縮并且未啟用緩存，則您的圖片可能是網(wǎng)站速度驅(qū)使訪問者離開的原因。

但是使用WebP，您的網(wǎng)站肯定可以更快地加載。更重要的是，不必為了獲得該速度而在圖像質(zhì)量（或數(shù)量！）之間進(jìn)行權(quán)衡。WebP有效地壓縮文件，同時保留圖像內(nèi)容的完整性。

如果您真的在努力提高網(wǎng)站速度，那么WebP應(yīng)該是您尋求幫助的下一個工具。

聲明：原文出自 https://www.smashingmagazine.com/2019/10/speed-up-your-website-webp/ ，由 WordPress大學(xué) 翻譯整理，轉(zhuǎn)載請保留本聲明！

拓展閱讀：

• 如何在 WordPress 中使用 WebP 圖片？
• WordPress 5.8 增加了 WebP 圖像格式支持
• 誰是最佳的網(wǎng)站性能檢測工具：GTmetrix、PageSpeed Insights、Pingdom Tool、WebPageTest
• 如何加快WordPress網(wǎng)站的圖片加載速度