WebM を WebP に変換

ウェブページに載る画像は、文書に入る画像とは違う基準で判断されます。誰も画像ビューアーで開いたりせず、訪問者が滞在するかどうかを決める間にブラウザーが読み込む二十個のうちの一つになります。キロバイト単位のサイズは訪問者一人ひとりが払う実際のコストで、フォーマットは CMS もビルドの仕組みもブラウザーも特別な扱いなしで受け入れられるものでなければなりません。

これが、ここで JPG ではなく WebP を使う理由のすべてです。見た目は同じでバイト数はおよそ三割少なく、現行ブラウザーすべてで動きます。十数個のチュートリアル用サムネイルが並ぶページなら、見た目を変えずフォールバックのマークアップも増やさずに画像の重さを三分の一減らせます。実際のプロジェクトで生き残る最適化とはこういうものです。

WebP と WebM は同じ取り組みから生まれました。Google は 2010 年ごろ、特許に縛られた形式への無償の答えとして両方を公開し、WebP の静止画圧縮は WebM の土台である VP8 のフレーム内符号化から育ちました。WebM から一コマを取り出して WebP として書き出すのは、翻訳というより血のつながりに近い作業です。

ただし可逆ではありません。フレームはピクセルへとデコードされ、固定品質 82 でゼロから再エンコードされます。それは期待しないでください。血のつながりが買ってくれるのは、動画コーデックが保つ種類の細部が、この静止画エンコーダーが保つのが得意な種類の細部と近いということで、動画から取った WebP のコマが数字から想像するより良く見える理由です。

この変換のいちばん使い道のある使い方は、見てみれば当たり前のものです。WebM からコマを取り出し、その動画の `poster` として使うのです。再生が始まるまでブラウザーはポスターを表示するので、最初に人が見るものが真っ黒な四角や無関係なストック画像ではなく、動画そのものの実際の一コマになります。

ゼロ秒ではなく一秒あたりから取ってください。録画の最初のコマはたいていフェードや空白の状態、まだ読み込み中のページで、しかも動画が再生を始めた瞬間に描くのもまさにそのコマなので、そこから少し進んだ瞬間のポスターは、見ている人に何かを見せながら再生開始時の見た目の飛びを起こしません。ゼロ秒はファイルの中でいちばん面白みのないコマを与え、それと重複するポスターになってしまいます。

コマは動画そのもののピクセル寸法のまま、何も縮小されずに出てきます。1080p の画面録画は 1920 × 1080 の WebP を、4K の撮影は 3840 × 2160 の WebP を生みます。これは意図的です。コマには本当の解像度があり、この変換の仕事はそれを推測せず、そのまま渡すことです。

リサイズはもっと下流の仕事です。レスポンシブな `srcset` を作るもの、CMS の画像パイプライン、ビルドの仕組みは、レイアウトに必要な幅をすでに知っていて、縮小済みのソースよりフル解像度のソースから作業したほうが良い結果を出します。ここでは正直ないちばん大きいものを取り、レイアウトを知っているものに小さいものを作らせてください。

WebM の中の画像は動きのために符号化されています。動画コーデックは動くところにビットを費やし、動かないところは節約します。誰も一枚のコマをじっと見つめたりしないという前提のもとで。それを止めて静止画にするのは、まさに誰もしないと想定されていたことをする行為です。

サムネイルとしての実際の影響は小さく、原寸よりずっと小さく表示され、縮小がぼやけをかなり隠してくれるからです。影響が出るのは、その静止画を大きく使うとき ── ヒーロー画像や全幅のイラストレーション ── で、パンやスクロールの最中のコマはページの他の部分に比べて明らかにもやついて見えます。直し方はタイムスタンプです。画がまだ動いていない瞬間を見つけて、そこから取ってください。

もうブラウザーは問題ではありません。取り残されているのは別の場所です。一部のメールクライアントは WebP を描画しません。ニュースレターのサムネイルは JPG にしてください。いくつかの古いデスクトップアプリケーションや印刷の工程、少数のアップロードフォームは今も WebP を拒みます。Windows も macOS もいまではプレビューできますが、それは数年前まで違っていた話で、古い注意書きの多くはそこに由来しています。

ブラウザーの内側では WebP は普遍的だと考えて安全で、それが AVIF ではなくこちらが実用上の既定になっている理由です。行き先がウェブページ以外 ── メール、文書、プリンター、フォーム ── なら JPG を選んで、それ以上考えないことです。

チュートリアルの一覧には一本ずつサムネイルが要り、それは一コマにつき一回ではなく一動画につき一回の変換を意味します。変換し、うまくいったタイムスタンプを控え、次のファイルへ。アップロードを試行のたびに待つ必要がなく、待ち行列もないので、この一巡は数秒で済みます。

すべてゼロ秒で済ませず、タイムスタンプを意図的に選ぶ価値があります。並んだサムネイルが全部同じ空のエディタや読み込み中のスピナーを見せていたら、訪問者にはどれがどの動画かまったく伝わりません。どのファイルもデフォルトのコマをそのまま使うと、まさにそうなります。

ポスターフレームを必要とする録画はたいてい、まだ世に出ていないものです。製品デモ、機能の説明動画、講座の一コマ。60 KB のサムネイルを受け取るためだけに動画まるごとをどこかへ渡すのは、割に合わない露出です。

デコードもエンコードもタブの中で、ブラウザーがすでに WebM を再生するために持っているコーデックを使って行われます。動画を運ぶ通信は発生せず、アカウントも一日の上限もありません。それは三十本まとめて変換するのが、何かを契約し直す理由ではなく、同じ操作を三十回繰り返すだけだということでもあります。