新圖片格式WebP可以提升網(wǎng)站性能嗎？

時(shí)間：2024-05-16 17:30:01 | 來(lái)源：建站知識(shí)

時(shí)間：2024-05-16 17:30:01 來(lái)源：建站知識(shí)

在提高性能方面，網(wǎng)頁(yè)設(shè)計(jì)師不遺余力。畢竟，我們可以減少頁(yè)面加載時(shí)間的每一千字節(jié)都會(huì)帶來(lái)更好的用戶體驗(yàn)。

圖像是主要關(guān)注的領(lǐng)域。即使是基本的優(yōu)化技術(shù)也可能意味著更好的性能。設(shè)計(jì)師們?cè)谂Ρ３仲|(zhì)量的同時(shí)，正爭(zhēng)先恐后地壓縮每一點(diǎn)空間。

并非巧合的是，這家致力于提高網(wǎng)站性能的公司已經(jīng)發(fā)布了一種圖像格式來(lái)提供幫助。Google的WebP格式提供了大量有益于設(shè)計(jì)人員的功能——包括較小的文件大小。

如果這聽(tīng)起來(lái)很誘人，請(qǐng)繼續(xù)閱讀，我們將帶您了解 WebP 的全部?jī)?nèi)容。我們還將進(jìn)行一些測(cè)試，看看這種格式是否真的符合宣傳的要求。

兩全其美的？

圖像優(yōu)化通常需要一些艱難的決定。例如，以更精簡(jiǎn)的文件大小為名應(yīng)該犧牲多少質(zhì)量？

這就變成了在無(wú)損（24 位 PNG）或有損（JPG、8 位 PNG）圖像格式之間進(jìn)行選擇的問(wèn)題。部分難題是 PNG 通常更適合用于光柵圖形，而 JPG 則適合攝影。

WebP 旨在成為一種可以做到這一切的圖像格式。它內(nèi)置了對(duì)無(wú)損和有損壓縮的支持。無(wú)論哪種方式，您都可以節(jié)省一些費(fèi)用。谷歌聲稱該格式比同類 PNG 文件小 26%，比 JPG 小 25%-34%。

此外，兩種壓縮類型都支持圖像透明度。這就像您獲得了 JPG 和 PNG 格式的最佳屬性 - 啟動(dòng)量更少。

測(cè)試 WebP 的有效性

那么，WebP 圖像在現(xiàn)實(shí)世界中的表現(xiàn)如何呢？我們進(jìn)行了一些基本測(cè)試，以了解使用無(wú)損和有損壓縮可以節(jié)省多少空間，以及一個(gè)利用透明度的示例。

我們的配置

我們所有的測(cè)試都將通過(guò)在 Adobe Photoshop CC 中保存圖像來(lái)執(zhí)行。

在撰寫(xiě)本文時(shí)，Photoshop 尚不支持 WebP 格式。因此，我們安裝了 Google 的免費(fèi)WebPShop插件。這允許在古老的照片編輯軟件中打開(kāi)和保存 WebP 圖像。使用了默認(rèn)壓縮設(shè)置。



在以舊格式保存圖像時(shí)，我們使用了 Photoshop 值得信賴的“保存為 Web”功能。盡可能使用相同的圖像質(zhì)量設(shè)置。您會(huì)發(fā)現(xiàn)圖像質(zhì)量設(shè)置在下面的括號(hào)中。

示例 #1：自然照片

我們的第一個(gè)測(cè)試涉及一張 1024×768 的自然照片。保存為最高質(zhì)量的 JPG 文件，它占用 1.15 MB 的空間。

無(wú)損webp圖片：https://assets.codepen.io/1077685/webp-format-nature-lossless.webp

有損webp圖片：https://assets.codepen.io/1077685/webp-format-nature-lossy.webp

有損jpg圖片：https://assets.codepen.io/1077685/webp-format-nature-lossyj.jpg

優(yōu)勝者：有損 WebP 圖像在保持可接受的質(zhì)量的同時(shí)節(jié)省了大量空間。無(wú)損 WebP 的大小比原來(lái)增加了，這有點(diǎn)令人驚訝。但這表明嘗試壓縮設(shè)置是值得的。

示例 #2：矢量圖

接下來(lái)是彩色的 640×356 矢量圖。原始文件另存為 24 位 PNG 文件，大小為 187 KB。因?yàn)樗腥绱硕嗟念伾?，所?8 位 PNG 和有損 WebP 都無(wú)法進(jìn)行很好的比較。相反，我們將使用 JPG 格式來(lái)對(duì)抗無(wú)損 WebP。

無(wú)損webp圖片：https://assets.codepen.io/1077685/webp-format-vectortriangles-lossless.webp

有損jpg圖片：https://assets.codepen.io/1077685/webp-format-vectortriangles-lossyj.jpg

優(yōu)勝者：有損 JPG 圖像節(jié)省了更多空間，但留下了明顯的偽影。無(wú)損 WebP 保持了銳利的外觀，并且仍然比原始文件顯著減少了文件大小。這提示了有利于 WebP 的天平。盡管如此，這些類型的圖像可能需要一些權(quán)衡。

示例 #3：具有透明度的矢量圖

我們的最終圖像是一個(gè) 350×350 的矢量圖。它保存為具有透明度的 24 位 PNG 文件，大小為 64.09 KB。

無(wú)損webp圖片：https://assets.codepen.io/1077685/webp-format-vector-lossless.webp

有損webp圖片：https://assets.codepen.io/1077685/webp-format-vector-lossy.webp

有損png圖片：https://assets.codepen.io/1077685/webp-format-vector-lossyp.png

優(yōu)勝者：無(wú)損 WebP 可以滿足您的期望 – 它在縮小文件大小的同時(shí)保持質(zhì)量。這顯然是贏家。然而，有損 WebP 也非?？煽?，前提是您可以忍受一些輕微的圖像偽影。

瀏覽器和應(yīng)用程序支持

當(dāng)然，WebP 可以節(jié)省寶貴的帶寬這一事實(shí)很棒。但是有多少瀏覽器和應(yīng)用程序支持呢？超過(guò) 91% 的 Web 瀏覽器完全支持 WebP，另外 3% 部分支持。

唯一缺乏支持的主要瀏覽器來(lái)自微軟和蘋(píng)果。Internet Explorer 的支持為零，Edge 12-17 版本也是如此。然而，較新版本的 Edge 可以很好地處理圖像格式。

Mac 用戶必須將 Safari 14 或更高版本與操作系統(tǒng)的 Big Sur 版本結(jié)合使用。自 14.6 版起，iOS 上的 Safari 用戶將獲得全面支持。

支持范圍非常可靠。但是，如果您想為您的 Web 項(xiàng)目提供回退，則可以使用諸如Modernizr之類的工具來(lái)檢測(cè) WebP 支持。

談到圖像編輯器，前面提到的 Adobe Photoshop 需要一個(gè)插件來(lái)查看或保存 WebP 文件。



WebP 值得你考慮

總的來(lái)說(shuō)，WebP 圖像格式有很多值得喜歡的地方。在大多數(shù)情況下，它在精簡(jiǎn)文件大小和高視覺(jué)質(zhì)量之間取得了平衡。這是一個(gè)全面的圖像優(yōu)化選項(xiàng)。

瀏覽器支持也很好——只是不通用。人們總是擔(dān)心可能會(huì)將一定數(shù)量的用戶（無(wú)論多?。┡懦谕?。值得慶幸的是，有工具可以創(chuàng)建和提供后備選項(xiàng)。由于圖像非常重要，因此額外的工作可能值得付出努力。

如果您正在考慮加入 WebP 潮流，現(xiàn)在是開(kāi)始試驗(yàn)的時(shí)候了。掌握壓縮設(shè)置，您可能會(huì)大幅減少網(wǎng)站的加載時(shí)間。