相關文章

49d8642258641f2fa8b5a3f91370cb99 看來新版的 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 

使用 Facebook 留言

F61d39125f6af2fdafa65d0a758dd433?size=48&default=wavatar
3人給推

1.  wke (發表於 2011年11月24日 20:42)
如果能搶先在android系統裡的內建相機軟體先使用webP格式的話,應該可以推廣得更快!
E53ed7713babb5f098504d25a79ac73d?size=48&default=wavatar
2.  ooXx (發表於 2011年11月25日 00:31)
其後,重點應該是瀏覽器(平台)與開發軟體的原生支援度。
只靠平台支援還是很難推起來的。
另外個人認為照相軟體支援度倒是不是那麼重要。
(畢竟都叫做WEBP了,使用定位本來就與相片PHOTO不同,需要在轉過去就好了,所以開發軟體及平台較重要)
A71c0cca84e4f07e2577b8994606fc60?size=48&default=wavatar
1人給推

5.  麥鼠 (發表於 2011年11月30日 17:20)
Adobe、Corel系列繪圖軟體能否支援也是推廣成敗的重要因素啊!

發表回應

謹慎發言,尊重彼此。按此展開留言規則