WebP圖像格式

WebP是由Google開發的開源圖像格式，它承諾生成比JPG和PNG格式更小、外觀更好的圖像。

介紹

WebP是由Google開發的開源圖像格式，它承諾生成比JPG和PNG格式更小、外觀更好的圖像。

WebP支持像PNG和GIF圖像那樣的透明度。

WebP支持像GIF圖像那樣的動畫。

使用WebP，您可以設置圖像的質量比率，因此您可以決定是獲得更好的質量還是更小的大小（就像JPG圖像中發生的那樣）。

因此，WebP可以做到GIF、JPG和PNG圖像所能做的一切，並生成更小的圖像。聽起來很不錯。

如果您想比較各種格式中圖像的外觀，這裡有一個由Google提供的很棒的圖庫。

WebP並不是新的，它已經存在了很多年。

生成更小的圖像的前提非常有趣，尤其是當您考慮到大多數網頁大小是由用戶需要下載的圖像資源的數量和大小來確定時。

Google發布了一份比較研究，對100萬幅圖像的結果如下： “WebP的整體壓縮比比JPEG或JPEG 2000更高。在文件大小最小化方面，對於那些在網頁上很常見的較小的圖像來說，縮小文件大小的收益尤其高。”

您應該根據您打算提供的圖像類型進行測試，並根據此形成自己的觀點。

在我的測試中，與PNG相比，無損壓縮生成的WebP圖像要小50%。只有在使用有損壓縮時，PNG才能達到那樣的文件大小。

所有現代圖形和圖像編輯工具都可以導出為.webp文件。

還有命令行工具可以直接將圖像轉換為WebP。Google 提供了一套工具。

cwebp是將任何圖像轉換為.webp的主要命令行實用程序，使用方式如下：

cwebp image.png -o image.webp

使用cwebp -longhelp查看所有選項。

WebP目前受到以下瀏覽器的支持：

然而，只有桌面版的Chrome和Opera 19+實現了WebP的所有功能，包括：

其他瀏覽器只實現了一部分功能。Safari和IE根本不支持WebP，也沒有迹象表明它們將在短期內實現WebP。

但是，自Firefox的65版（2019年1月）起，Firefox支持WebP，自Edge的18版起，Edge也支持WebP。

因此，如果我們可以為這些用戶提供優化的圖像，以加快為他們提供服務並節省帶寬，那就太好了。但是，請檢查它是否實際上可以減小圖像的大小。

檢查您的JPG/PNG圖像優化工具的結果，看看WebP引入的額外複雜性是否有用。

有幾種不同的方式可以使用WebP。

您可以使用服務器級機制，根據HTTP_ACCEPT請求標頭內容包含image/webp時，提供WebP圖像而不是JPG和PNG圖像。

第一種方式是最方便的，因為對您和您的網頁來說是完全透明的。

另一種選擇是使用Modernizr並檢查Modernizr.webp設置。

如果您不需要支持Internet Explorer，一種非常方便的方法是使用<picture>標籤，它現在被除了Opera Mini和IE（所有版本）外的所有主要瀏覽器支持。

<picture>標籤通常用於響應式圖像，但我們也可以將其用於WebP，正如HTML5 Rocks的這篇教程所解釋的那樣。

您可以指定一系列圖像，它們將按順序使用，因此在以下示例中，支持WebP的瀏覽器將使用第一張圖像，如果不支持，則回退到JPG：

<picture>
 <source type="image/webp" srcset="image.webp">
 <img src="image.jpg" alt="一張圖像">
</picture>