📼

Webに最適なメディアフォーマットを整理する - 2021

8 min read

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型があります。
ストリーミング型についてはデファクトスタンダードが確立しているので今回は扱いません。

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

https://ygoto3.com/posts/streaming-technology-basics-for-frontend-engineers/

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

https://developer.mozilla.org/ja/docs/Web/Media/Formats

画像

レガシーなフォーマット

画像はフォーマットによって対応機能が異なります。
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

macOS、Windows、iOS、AndroidはOSネイティブもしくはOSネイティブで付属するアプリケーションでファイルを開けるかどうかを示しています。
2018年以降に対応したフォーマットにはバージョン名を記しています。

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

非可逆圧縮での、同ファイルサイズでの画質は一般に以下のようになると言われています。
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 メディアコンテナは除外しました。

PCMコーデックは、符号なし(unsigned)/符号付き(signed)/浮動小数点(floating point)、ビッグエンディアン(big-endian)/リトルエンディアン(little-endian)、交差(interleaved)/平面(planar)、ビット数(8-bit, 16-bit, 20-bit, 24-bit, 32-bit, 64-bit)など様々なオプションがありブラウザによって対応/非対応が別れるため非常に複雑になるにも関わらず、Webでは一般的に使用されないため含めませんでした。

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

macOS、Windows、iOS、AndroidはOSネイティブもしくはOSネイティブで付属するアプリケーションでファイルを開けるかどうかを示しています。
2018年以降に対応したフォーマットにはバージョン名を記しています。

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

Opus > AAC > Vorbis > MP3

結論

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

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

macOS、Windows、iOS、AndroidはOSネイティブもしくはOSネイティブで付属するアプリケーションでファイルを開けるかどうかを示しています。
2018年以降に対応したフォーマットにはバージョン名を記しています。

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

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

結論

H.264 - AAC - .mp4VP9 - 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なら対応しているという情報もありましたので今後調査予定です。

脚注
  1. macOS Safari 15以上のみ対応。リリースノート上はiOS Safari 15以上でも対応のはずだが実機で動作しなかった。 ↩︎

  2. Windows 10 1809以上のみ対応。 ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎

Discussion

ログインするとコメントできます