📼

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

2024/03/11に公開

Safari 17.4を搭載するmacOS 14.4とiOS 17.4がリリースされました。
Safari 17.4ではついにiOSでVP8、VP9、Vorbisのサポートを開始しました。

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

なおこの記事は、2021年版のアップデート記事となります👇
https://zenn.dev/futa/articles/8cf0f84eadc910400b02

まとめ

画像: ラスターならAVIF(フォールバックにJPEGPNG)、ベクターならSVG
音声: Opus - .mp4(フォールバックにAAC - .mp4
動画: VP9 - Opus - .mp4(フォールバックにH.264 - AAC - .mp4

最適とは

  • 同じクオリティーでよりデータ量が少ない
  • なるべく多くのデバイスとOSとブラウザでデフォルトで使える

対象OS・ブラウザ

対象OS・ブラウザは公式サポートがされているものを基本としました。
また、3年以内のバージョンで新規対応したフォーマットには表にバージョン番号を記載しています。

  • macOS 12 -
    • Chrome(最新3バージョン)
    • Firefox(最新3バージョン)
    • Safari 15 -
  • Windows 10 22H2 - / 11 22H2 -
    • Chrome(最新3バージョン)
    • Firefox(最新3バージョン)
    • Edge(最新3バージョン)
  • iOS 15 -
    • Safari 15 -
  • Android 11 -
    • Chrome(最新3バージョン)

メディアの種類

そもそもメディアの種類から整理しようと思います。
Webが扱えるメディアは、画像( <img /> )、音声( <audio /> )、動画( <video /> )です。

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

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

表の表記について

フォーマットの一覧などは2021年版の記事に書いたので、2024年版はシンプルに記載していきます。

ブラウザ名 OS名
OSに関係なく対象ブラウザすべてで動作するか OSにデフォルトで付属するネイティブアプリで動作するか

画像

Chrome Firefox Safari Edge macOS Windows iOS Android
GIF
JPEG
PNG
APNG
SVG
WebP
HEIF - - ✅ 17 -
AVIF ✅ 16 ✅ 13 ✅ 16

音声

Chrome Firefox Safari Edge macOS Windows iOS Android
AAC - .mp4
FLAC - .mp4
MP3 - .mp4 - - -
Opus - .mp4 ✅ 17 ✅ 14 - ✅ 17
Opus - .webm ✅ 17 - -
Vorbis - .webm ✅ 17.4 - -

動画

Chrome Firefox Safari Edge macOS Windows iOS Android
H.264
H.264 - AAC - .mp4
H.264 - FLAC - .mp4
H.264 - MP3 - .mp4 - - -
H.264 - Opus - .mp4 ✅ 17 ✅ 14 ✅ 17
VP8
VP8 - Opus - .webm ✅ 17.4 - -
VP8 - Vorbis - .webm ✅ 17.4 - -
VP9
VP9 - AAC - .mp4 ✅ 17.4 - -
VP9 - FLAC - .mp4 ✅ 17.4 - -
VP9 - MP3 - .mp4 - - -
VP9 - Opus - .mp4 ✅ 17.4 - -
VP9 - Opus - .webm ✅ 17.4 - -
VP9 - Vorbis - .webm ✅ 17.4 - -
H.265
H.265 - AAC - .mp4 ✅ 107 -
H.265 - FLAC - .mp4 ✅ 107 -
H.265 - MP3 - .mp4 ✅ 107 - - - -
H.265 - Opus - .mp4 ✅ 107 - ✅ 17 ✅ 14 ✅ 17
AV1
AV1 - AAC - .mp4 - ✅ 121 - -
AV1 - FLAC - .mp4 - ✅ 121 - -
AV1 - MP3 - .mp4 - ✅ 121 - -
AV1 - Opus - .mp4 - ✅ 121 - -
AV1 - Opus - .webm - ✅ 121 - -
AV1 - Vorbis - .webm - ✅ 121 - -

Discussion