Web動画ファイルをAV1コーデックでもっと小さくする方法（2025年）

 (evilmartians.com)
28 ポイント 投稿者 xguru 2025-03-14 | 1件のコメント | WhatsAppで共有
  • 最新のAV1動画フォーマットを使うと、Web上の動画ファイルサイズを 20〜40倍小さく できる
  • YouTubeやNetflixはAV1を次世代動画コーデックとして採用しており、Chrome、Safari、Firefoxなど主要ブラウザでサポートされている
  • 本ガイドでは、AV1コーデックのエンコード戦略と最適化方法を説明する

コーデックとコンテナの概要

  • 静止画フォーマット: WebP、JPEG、PNGはほとんどのブラウザでサポートされている。最新のブラウザではAVIFも利用できる
  • 動画ファイルの構造:
    • 動画コーデック: H.264、HEVC、VP9、AV1などが動画圧縮の戦略を決める
    • 音声コーデック: MP3、Opus、AACなどが音声圧縮の戦略を決める
    • コンテナ: MP4、MOV、WebMなどがあり、動画・音声ストリーム、字幕、メタデータを保存する

AV1コーデックの紹介

  • AV1コーデックは2018年3月に初めてリリースされた
  • HEVC/VP9やH.264/VP8と比べて、ファイルサイズを最大 30〜50%さらに小さく できる
  • 長所:
    • 低ビットレートでも高画質を維持できる
    • 圧縮による劣化がほとんどない
  • 短所:
    • エンコード速度が遅い
    • 最新のデバイスでのみ対応している（iPhone 15+、MacBook M3など）
    • 互換性のためにAV1版とH.264版の両方を用意する必要がある

現時点でAV1を使う方法

  • コンテナとコーデックの選択
    • コンテナ: MP4が最も一般的で推奨される
    • 音声コーデック: Opusの使用を推奨（高効率で無料）
  • 最大限の互換性のためのファイル準備
    • デスクトップおよび最新のモバイルブラウザ向け（Chrome、Safari、Firefox、Edgeなど）
      • MP4コンテナ + AV1動画コーデック + Opus音声コーデック
      • ユーザーカバレッジ: 約74%（2023年9月時点）
    • 旧Safariおよび旧macOS向け
      • MP4コンテナ + H.264動画コーデック + AAC音声コーデック
      • ユーザーカバレッジ: 約19%
    • 旧iPhoneおよびMacのサポート強化向け（任意）
      • MP4コンテナ + HEVC動画コーデック + AAC音声コーデック

AV1動画ファイルの作成方法

1. FFmpegのインストール

  • Mac: brew install ffmpeg
  • Linux: ディストリビューションのパッケージからFFmpegをインストール
  • Windows: インストールガイド を参照

2. H.264ファイルの作成（旧デバイス対応用）

  • ffmpeg -i SOURCE.mov -map_metadata -1 -c:a aac -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.h264.mp4

3. AV1ファイルの作成（最新デバイス対応用）

  • ffmpeg -i SOURCE.mov -map_metadata -1 -c:a libopus -c:v libsvtav1 -qp 30 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.av1.mp4
  • crf または qp の値を調整することで、画質とファイルサイズのバランスを取れる

4. HEVCファイルの作成（必要に応じて）

  • 古いiPhoneおよびMacをサポートするためにHEVCでエンコードする
  • ffmpeg -i SOURCE.mov -map_metadata -1 -c:a aac -c:v libx265 -crf 24 -preset veryslow -pix_fmt yuv420p -movflags +faststart -tag:v hvc1 -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.hevc.mp4

FFmpegの主要オプション説明

  • -i SOURCE.mov: 元ファイルの入力指定
  • -map_metadata -1: 不要なメタデータを削除
  • -c:a libopus: 音声コーデックを選択（Opus）
  • -c:v libsvtav1: 動画コーデックを選択（AV1）
  • -crf 34, -qp 30: 画質とファイルサイズの調整（値が低いほど高画質でサイズは大きくなる）
  • -preset veryslow: 高品質ファイル生成のためのエンコード速度設定
  • -pix_fmt yuv420p: 色データを減らしてファイルサイズを削減
  • -movflags +faststart: ストリーミング開始時間を短縮
  • -tile-columns 2 -tile-rows 2: エンコード速度を向上

ブラウザ互換性の設定

  • 最新ブラウザではAV1を使い、旧ブラウザではH.264にフォールバックする 
    <video controls width="600" height="400">  
  <source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08,opus">  
  <source src="video.h264.mp4" type="video/mp4; codecs=avc1.4D401E,mp4a.40.2">  
</video>
  • 旧iPhoneおよびMacをサポートする場合はHEVCファイルを追加できる 
    <source src="video.hevc.mp4" type="video/mp4; codecs=hvc1">

GIFをAV1またはH.264に変換する

  • GIFはH.264やAV1と比べて 20〜40倍大きく、CPUと電力も多く消費するため、変換を推奨
  • GIF → H.264変換
    • ffmpeg -i IMAGE.gif -map_metadata -1 -an -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" animation.h264.mp4
  • GIF → AV1変換
    • ffmpeg -i IMAGE.gif -map_metadata -1 -an -c:a opus -c:v libsvtav1 -qp 30 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" animation.av1.mp4
  • HTMLでGIFを置き換える例 
    <video autoplay loop muted playsinline width="600" height="400">  
  <source src="animation.av1.mp4" type="video/mp4; codecs=av01.0.05M.08">  
  <source src="animation.h264.mp4" type="video/mp4">  
</video>

関連記事

1件のコメント

 
laeyoung 2025-03-14

ランディングページで動画を使うことは多いので、一度試してみてもよさそうですね。うまく機能するのか、例外ケースが発生して使えないのか。