読者です 読者をやめる 読者になる 読者になる

GIF⇒WebM変換

画像処理 PC

 WebMの存在は数年前から知っていたものの、利用したことはありませんでした。

 正確性はさておき私の認識では、エンコーダ、デコーダ、コンテンツそれぞれにロイヤリティが発生するH.264の代替として、ロイヤリティフリーでオープンなVP9(VP8)コーデックが登場し、そのコンテナとしてWebMができたと理解しています。故に、まっとうな映像を記録するフォーマットだと思っていました。実際、Youtubeなどの動画サイトで主に利用されています。

 ところで、写真と映像の中間のような立ち位置の存在(?)として、アニメーションGIFがあります。IMGタグで貼り付ければ、自動再生されるため、手軽に動きを見せたい場合などに重宝します。が、GIFアニメは画質を向上させようとすると、著しくファイルサイズが大きくなってしまうことから、低解像度の小さなアニメーションとして利用されていることがほとんどです。
 そんなGIFの代替としても、WebMが使えそうなので、ちょっと調査・実験してみました。
 

GIFをWebMに変換する

コマンド例(ffmpegを使用)
ffmpeg -i input.gif -c:v libvpx-vp9 output.webm

最低限、コーデックにlibvpx-vp9を指定するだけで、とりあえず変換できる*1

ファイルサイズ比較

手元にあったファイル(7つ)を変換してみたところ以下の通り。劇的に削減されるが、適当に目視した限りでは画質劣化は感じられない。

# Frame# Resolution GIF [Bytes] WebM(VP9) [Bytes] 圧縮率
1 200 320x180 6,153,946 187,091 3.04%
2 23 480x320 2,476,458 135,169 5.46%
3 12 480x270 1,102,585 93,097 8.44%
4 4 480x270 414,180 49,678 11.99%
5 17 480x270 1,561,106 110,068 7.05%
6 6 480x270 596,904 61,277 10.27%
7 34 480x270 3,478,365 124,637 3.58%

GIFの場合、ファイルサイズをそれぞれのフレーム数で割ると、同一解像度なら似たような値になる。要するに、時間軸での圧縮がされない。
一方、WebMの場合はMPEG2やH.264と同様に時間軸の圧縮が効いているのが解る。
 

Webページ上でGIFのようにWebMを見せる

自動再生
  • HTML5のvideoタグで、autoplay属性を指定する
ループ再生
  • HTML5のvideoタグで、loop属性を指定する
HTML記述例
<img src="hoge.gif">
  • WebM
<video src="hoge.webm" autoplay loop></video>

 

 以上より、アニメーションGIFの代替としても、クオリティを犠牲にせず劇的にデータ量削減が可能なことが解りました。
 そんなWebMですが、本投稿にはサンプル画像を掲載していません。はてなフォトライフがWebMに対応していないため、はてなブログに掲載できないのです。

 なお、WebMプロジェクトのサイトによれば、ブラウザはChrome, Chromium, Firefox, OperaがWebMに対応しているようです。
WebM - wiki
 上記には掲載されていませんが、Microsoft Edgeも対応しているようです。ということで、後はAppleさえやる気を見せれば環境は整うわけで、Webサービス側がWebM対応しない理由は無くなりそうですね。ストレージにやさしく、トラフィックも軽くなるため、サービス提供者もユーザーもうれしい技術なのですから。
 



以上。

*1:まともな映像をVP9にエンコードする際は、各種パラメータ指定が有意に機能するが、今回はソースがGIFで画質もへったくれもないため、各パラメータはデフォルト値で十分なクオリティ。

広告を非表示にする