MOV を WebP に変換

ここでの読者は、他人の動画からサムネイルを取り出す立場ではなく、自分で撮った、あるいは書き出した MOV を、これから自分のページで公開しようとしている立場です。動画とポスター画像は、両方とも自分で用意するものです。

ポスターは飾りではなく、通信が遅い間や自動再生が拒否されたときに実際に表示される絵です。適当に選んだ一枚は、そこそこの割合の訪問者にとって「壊れているように見えるページ」になってしまいます。

一番効果があるのは、動画の先頭ではなく、再生が始まった直後に実際に表示される瞬間を選ぶことです。フェードインの始まりなどを避け、少し進んだ瞬間を切り出すと、ポスターから再生開始への切り替わりがほぼ気付かれません。

逆に黒みからのフェードの最初のフレームをポスターにすると、再生開始まで黒い四角が表示され続け、その後いきなり絵が現れるという目立つ違和感になります。秒数を指定するだけの操作なので、何回か試す価値があります。

フレーム抽出で選べる設定は取り出す秒数だけです。書き出される WebP の画質は、このサイトのラスター画像パイプライン共通の既定値で符号化され、個別に数値を調整する項目はありません。

解像度は縮小されず、動画そのものの解像度で書き出されます。4K で撮った動画からは 3840 ピクセル幅の画像が出てきますが、ポスターとして表示する幅はたいてい 640 から 1280 ピクセル程度なので、公開前に画像編集ソフトなどでリサイズしておくと無駄がありません。

スマートフォンの映像は横向きのフレームと回転情報として保存されていることが多く、縦の動画に対しては縦のポスターが必要になります。書き出された WebP の縦横比が、動画の再生時の縦横比と一致しているかを必ず確認してください。

一致していないと、ポスターの段階では黒帯が入り、再生が始まった瞬間にその帯が消えるという目に見える崩れになります。動画要素に設定する前に、寸法を見比べておく価値があります。

圧縮された動画から切り出した静止画は、その圧縮の影響をそのまま引き継ぎます。動きの速い場面はブロックノイズやぼやけが出やすく、静止した瞬間のほうが良いポスターになります。

どうしても動きの多い場面しか選べない場合は、撮影時に静止画を別途一枚撮っておくという手もあります。動画から抽出した一枚が本物の写真に勝ることはまずありません。

このサイトのラスター画像パイプラインは画素だけをやり取りする仕組みで、EXIF や色空間の情報を運ぶ経路がありません。フレームから作った WebP には、撮影日時もカラープロファイルも含まれません。

ブラウザーはプロファイルのない画像を sRGB として扱います。ウェブ用としては妥当な前提ですが、彩度の高い場面を厳密な色で確認したい場合は、実際に再生している動画と並べて見比べてから使うようにしてください。

video 要素の poster 属性に画像をそのまま指定し、preload を auto ではなく metadata にしておくと、誰も再生していない段階で動画本体まで読み込まれることを防げます。ポスターが本来の役目を果たす組み合わせです。

一覧やカードに使う画像も同じファイルで済むことが多く、width と height を指定しておけば読み込み時のレイアウトのずれも防げます。

デコードも WebP への書き出しも、このタブの中だけで行われます。ネットワークタブを開いたまま変換すれば、動画を運ぶ通信が一切発生していないことを確認できます。

公開前の作品ほど、見知らぬ変換サービスに送りたくない素材はありません。無料枠は 1 ファイル 100 MB までで、アカウント登録も不要です。