アニメ K-08AI制作での運用
ファイルの重さと配信
別名: エンコード、ビットレート、動画形式
映像を Web で配信するために、形式(MP4/WebM)、ビットレート、解像度を選び、ホスティングの上限に収める作業。
どういう技法か
Web で動画を配信するには、形式(コンテナと符号化方式)を選ぶ必要がある。MDN の解説では、H.264(AVC)の MP4 が最も互換性が高く、VP9 や AV1 の WebM はより圧縮効率がよいが対応環境に差があるため、<video> に複数の <source> を並べる方法が紹介されている。ファイルの大きさは、解像度・フレームレート・ビットレート・動きの量で決まる。ホスティングにも上限があり、GitHub は100MiBを超えるファイルを拒否し、Cloudflare Pages は1ファイル25MiBまでとされる。
なぜ効くのか
ファイルが重いと、読み込みに時間がかかり、再生の開始が遅れて離脱が増える。モバイル回線では通信量の負担にもなる。逆に圧縮しすぎると、絵が崩れて作品の印象が落ちる。静止画にゆっくりした動きを付けた映像は、動きの量が少ないため、同じ画質でもビットレートを抑えやすい。形式と設定を用途に合わせて選ぶと、画質と速さの両立ができる。
やり方
- 互換性のために H.264 の MP4 を基本にする
- 必要なら VP9/AV1 の WebM を追加し、<source> を並べる
- 解像度は表示される大きさに合わせ、必要以上に上げない
- フレームレートは動きに必要な範囲に抑える
- 書き出し後にファイルの大きさを確認し、ホスティングの上限に収める
- 無音の映像なら音声トラックを入れずに書き出す
使いどころ
Web ページに動画を埋め込んで配信するすべての場合。特に静的サイトのホスティングで配信する場合は上限の確認が必須である。モバイル回線で見られることの多いSNS経由の閲覧でも、軽さが視聴の開始を左右する。
やりすぎ・失敗
高画質のまま書き出すと、ホスティングの上限を超えたり、読み込みが遅くなったりする。WebM だけで配信すると、一部の環境で再生できない。圧縮しすぎると、パンの動きで絵がにじむ。
AIアニメでの使い方
fantasist.org のモーションコミックは無音で、静止画のゆっくりした動きなので、音声トラックなしの MP4(H.264)で書き出し、1〜2分で数MB〜十数MBに収めることを目安にする。編集部の運用では、ホスティングの1ファイル上限を下回っているかを公開前に確認する。字幕(WebVTT)と読み上げ台本(JSON)は別ファイルなので、映像を作り直さずに文言を直せる。
この技法を使ったAIアニメ
まだありません。
出典
- Web video codec guide
H.264のMP4が最も互換性が高く、VP9/AV1のWebMを併用できる
- About large files on GitHub
50MiBで警告、100MiB超は拒否、ブラウザ投稿は25MiBまで
- Cloudflare Pages limits
Pagesの1ファイル上限は25MiB、超える場合はR2を推奨