📼
Webに最適なメディアフォーマットを整理する - 2024
Safari 17.4を搭載するmacOS 14.4とiOS 17.4がリリースされました。
Safari 17.4ではついにiOSでVP8、VP9、Vorbisのサポートを開始しました。
そこで2024年現在、Webにおける最適なメディアフォーマットを整理しようと思います。
なおこの記事は、2021年版のアップデート記事となります👇
まとめ
画像: ラスターなら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にあります。
この中から最適なフォーマットを選定していきます。
表の表記について
フォーマットの一覧などは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