Webに最適なメディアフォーマットを整理する - 2021
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なら対応しているという情報もありましたので今後調査予定です。
Discussion