看來新版的 WebP 要同時跟 JPEG、PNG 兩個網路上的標準圖片格式開戰了。失真壓縮依然是針對 JPEG 而來,透明(去背效果)則跟 PNG 具有相同的特性。雖然目前還在持續開發、調校中,但以 Google 的技術力來說,做出成品絕非問題,但要讓各類軟體、瀏覽器支援,則還有一段路要走。

2010年9月,Google 發表了 WebP 圖片格式,跟相當普級的 JPEG 同樣採用失真壓縮(Lossy Compression)的技術,讓圖片檔案能變小,在相同品質的情況下,可以比 JPEG 再小 25%~34%。經過一年左右的持續改進,WebP 多了幾個新的特性:

  • 支援 ICC profile(色彩描述檔):讓圖片可以在不同的輸出設備或螢幕達到一致的顯示結果。
  • 支援 XMP(可延伸中繼資料)。

還有更重要的,足以威脅 JPEG、PNG、GIF 的特性:

  • 在失真壓縮的模式下,檔案比 JPEG 格式還小(這一點在之前就有了)。
  • 支援透明(去掉圖片背景),並分為失真、無失真壓縮模式,挑戰 PNG 在網路世界的地位。
  • 支援動畫效果,要跟 GIF 圖檔打對台。

相機拍出來的照片,使用 WebP 格式時,雖然也採用失真壓縮的做法,但是檔案比 JPEG 還小;而網頁上的許多圖片(照片以外的圖),為了跟背景色融合,都會採用支援去背透明的 PNG 格式,在同樣品質的狀況下,WebP 檔案也能比 PNG 檔案還小。這表示網頁的顯示速度會更快,網站經營者可以減少頻寬的使用,使用者也可以獲得更好的上網體驗。

新的無失真模式

WebP 無失真模式的開發重點是壓縮密度與解碼的簡易性。平均來說,跟從網路上找來的 PNG 圖片相比,可以減少 45% 的大小;如果使用 pngcrush 或 pngout 把 PNG 圖片再次壓縮,WebP 也能比這些圖片再小 28%。

▲ 無失真模式(紅線)、失真模式(藍線)與 PNG 圖檔(綠線)在不同壓縮率下的比較,可以看出 WebP 格式圖片都比較小。

新的透明模式

網站上有很多圖片(Logo、裝飾圖、選單圖、區塊背景、按鈕…)都使用 PNG 格式圖片,PNG 圖片本身有去背、透明的效果,可以跟其他圖片或背景無毛邊、無縫融合。

WebP 使用低量的 bits-per-pixel(儲存每像素所需的位元數)對圖片進行編碼,並提供了有效的方法來降低圖片的大小,在 Alpha channel (決定像素是否透明、以及透明度是多少) 的無失真壓縮與失真壓縮模式之間,只相差了 22% 的位元組數。

在 Google 的 WebP Gallery 網頁裡可以看到 PNG、無失真 WebP、失真 WebP 的比較範例。以下舉出企鵝圖片供大家參考,第2、3張圖片不是真的 WebP 格式圖片,為了在各種瀏覽器裡都能顯示,所以 Google 已把它們轉換為 PNG 圖檔。

▲ PNG:檔案大小 40.5KB(點圖可看大圖)。

▲ WebP 無失真模式:檔案大小 27.5KB(點圖可看大圖)。

▲ WebP 失真模式:檔案大小 17.3KB(點圖可看大圖)。

這隻企鵝的原始圖檔在這裡,看完這個範例,小編的感覺是 WebP 格式似乎能有所做為。但目前還在持續開發中,像是編碼、解碼實作的處理速度還沒有最佳化就是個大問題。目前支援 WebP 的瀏覽器包括 Chrome、IE 的 Chrome Frame 外掛、Opera 11.10 版,另外在 Android 4.0 也是可以直接觀看的,但這些環境的支援廣度不夠大,要挑戰 JPEG 或 PNG 的地位,還有得拼。

如果你想要先玩玩看,Google 也提供了把圖檔轉成 WebP 或是瀏覽 WebP 圖片的工具,可以到這個頁面下載。

不知道大家對 WebP 圖片格式的未來應用有什麼想像?請留言跟大家分享吧。

資料來源:The Official Google Code Blog

伸延閱讀:

比JPEG小五倍,用 Weppy 看 WebP