Google WebP 次世代圖片格式介紹及轉檔教學

WebP是由Google開發,並於2010年末正式啟用的圖像格式;此格式同時支援動態及靜態的失真壓縮(Lossy Compression)及無失真壓縮(Lossless Compression)圖像。目前主流的瀏覽器,例如Google Chrome、

Google最初會開發這個圖像格式,是希望在不降低圖像品質的前提之下,盡可能的壓縮檔案的大小,最終目的是加快網頁載入的速度;如此一來,不僅能提升使用者整體的網頁瀏覽體驗,也對網站SEO有正面的影響!

根據Google官方提供的數據,以品質相同的圖像來說,WebP的無失真格式檔案大小,與PNG格式相比小了26%;而失真壓縮格式的檔案大小,較JPEG格式檔案小了約25-34%。

除此之外,WebP的無失真格式檔案也支援Alpha通道(Alpha Channel),也就是透明度,並且只會增加22%位元組的檔案,能有效地將檔案大小控制在一定的範圍內;以失真壓縮來說的話,經過透明度調整的WebP檔案大小,也只有PNG檔的三分之一大而已。

*圖像的透明度調整是以灰白網格極小的色板(類似西洋棋盤)疊合原始圖檔來呈現,因此會增加額外的圖檔大小。

 

WebP壓縮率實測

我們以實務上大部分網頁會使用的圖片大小,來實際測試WebP格式的壓縮表現。以我們的測試結果來看,WebP的實際檔案壓縮率大約在60%到80%之間!

首先是原檔大小約1MB的圖片,以WebP格式壓縮後,檔案大小為177KB
壓縮率為83%

 

接著是原檔大小約2MB的圖片,以WebP格式壓縮後,檔案大小剩下849KB
壓縮率為59%

 

最後我們測試原檔約6MB的圖片,壓縮後檔案大小只有1.75MB
壓縮率為70%

 

如何手動轉檔?

目前網路上的免費WebP轉檔資源很多,雖然功能大同小異,但實際使用時還是會有方便性上的差異。使用WebP線上轉檔,我們推薦Squoosh,以下讓我們跟各位分享如何使用Squoosh的網頁來進行簡便的圖片轉檔!

 

步驟一:使用瀏覽器搜尋Squoosh

 

步驟二:上傳圖片(直接將圖檔拖曳到網頁正中央,或選擇檔案後開啟!)

 

步驟三:壓縮類型選WebP

 

步驟四:壓縮完成,點右下角圖示下載圖片!

Squoosh讓你輕鬆完成圖片壓縮,WebP轉檔就是那麼簡單!你學會了嗎?

 

參考資料:

https://developers.google.com/speed/webp

https://squoosh.app/

 

 

 2022-04-14