Web動画のファイルサイズをAV1コーデックで効果的に縮小する方法: 2025年度版（翻訳）

Web動画のファイルサイズをAV1コーデックで効果的に縮小する方法: 2025年度版（翻訳）

賭けが始まったのはずっと前のことです。YouTubeとNetflixがこの動画コーデック（codec）に共同でAV1と命名して以来、両者は今日に至るまでAV1を長年使い続けています。

Evil Martiansも既にランディングページでAV1を採用しています。本記事では、私たちがこの新しい動画フォーマットで培った経験を共有するとともに、最適なエンコーディング戦略を手順を追って解説いたします。

🔗 コーデックとコンテナ

まずは視野を広く取って、静止画像については最早迷う必要はないことを押さえておきましょう。
あらゆるブラウザでサポートされているWebP、JPEG、PNGのいずれか、もしくはGoogleが新し目のブラウザ向けに開発したよりコンパクトなAVIFを実験的に使うのもありです。

拡張子が.pngの画像ファイルは、ほぼ確実に本物のPNGファイルと考えてよいでしょう（ただしある種のダーティハックを使えばこの限りではありませんが、このような攻撃は私たちのimgproxyなどのツールで防げます）。

動画ファイルの場合はもう少し込み入っています。
ファイル拡張子（.mp4、.wmv、.webm、.mov）はあくまで動画の「コンテナ」を表すものであり、動画ファイルの作成には最大3種類の異なるフォーマットが使われています。

1. 動画コーデック（video codecs）

これは動画の圧縮戦略を決定します。動画の品質とサイズにはトレードオフの関係があります。Webで一般に使われる動画コーデックは、H.264、HEVC、VP9、そして最近ではAV1などです。

2. 音声コーデック（audio codecs）

こちらは音声の圧縮戦略を決定します。動画に音声が含まれていない場合は音声コーデックはなしでも構いません。よく使われる音声コーデックは、MP3、Opus、AACです。

3. コンテナ（containers）

ここには動画ストリーム（何らかの動画コーデックで圧縮）と音声ストリーム（何らかの音声コーデックで圧縮）の両方を保存します。また、字幕やメタ情報などの追加情報も含められます。
よく使われるコンテナフォーマットはMP4、MOV、WebMです。

つまり、.mp4という拡張子を見ただけでは、ファイルのパッケージ化にMP4コンテナが使われていることしかわかりません。どのコーデックを選ぶかは、完全に動画の作成者が自由に決められます。「動画: H.264、音声: AAC」「動画: AV1、音声: Opus」のように、さまざまな組み合わせが可能です。

🔗 AV1コーデックとの出会い

AV1という動画コーデックが最初にリリースされたのは2018年3月であり、以前のコーデック世代であるHEVC/VP9やH.264/VP8などに対抗できるよう設計されています。

AV1で生成される動画ファイルは、低レベルのトリックを駆使することで、H.264/VP8と比較して最大30〜50%小さく、HEVCと比較して最大30%小さくなります。

ただしいくつかの問題点もあります。

• 使われているアルゴリズムが複雑なため、AV1のエンコーダは低速です。
• AV1はChromeやFirefoxではサポートされていますが、Apple製品でサポートされているのは最新のiPhone 15および16、そしてMacBook M3のみです。
  このため、古いデバイスに対応するには、どの動画についても少なくともAV1バージョンとH.264バージョンを用意しておく必要があります。

AV1の最大の特長は、ビットレートが低い場合でも高画質が維持されることです。このおかげで、圧縮による見かけ上の画質低下を起こさずに動画サイズを小さくできます。

🔗 AV1を今すぐ使う方法

それでは、Web向けの高品質なAV1動画コンテンツを作成する手順を見ていきましょう。

最初に、コンテナ形式を決める必要があります。理論上はどのコンテナ形式でも構いませんが、おすすめはMP4であり、現時点では最も普及しているようです。

AV1の音声コーデックについては、効率の高さと無料である点から、Opusを使うことにします。

ブラウザ間互換性を最大限に保つため、制作する動画ファイルは1ファイルではなく2ファイルにします。

1. デスクトップ版Chrome/Safari/Firefox/Edge、およびモバイル版Chrome、iPhone 15のモバイル版Safari（ユーザーの74%をカバー）の場合

コンテナ: MP4
動画コーデック: AV1
音声コーデック: Opus

2. 上より古いiPhoneやmacOS上のSafari（ユーザーの19%をカバー）、およびその他のブラウザの場合

コンテナ: MP4
動画コーデック: H.264
音声コーデック: AAC
（ファイルサイズは増える）

変換には、ターミナル上でFFmpegを利用するのがおすすめです。
世の中にはGUIの動画圧縮ツールがいろいろありますが、CLIツールにしておくことで手順の再現やスクリプトでの自動化が行いやすくなります。

FFmpegのインストール手順は以下のとおりです。

🔗 Macの場合:

1. Homebrewをインストールしておく
2. brew install ffmpegを実行してFFmpegをインストールする

🔗 Linuxの場合

利用しているディストリビューションに応じた方法でFFmpegをインストールしてください。

🔗 Windowsの場合

以下のガイドをお使いください。

参考: How to install FFmpeg on Windows

ffmpeg実行ファイルがコマンドラインで利用可能になったら、H.264ファイルを生成しましょう（古いブラウザとの互換用）。
私たちの場合、コンテナ形式はすべてMP4にするので、拡張子は.av1.mp4や.h264.mp4を使います。

必要なコマンドは以下のような感じになります（この後すべてのオプションについて説明しますのでご心配なく）。

# "SOURCE.mov"は、変換したいソース動画ファイルへのパスに置き換えてください

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

生成されたvideo.h264.mp4ファイルを開いて再生し、画質を確認しましょう。画質はよくても動画ファイルのサイズがまだ大きいようなら、-crfオプションに渡す数値を調整してみてください（ -crf 26や-crf 28）。 これで動画のサイズは小さくなりますが、その分画質も低下することになるので、画質と動画サイズが折り合う数値を見つけましょう（正直、この作業は科学というより芸術と言えます）。

今度はAV1ファイルを生成します（以下のコマンドは上述のH.264の場合より時間がかかりますが、これは織り込み済みです）。

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

動画サイズと画質の最適なバランスを見つけるために、-qpオプションに渡す数値を調整してください。この数値が小さいほど、画質はよくなる代わりにファイルサイズは増大します。

続いて、得られた2つのファイル（video.h264.mp4とvideo.av1.mp4）をWebプロジェクトのrootディレクトリにコピーします。

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

入力に渡す変換元の動画ファイルを指定します。FFmpegはこのファイルから動画ストリームと音声ストリームを取り出してからそれぞれを変換し、新しいコンテナに保存します。

-map_metadata -1

これは動画のメタデータ（元動画を最初に制作したときのツール名など）を削除するという指示です。メタデータは役に立つこともありますが、Web開発ではあまり役に立ちません。

-c:a libopus
または-c:a aac

音声コーデックを指定します。
なお、良い結果を得ようとしてaccの部分をlibfdk_aacやaac_atに置き換えてみたとしても、どのシステムでも無効です。

-c:v libsvtav1

動画コーデック（画像を動画ストリームに変換するライブラリ）を指定します。

-crf 34

crfは「Constant Rate Factor」の略語で、動画サイズと画質のバランスを設定します。JPEGの画質調整用スライダーと似ていますが、数値の向きは逆です（0が最高画質かつ最大サイズ）。H.264におけるCRFスケールは0〜51です。

-qp 30

AV1でlibsvtav1を使う場合の動画サイズと画質のバランスを設定します。スケールは0〜3です（小さいほど高画質かつサイズ大）。

-preset veryslow

H.264コーデックで、動画がうんと長い場合であっても生成動画サイズを強制的に小さくします。

-profile:v main

H.264コマンドで利用する動画コーデックのプロファイルを指定します。指定できるのはmainのみです（さもないとSafariで動画を再生できません）。

-pix_fmt yuv420p

pix_fmtはピクセルフォーマットのことで、動画サイズを縮小する裏技です。基本的に、明るさ（brightness）についてはフル解像度を利用し、色についてはより低い解像度を利用することで、人間の目に気づかれないようサイズを圧縮できます。なお、自分たちの動画でこの引数が効かない場合は、削除しても問題ありません。

-movflags +faststart

動画再生のために重要な情報をファイルの冒頭に移動します。これにより、動画をブラウザでダウンロード中に再生を開始できるようになります。

-vf "scale=trunc(iw/2)*2:trunc(ih/2)*2"

この方法を使うと、生成される動画の画面サイズが常に偶数になります（コーデックの種類によっては動画の画面サイズが301x200のような奇数混じりだと変換できず、300x200または302x200でないと変換できないものがあります）。このオプションは、元動画を最も近い偶数の画面サイズに変換するようFFmpegに指示します。なお、元の動画の画面サイズが最初から偶数の場合は、このオプションは何も行いません。

-tile-columns 2 -tile-rows 2

このオプションは、圧縮の効率がわずかに低下する代わりに圧縮速度が向上します。

video.av1.mp4

出力ファイル名を指定します。

🔗 動画をブラウザでうまく再生する方法

次は、動画フォーマットがブラウザでサポートされているかどうかに応じて適切なファイルを表示するように設定する必要があります。

ありがたいことに、HTMLの<source>要素でtype属性を設定すれば、そのブラウザでサポートされているファイルだけが再生されるようになります。<video>タグのオプションについて詳しくは以下のドキュメントを参照してください。

参考: <video>: 動画埋め込み要素 - HTML: ハイパーテキストマークアップ言語 | MDN

<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>

<source>タグは、ちょうどif...else文のように動作します。ブラウザは、<source>タグのリストを上から下に読み込んで、そのブラウザでサポートされている最初の動画タイプを再生します。

type属性には以下のファイル形式を指定する必要があります。

• コンテナ形式（MP4の場合はvideo/mp4）
• 動画コーデック（AV1の場合はav01.0.05M.08、H.264の場合はavc1.4D401E）
• 音声コーデック（Opusの場合はopus、AACの場合はmp4a.40.2）

  <source src="video.av1.mp4" ...>

  <!-- AV1より下に配置すること（AV1をサポートするデバイスで表示されるようにするため） -->
  <source
    src="video.hevc.mp4"
    type="video/mp4; codecs=hvc1"
  >

  <source src="video.h264.mp4" ...>

🔗 ボーナス: アニメーションGIFをAV1やH.264に変換する方法

現代では、小さな動画をアニメーションGIFで表示するのは得策ではありません。まず、アニメーションGIFのファイルサイズはH.264やAV1と比較して20〜40倍もの容量を消費します。しかも再生に必要なCPUや電力が現代の動画フォーマットよりも多いので、バッテリーの消費も激しくなります。
2019年にWebサイトでショートアニメーションが必要になったら、常に（アニメーションGIFではなく）動画コーデックを選びましょう。ありがたいことに、FFmpegはアニメーションGIFファイルも変換できます。

以下は、アニメーション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 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

これで、animation.h264.mp4とanimation.av1.mp4をHTMLで指定できるようになりました。以下のVIDEO_WIDTH、VIDEO_HEIGHT、PATH_TO_VIDEOを適切に置き換えればOKです。

<video
  autoplay
  loop
  muted
  playsinline
  width="VIDEO_WIDTH"
  height="VIDEO_HEIGHT"
>
  <source
    src="PATH_TO_VIDEO/animation.av1.mp4"
    type="video/mp4; codecs=av01.0.05M.08"
  >
  <source
    src="PATH_TO_VIDEO/animation.h264.mp4"
    type="video/mp4"
  >
</video>

autoplay属性とloop属性を指定することで、従来のアニメーションGIFの振る舞い（=Webサイト読み込み後に自動的にループ再生する）をエミュレートできます。
なお、playsinline属性は、Safariで動画をフルスクリーンモードで開くことを禁止します。

以上でAV1動画の実践ガイドはおしまいです。

低ビットレートでも高品質で配信できるAV1の機能を活用して、最新のデバイスを利用しているWeb視聴者に十分な量のコンテンツを配信できます。

もちろん、古いデバイスを使い続けているユーザーを放置するわけにはいきません。このロジックは、<video>要素の属性や<source>要素のタグを使えば純粋なHTMLだけで簡単に実装できるので、わざわざJavaScriptでユーザーエージェントを検出する実装に長時間を費やす必要はありません。

FFmpegのコマンドをいくつかマスターすれば、Webサイトのユーザーの動画体験を簡単に向上させることが可能になるでしょう。私たちはすでにいくつかのプロジェクトでAV1を利用していますが、大きな問題は発生していません（動画の圧縮時間は別です。繰り返しますが、主に短い静止画アニメーションを扱っているためです）。

最後に、皆さんがAV1で得た経験を共有したい場合や、本記事のガイドが役に立ったかどうかを私たちに伝えたい場合は、お気軽にX.comまでお知らせください。

🔗 Changelog

2025-02-23

• SVT-AV1コーデックを、ずっと高速なlibrav1eに移行。
• HEVCコーデックを推奨から削除（最新のiPhoneやMacでAV1がサポートされたため）。

2023-09-20

• iPhone 15のSafariでのAV1サポートを追加。

2022-08-23

• HEVC用のソース動画コーデックを修正。

2021-06-03

• libaomエンコーダをより高速なlibrav1eに変更。

関連記事

フロントエンド開発者がデザインに向き合うための厳選ベストプラクティス7選（翻訳）

保存版: Web画像フォーマットを「正しく」扱う（1）ピクセルとDPRを完全理解する（翻訳）