WebP 是谷歌大約 5 年前開發的一種影象格式。這種格式通常被稱為 weppy，是網頁設計師和開發人員的福音，他們的目標是最小化和優化圖片大小。
在本指南中，我將闡明為什麼 WebP 可能就是你一直在尋找的解決方案。
WebP 影象的主要特點
不過，首先讓我們快速瞭解一下 WebP 的一些主要特徵：
- 它的副檔名為 .webp。
- 它支援有損和無失真壓縮技術。
- 有失真壓縮的 WebP 影象通常比 JPEG 影象小 25-34%。
- 對於無失真壓縮，WebP 影象可比 PNG 影象小 25%。
- 它完全支援無損透明，類似於帶有 alpha 通道的 PNG。
- WebP 甚至還支援動畫，因此有可能取代 GIF 動畫。
總而言之，WebP 為減小 JPEG、GIF 和 PNG 影象的大小提供了強大的解決方案。現在，讓我們深入探討如何充分利用這種格式。
WebP 更小嗎？實驗說話
網路謠言的最大優點之一就是其可驗證性。我們可以隨時進行實驗來評估其真實性和真偽。我進行了幾項測試，以確定從各種格式（JPEG、PNG 和 GIF）轉換到 WebP 時，影象的大小能減少多少。
JPEG vs. WebP
這是一張取自 Pexels 的 JPEG 影象。
檔案大小：165kb。
這是用 JpegMini 優化後的同一影象。
檔案大小：101kb。
這是經過優化後轉換成 WebP 格式的相同圖片。
檔案大小：70kb。
以下是同一影象轉換成其他格式後的檔案大小，以供參考：
- GIF：285kb
- PNG 8：241.2kb
- PNG 24：657.6kb
PNG vs. WebP
這是一張透明的 PNG 影象（來源）。
檔案大小：587kb。
這是經過 tinypng 優化後的 PNG 影象。
檔案大小：278kb。
這是轉換為 WebP 格式後的同一影象。
檔案大小：112kb。
GIF vs. WebP
轉換為 WebP 格式後，JPEG 影象從 165kb 降至 70kb，PNG 影象從 587kb 降至 112kb。為了進一步測試 WebP 在動畫 GIF 上的效率，請看以下結果：
- 轉換前的原始檔案大小：6.8 MB
- 轉換為 WebP 後的檔案大小：6.3 MB
結論
下表總結了實驗結果：
| JPEG | PNG | GIF (動畫) | |
|---|---|---|---|
| 原始圖片 | 165kb | 587kb | 6.8mb |
| 使用工具優化後 | 101kb | 278kb | – |
| 轉為 WebP 後 | 70kb | 112kb | 6.3mb |
無需深入計算，結果顯示檔案大小顯著減少。
此外，影象清晰度和解析度幾乎沒有明顯差別。在不犧牲質量的前提下縮小檔案大小，顯然 WebP 是一種值得考慮的格式。
將影象轉換為 WebP 的工具
如果您確信 WebP 的好處，並渴望採用這種格式，讓我們來探討一下轉換影象的各種工具。所討論的方法在控制、易用性和便利性方面各不相同。請選擇最適合您需要的一種。
Mac 版 WebPonize
WebPonize 可以說是在 Mac 上將影象轉換為 WebP 格式的最簡單、最快捷的方法。只需將圖片拖放到 WebPonize 中，它就會幫你完成轉換。該應用程式可提供原始大小、轉換後大小和縮減百分比等詳細資訊。
Windows 版 Webpconv
對於 Windows 使用者來說，Webpconv 是一款必備工具。它甚至還有便攜版，可以直接從快閃記憶體盤執行。
使用命令列進行轉換
如果你對命令列情有獨鍾，並希望親自動手操作，那麼 cwebp 和 dwebp 這兩個工具可能會適合你。cwebp 可將 JPEG、PNG 或 TIFF 影象轉換為 WebP 格式，而 dwebp 則可將其還原為 PNG 格式。讓我們深入瞭解這一過程。
以下指南適用於 Mac 使用者。Windows 和 Linux 使用者請點選此處。
步驟 1：設定 MacPorts
首先要確保機器上已安裝 Xcode。確認後，請按照以下步驟操作：
首先，下載並安裝 MacPorts。如果 Mac 上已安裝 MacPorts，請跳至下一步。
開啟終端。
輸入 sudo port selfupdate 並點選 Enter。此操作將把 MacPorts 更新到最新版本。
然後，輸入命令 sudo port install webp 並點選 Enter。這一步將安裝 libwebp，即 WebP 庫。
完成這些步驟後，您就可以使用命令列指令將影象轉換為 WebP 了。
步驟 2：使用命令列進行轉換和還原
要使用命令列轉換影象，請執行以下命令：
命令格式:
cwebp -q [image_quality] [JPEG/PNG_filename] -o [WebP_filename]
示例:
cwebp -q 80 example.png -o example.webp
要將 WebP 影象還原為原始格式，請使用以下命令：
命令格式:
dwebp [WebP_filename] -o [PNG_filename]
示例:
dwebp image.webp -o image.png
其他資訊：如果您想使用其他轉換方法，這裡有使用 Grunt 和 Gulp 任務將 JPG/PNG 檔案轉換為 WebP 格式的說明。
使用線上工具進行轉換
如果您不想在電腦上安裝任何軟體，可以使用線上工具將影象轉換為 WebP。以下是一些常用的選項：
注：在谷歌上快速搜尋 “convert to WebP online”，可以找到更多工具。
使用 Photoshop 外掛進行轉換
對於使用 Photoshop 的使用者，有一個方便的外掛（下載）可以直接將影象儲存為 WebP 格式。該外掛與 Mac 以及 32 位和 64 位版本的 Windows 相容。
支援 WebP 影象瀏覽器
在討論相容性時，值得一提的是 WebP 格式的影象可以在一些瀏覽器上瀏覽。以下是當前支援 WebP 的瀏覽器列表（來源）：
- Chrome 瀏覽器和 iOS 版 Chrome 瀏覽器
- Opera 和 Opera Mini
遺憾的是，FireFox 和 Safari 等瀏覽器並不完全支援 WebP 格式。不過，WebPJS JavaScript 庫提供了一種解決方法。這樣就可以在客戶端將 WebP 影象轉換為 dataURI 字串。
回退到其他格式（如果不支援 WebP）
在向不同使用者提供影象時，為可能不支援 WebP 格式的瀏覽器提供後備選項至關重要。最好的辦法是恢復到 JPG 或 PNG 等傳統格式。
下面是一種實現方法：
<picture> <source srcset="example.webp 1x" type="image/webp"> <img src="example.jpg" alt="Description of the image"> </picture>
說明：在上述程式碼中，Firefox 或 Safari 等不支援 WebP 的瀏覽器將顯示 example.jpg 影象。
如何預覽 WebP 影象
雖然 WebP 影象可以在 Chrome 和 Opera 瀏覽器上輕鬆檢視，但本地預覽可能需要專門的工具，這取決於您的作業系統。
對於 Mac 使用者，WebPQuickLook 提供了使用快速檢視功能預覽 WebP 影象的功能。只需選擇或高亮顯示影象，然後按空格鍵即可。
Windows 使用者可以使用 WebPCodec，它可以在檔案資源管理器中提供 WebP 影象的縮圖預覽。該工具可同時顯示 WebP 及其 JPEG 對應影象。
相關閱讀
對於那些希望進一步瞭解 WebP 及其相關技術的人來說，這裡收集了大量全面的資源：
小結
WebP 是由 Google 在大約5年前開發的一種影象格式。它提供了強大的解決方案，可以最小化和優化影象大小，在檔案大小減小方面超過了JPEG、GIF和PNG等格式。WebP 支援有損和無失真壓縮、透明影象，甚至支援動畫。有各種工具可用於將影象轉換為 WebP 格式，並且受到 Chrome 和 Opera 等瀏覽器的支援。
- WebP 是由 Google 開發的影象格式，與 JPEG、GIF 和 PNG 等格式相比，可以顯著減小檔案大小。
- WebP 支援有損和無失真壓縮、透明影象和動畫。
- 將 JPEG 影象轉換為 WebP 可以減小約25-34%的檔案大小，而 PNG 影象可以減小25%。
- 有一些 WebP 工具可用於將影象轉換為 WebP 格式，例如 WebPonize、Webpconv，以及 cwebp 和 dwebp 等命令列選項。
- WebP 格式受到 Chrome 和 Opera 等瀏覽器的支援，對於不支援 WebP 的瀏覽器，應提供回退選項，如 JPEG 或 PNG。
- 可以使用諸如 WebPQuickLook（用於 Mac）或 WebPCodec（用於 Windows）等工具實現對 WebP 影象的預覽。
評論留言