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対応しない理由は無くなりそうですね。ストレージにやさしく、トラフィックも軽くなるため、サービス提供者もユーザーもうれしい技術なのですから。
以上。
