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

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（フォールバックにJPEGかPNG）、ベクターなら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	-	✅	-	✅

WindowsのH.265サポートはハードウェアデコーダが搭載されている場合のみ。2015年以降に発売した一般的なCPUになら搭載されています。

macOS、iOSのAV1サポートはハードウェアデコーダが搭載されている場合のみ。A17 ProとM3 / M3 Pro / M3 Maxにのみ搭載されているので非対応としました。