macOS 12 Montereyがリリースされました。また2021年09月にはiOS 15もリリースされています。

2020年にリリースされたiOS 14 / macOS 11ではWebPのサポートを開始し、macOS 12ではOpusのサポートを開始しました。
また最近ではGoogle Chrome、FirefoxがAVIFのサポートを開始するなど、新たなメディアフォーマットも登場しています。

そこで2021年現在、Webにおける最適なメディアフォーマットを整理しようと思います。

TL; DR

画像: WebP もしくは SVG
音声: AAC - .mp4
動画: H.264 - AAC - .mp4 もしくは VP9 - AAC - .mp4

最適とは

なるべく多くのデバイスとOSとブラウザでデフォルトで使える
- macOS: Chrome、Firefox、Safari、Edge (Chromium)を対象
- Windows: Chrome、Firefox、Edge (Chromium)を対象
- iOS: Safariを対象
- Android: Chromeを対象
同じクオリティーでよりデータ量が少ない

メディアの種類

そもそもメディアの種類から整理しようと思います。

Webが扱えるメディアは、画像（ <img /> ）、音声（ <audio /> ）、動画（ <video /> ）です。

動画は、いわゆる .mp4 のような固定ファイルを単にサーバーに置く場合と、YouTube Liveのようにストリーミングする場合があります。
このストリーミングについてもHLSやMPEG-DASHのようなサーバークライアント型とWebRTCのようなP2P型があります。
ストリーミング型についてはデファクトスタンダードが確立しているので今回は扱いません。

詳しくは以下のブログなどを参考にしてください。

画像、音声、動画で具体的にどんなフォーマットが使えるかの一覧はMDNにあります。
この中から最適なフォーマットを選定していきます。

画像

レガシーなフォーマット

画像はフォーマットによって対応機能が異なります。
GIF、JPEG、PNGは以下のように一長一短です。

	透過	可逆圧縮	アニメーション	その他
GIF	✅	✅	✅	256色（8-bit）制限がある
JPEG	-	-	-	圧縮率が高い
PNG	✅	✅	✅ APNG	半透明の透過が可能

モダンなフォーマット

WebP、HEIF、AVIFはレガシーなフォーマットで示したすべての機能に対応しています。

	Chrome	Firefox	Safari	Edge	macOS	Windows	iOS	Android
WebP	✅	✅ 65	✅ 14	✅	✅ macOS 11	✅ Windows 10 1809	✅ iOS 14	✅
HEIF	-	-	-	-	✅	✅ Windows 10 1809	✅	✅ Android 10
AVIF	✅ 85	✅ 93	-	-	-	✅ Windows 10 1809	-	✅ Android 12

追記 2021/11/09
非可逆圧縮と可逆圧縮を別々にして画質・ファイルサイズを比較するようにしました。

非可逆圧縮での、同ファイルサイズでの画質は一般に以下のようになると言われています。
PNGとGIFは同条件で比較できない可逆圧縮なので除外しました。

AVIF（非可逆圧縮） > HEIF（非可逆圧縮） > WebP（非可逆圧縮） > JPEG

可逆圧縮での、同画質のファイルサイズは一般に以下のようになると言われています。
JPEGは同条件で比較できない非可逆圧縮なので除外しました。GIFは同条件で比較できない256色制限があるので除外しました。

AVIF（可逆圧縮） = HEIF（可逆圧縮） = WebP（可逆圧縮） > PNG

結論

WebP をデフォルトで使用するのがベストです。

WebPのデメリットとしては、Photoshopなどプロダクションツールからの直接出力が出来ないことが挙げられそうです。

WebPではベクター画像を扱えないので ベクター画像を扱うケースではSVGを使うのがベスト です。

音声

音声はメディアコンテナとコーデックを別々に選ぶことが出来るので複雑です。

すべてのブラウザに対応しているメディアコンテナとコーデックが以下です。

コーデック

AAC
FLAC
MP3
Opus
PCM
Vorbis

メディアコンテナ

.mp3
.mp4
.webm
.wav

これらの可能な組み合わせが以下になります。

PCMコーデックと .wav メディアコンテナは除外しました。

	Chrome	Firefox	Safari	Edge	macOS	Windows	iOS	Android
AAC - `.mp4`	✅	✅	✅	✅	✅	✅	✅	✅
FLAC - `.mp4`	✅	✅	✅	✅	✅	✅	✅	✅
MP3 - `.mp3`	✅	✅	✅	✅	✅	✅	✅	✅
MP3 - `.mp4`	✅	✅	-	✅	-	✅	-	✅
Opus - `.mp4`	✅	✅	-	✅	-	-	-	✅
Opus - `.webm`	✅	✅	✅ 15 (macOS Only) ^[1]	✅	-	✅	-	✅
Vorbis - `.webm`	✅	✅	✅ 14.1 (macOS Only)	✅	-	✅	-	✅

同ファイルサイズでの音質は一般に以下のようになると言われています。
FLACは同条件で比較できない可逆圧縮なので除外しました。

Opus > AAC > Vorbis > MP3

結論

AAC - .mp4 をデフォルトで使用するのがベストです。

追記 2021/12/15
Safari 15.2になってもiOS Safariで動作しなかったため、macOS Safari 15以上のみ対応と判断しました。

Opus - .webm は、Safari 15以上の普及が今後進めばベストになってくるでしょう。

FLACについては可逆圧縮ですので音質にこだわる場合は候補に上がってくるかもしれません。

動画

動画はメディアコンテナ、動画コーデック、音声コーデックを別々に選ぶことが出来るので、より複雑です。

すべてのブラウザに対応しているメディアコンテナとコーデックが以下です。
次世代コーデックのH.265、AV1も併記します。

動画コーデック

H.264
VP8
VP9
H.265
AV1

音声コーデック

AAC
FLAC
MP3
Opus
Vorbis

メディアコンテナ

.mp4
.webm

これらの可能な組み合わせが以下になります。

	Chrome	Firefox	Safari	Edge	macOS	Windows	iOS	Android
H.264 - AAC - `.mp4`	✅	✅	✅	✅	✅	✅	✅	✅
H.264 - FLAC - `.mp4`	✅	✅	✅	✅	✅	✅	✅	✅
H.264 - MP3 - `.mp4`	✅	✅	-	✅	-	✅	-	✅
H.264 - Opus - `.mp4`	✅	✅	-	✅	-	✅	-	✅
H.264 - Vorbis - `.mp4`	✅	-	-	✅	-	✅	-	✅
VP8 - Opus - `.webm`	✅	✅	✅ 15 (macOS Only)	✅	-	✅ Windows 10 1809	-	✅
VP8 - Vorbis - `.webm`	✅	✅	✅ 14.1 (macOS Only)	✅	-	✅ Windows 10 1809	-	✅
VP9 - AAC - `.mp4`	✅	✅	✅ 14.1 (macOS Only)	✅ 79	-	✅ Windows 10 1809	-	✅
VP9 - FLAC - `.mp4`	✅	✅	✅ 14.1 (macOS Only)	✅ 79	-	✅ Windows 10 1809	-	✅
VP9 - MP3 - `.mp4`	✅	✅	-	✅ 79	-	✅ Windows 10 1809	-	✅
VP9 - Opus - `.mp4`	✅	✅	-	✅ 79	-	✅ Windows 10 1809	-	✅
VP9 - Opus - `.webm`	✅	✅	✅ 15 (macOS Only)	✅ 79	-	✅ Windows 10 1809	-	✅
VP9 - Vorbis - `.mp4`	✅	-	-	✅ 79	-	✅ Windows 10 1809	-	✅
VP9 - Vorbis - `.webm`	✅	✅	✅ 14.1 (macOS Only)	✅ 79	-	✅ Windows 10 1809	-	✅
H.265 - AAC - `.mp4`	-	-	✅	✅ ^[2]	✅	✅ Windows 10 1809	✅	✅
H.265 - FLAC - `.mp4`	-	-	✅	✅ ^[2:1]	✅	✅ Windows 10 1809	✅	✅
H.265 - MP3 - `.mp4`	-	-	-	✅ ^[2:2]	-	✅ Windows 10 1809	-	✅
H.265 - Opus - `.mp4`	-	-	-	✅ ^[2:3]	-	✅ Windows 10 1809	-	✅
H.265 - Vorbis - `.mp4`	-	-	-	✅ ^[2:4]	-	✅ Windows 10 1809	-	✅
AV1 - AAC - `.mp4`	✅	✅	-	✅ 79 ^[2:5]	-	✅ Windows 10 1809	-	✅ Android 10
AV1 - FLAC - `.mp4`	✅	✅	-	✅ 79 ^[2:6]	-	✅ Windows 10 1809	-	✅ Android 10
AV1 - MP3 - `.mp4`	✅	✅	-	✅ 79 ^[2:7]	-	✅ Windows 10 1809	-	✅ Android 10
AV1 - Opus - `.mp4`	✅	✅	-	✅ 79 ^[2:8]	-	✅ Windows 10 1809	-	✅ Android 10
AV1 - Opus - `.webm`	✅	✅	-	✅ 79 ^[2:9]	-	✅ Windows 10 1809	-	✅ Android 10
AV1 - Vorbis - `.mp4`	✅	-	-	✅ 79 ^[2:10]	-	✅ Windows 10 1809	-	✅ Android 10
AV1 - Vorbis - `.webm`	✅	✅	-	✅ 79 ^[2:11]	-	✅ Windows 10 1809	-	✅ Android 10

同ファイルサイズでの画質は一般に以下のようになると言われています。

AV1 > VP9 = H.265 > VP8 > H.264

結論

H.264 - AAC - .mp4 か VP9 - AAC - .mp4 をデフォルトで使用するのがベストです。

VP9 - Opus - .webm は、Safari 15以上の普及が今後進めばベストになってくるでしょう。

AV1 - Opus - .webm は、Safariの対応が今後進めばベストになってくる可能性がありますが、エンコード速度などのデメリットもありそうです。

まとめ

音声と動画は、古くから使われているAACやH.264がまだ最適という結論になりました。

画像は、WebPが完全な上位互換になっていますので、デフォルトで配置する画像をWebPにして、フォールバックとして画像CDNで生成するフォーマットをPNGやJPEGにしていく方針をとれそうです。
そのためにもプロダクションツール側のWebP対応に期待したいですね。

AVIF、Opus、AV1、VP9という次世代フォーマットは着実にブラウザ対応が進んでいることが確認できました。
Appleの対応次第で一気に普及する可能性が高そうです。

今回、検討項目から外したものとして以下のような観点もあります。

エンコード・デコード計算量（速度、電力消費量）
ハードウェアエンコーダー・デコーダー対応
扱える解像度、ビット深度、フレームレート、色域、輝度など
フォーマットの寿命（枯れ具合）

また、今回iOSで非対応とマークした項目も、iPadOSのMedia Source Extensions APIなら対応しているという情報もありましたので今後調査予定です。

脚注

macOS Safari 15以上のみ対応。 ~~リリースノート上はiOS Safari 15以上でも対応のはずだが実機で動作しなかった。~~ Safari 15.2でも動作しなかったので「macOS Only」を追加。 ↩︎
Windows 10 1809以上のみ対応。 ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎

Discussion