2014年4月15日 星期二

WebM能否取代GIF?

webM

歐美知名貼圖討論版4Chan在4月6日發表開始支援WebM格式檔案為其動態圖片格式之一,這一舉動似乎開始引起一股熱潮與討論,動態圖片格式GIF終於有挑戰者要出現了嗎?

本篇建議需使用Firefox、Chrome、Opera等瀏覽器閱讀,IE與Safari可能看不見其中一些圖與影片。

根據維基百科,GIF格式早在1987年就被制定,它的優點是檔案小、可包含多張圖片而產生動畫效果,但缺點是只有256種顏色,然因其動畫功能,讓它至今還活躍於網路上。GIF不是沒有過挑戰者,過去PNG也有支援動畫格式的擴張格式APNG,不過並不普及,無法撼動GIF動態圖片霸主的地位。

WebM是Google在2010年提倡的免費開源HTML5「影片格式」*,現在最常在Google自家Youtube HTML5版裡看見他的蹤跡。雖然WebM是影片,不過由於大多數瀏覽器有原生支援,不像flash影片還要額外載入播放器,以HTML5新增播放標籤指令,使得他能像圖片一樣,很容易就放在網頁當中。

*HTML5支援3種影片格式,分別是MP4、WebM與Ogg,MP4支援最為普及但沒人想這樣用,大概是因為MP4含有非開放的編碼技術,在使上,未來可能有衍生問題與授權爭議,WebM某種程度上就是Google因應這種問題才提出此規格(因為他們有Youtube嘛)。而Ogg雖然也是開放格式,但相容瀏覽器比WebM少,相較之下WebM是目前的最佳解。

你能看見上方的圖嗎?沒有可能表示你的瀏覽器並不支援WebM,請你改用Firefox、Chrome或是Opera瀏覽器。而有看見的朋友,上圖就是把WebM當GIF用的例子,當你把自動播放打開、隱藏控制列、開啟循環播放、靜音(或本來就不帶聲音也可),它看起來就是GIF,只是品質更高、檔案更小。(可右鍵暫停播放,圖片取自4chan討論串)

WebM比起GIF有著以下的一些優勢:

  • 圖片越大的情況下 效能越划算
  • 更先進的演算法,檔案更小
  • 全彩,不受限於256色,品質更好
  • 原始用途是影片,所以可以有音效
  • 解析度、每秒格數自由,解析度可上4K,格數可以60fps
  • 大檔案時讀取更平順
  • 控制自由:HTML5影片可設定不自動或自動播放,播放速度也有0.5倍、1.5倍、2倍等選擇,還支援循環播放等功能。

我製作上圖的GIF版來做對照(製作工具GifCam,設定33fps、Quantize輸出):

loop

在容量上,WebM是565KB,GIF版則是高達1.5MB,更要注意的是,WebM版尺寸為1280 X 720,而GIF版我只壓了640 X 360,GIF版畫面尺寸只有1/4,但容量卻大了3倍,更不用說GIF只有256色而造成畫面的顆粒感與鮮豔度上的差異,品質與容量上GIF都是完敗。

WebM品質表現範例:

新海誠《言葉之庭》片段 1920 X 1080,1700Kbps,15秒 無聲音,3.15MB

這麼優異的畫質卻只要3MB,不過這什麼好驚訝的,WebM使用的影像編碼是與H.264同級的VP8(與VP9),完爆快30年前創造出來的老格式是自然的事。

放個長寬比異於普通影片的,《冰雪奇緣》 Elsa,520 X 856,所以基本上尺寸也是隨便你

解析度4K的範例,須注意硬體能力,硬體不足的設備可能有當機之虞。在我的電腦上,播起來像幻燈片:

再來說到效能,一開始我認為WebM本身是影片,其影像編碼技術是較近年所開發,雖然壓縮效率好,但推想其所耗費的效能應該不便宜,為了做點簡單驗證,我製作了另一組WebM/GIF來測試:

WebM:427 X 240 30fps 2.46MB 無聲音 2000Kbps

GIF版:427 X 240 33fps 18.1MB Quantize輸出

GIF由於檔案太大了,會影響瀏覽體驗並耗費許多頻寬,就不直接貼圖而只貼連結。而原始影片片段是1280 X 720,檔案3.39MB,1800Kbps。

在我AMD雙核2800的老PC上,兩者個別在相同瀏覽器中播放,CPU使用量都在10~20%間跳動,但感覺WebM可能平均高點的感覺,覺得GIF平均15%、WebM是16%這樣,不過又有GIF的CPU使用量跳動較劇烈、WebMCPU使用上下跳動幅度較小,然而沒有使用工具軟體紀錄,這是不可靠的個人感覺。然而差距不大實在讓我有點意外,雖然僅是非常粗糙且不精準的簡單測試。而在過去使用經驗上,GIF在大張並且較劇烈的動態圖片非常吃效能應是無誤的,我的電腦在播4K的WebM還會動,但我不敢想像4K的GIF...至於小尺寸且複雜度較低的動態圖片上,GIF可能還是有優勢,若WebM真有取而代之的一天,我猜動態的表情符號可能會是GIF最後用途。另外已經有許多硬體廠商已經說要為WebM做硬體加速,未來WebM的耗能只會只會更小。

WebM支援60fps(甚至120fps),那種流暢感可以說看過就回不去了,看看以下範例:

補插至60fps的《冰雪奇緣》(Frozen)片段

補插至60fps的《魔髮奇緣》(Tangled)片段

補插至60fps的《言葉之庭》片段

補插至60fps的《冰與火之歌:權力遊戲》(Game of Thrones)第四季首集片段

WiiU遊戲《瑪利歐賽車8》(Mario Kart 8)60fps遊戲片段

WiiU遊戲《魔兵驚天錄2》(Bayonetta 2)60fps遊戲片段

《雷曼超人:傳奇》(Rayman Legends)開場畫面

另外,再來個有聲音的範例:

動畫《乒乓》孔文革登場橋段

進階功能,如播放速度之類的可以在影片上右鍵自己開來玩玩看。還有一個我覺得很重要的是可以設定不自動播放,不知大家有沒有過開啟大量GIF圖片時(很多Tumblr愛這麼幹),整個網頁就因為大量的讀取而凍住好幾秒的經驗,且GIF又肥又大,讀取時極度衝擊效能,載入時畫面一點一點地動,幾乎要等完全載入完,畫面才正常,是很不舒服的瀏覽體驗。不自動播放就可以防止這種惡夢發生,而進階的HTML5語法,還可以設定滑鼠滑過影片就開始播放,或預先讀取但不播放等等,彈性大許多。

最後還是不免要談到缺點,WebM目前最大缺點就是並非每個瀏覽器都支援。主流5大瀏覽器中,IE與Safari就沒有支援,雖說IE9可透過安裝Google為提供的元件來取得支援,但就我個人的使用經驗,雖然可以看IE自己的提供測試頁還有Youtube的WebM影片,但看不了4chan的WebM,我自己在這部落格上貼的WebM影片(在《乒乓》觀後感一文中)也看不見,感覺支援還是有問題。更不用說IE9不支援XP與以下作業系統,XP的IE用戶無法享受此格式帶來的好處。

網路內容管理者與提供者,包括像我這樣寫部落格的人,使用WebM也要考慮到會有部分觀眾看不見的問題,4Chan提到過他們86%的造訪者使用的瀏覽器支援WebM,換句話說,即是有14%並不支援,而本部落格也會有大約10%的造訪者會看不見WebM,雖然WebM有著種種好處,但就本站而言,短時間還不能把WebM當成常用圖片格式。

WebM未來是否能有更進一步的普及呢?就短期看來,4Chan這一決定似有推動使用WebM的潮流,另外一個我常造訪,歐美最大型的遊戲論壇NeoGAF,就是因此而有人開始推動使用WebM;而reddit特定的主題區近日也逐漸看到有人在放WebM的連結(甚至出現專門子區)。這一潮流是否進一步擴大,或者只是限在某些「網路核心使用者」群體圈內短暫的風潮,還需後續觀察,但我得說,GIF老態已現,趕緊來個人來取代GIF吧。


倘若WebM未來真是因為取代GIF而普及,我想Google大概是最驚訝的人,畢竟他們還有提出過衍生自WebM的圖片格式WebP(雖然被人吐槽比JPG還差)。而這個WebM要是大為流通,恐怕IE市占率可能又要加速下滑了?

 

參考來源:NeoGAF維基百科英語版維基百科

WebM相關資訊:

4Chan目前的WebM限制: 3MB、無聲音、最長120秒、尺寸最大 2048 X 2048

 

IE的WebM元件(僅支援IE9與以上):

微軟的HTML5影像支援測試頁面:

 

目前支援WebM的「圖床」:

影片轉Web方式:

7 則留言:

  1. http://www.iefans.net/dongtai-tupian-geshi-webm-qudai-gif/
    GOOGLE時隨便點到的網頁
    不知道這篇是不是您打的?

    回覆刪除
    回覆
    1. 那文不是我寫的,也沒有問過我,
      不是你說,我還不知道大陸網站會轉這篇文章,謝謝!

      已經好久沒被大陸網站整個全文轉走,
      不過跟以前比,這個最後有寫出處算是還算有點良心...

      刪除
  2. 回覆
    1. 那糟糕了,那些圖片在一次硬碟損毀中都沒了,我自己沒有留底,也沒辦法上傳到其他空間。

      改天再弄一批新圖去替換好了...

      刪除
  3. 畢竟這麼多年,gif 的製作成本和學習成本較低,比如photoshop 可以製作簡單的GIF 。而用什麼工具製作webM 呢?

    回覆刪除
  4. 請問你是用什麼軟體補插至60fps?

    回覆刪除
  5. 最近才知道這個格式,連聲音都能有真的讓我很驚訝
    這樣看來,WebM也可以被當做是一種「影片格式」吧?
    倘若用WebM來播放影片是否可行呢?一集20分鐘左右的這樣?

    回覆刪除