こんにちは！ Web フロントエンドのテックリードの小原です。
みなさまは Web サイトで画像や動画を配信するとき、どのようなファイルフォーマットを使っていますか？ この記事では最近 (といってもすでに数年前から) 使われている、画像や動画の新しいファイルフォーマットについて紹介します。
この記事は「Web エンジニアなら知っておきたい」というシリーズの最初の投稿です。
ファイルフォーマットとは
ファイルフォーマットとは、ファイルのデータ部分がどのような形式なのか、のことです。 画像なら PNG や JPEG、動画なら MP4 などがあります。
Web ではファイルフォーマットはファイル名の末尾につける「拡張子」や Content-Type ヘッダーの「MIME タイプ」に反映して扱います。
PNG, JPEG
PNG や JPEG は画像を扱うファイルフォーマットです。両者ともほぼすべてのブラウザで使えます。
PNG と JPEG はどちらも画像をファイルとして扱いたいときに使える形式ですが、主に違う点は PNG は画質の劣化がない形式、JPEG は画質の劣化がある形式という部分です。
当然、画質の劣化は少ない方が望ましいのですが、Web ではネットワークを通じて画像をダウンロードする関係からファイルサイズも十分小さくする必要があります。人間にはほぼ感じられない程度の劣化と引き換えにサイズを十分小さくできるケースもあります。
PNG はイラストやロゴなどのベタ塗りが多いもの、JPEG は写真などの複雑なものに向いています。
画像にはベクター画像というものもあり、ベクター画像を扱うために Web では主に SVG を使います。この記事ではラスター画像 (PNG や JPEG が扱う画像) の方のみ取り扱います。
MP4
MP4 は動画を扱うファイルフォーマットです。ほぼすべてのブラウザで使えます。
MP4 はコンテナフォーマットなので中身としてさらに映像と音声のフォーマットがあり、それぞれ独立して存在するためややこしいのですが、私がそこまで詳しくないため H.264 を考えているものと思って読んでほしいです。
WebP, AVIF
画像を扱うファイルフォーマットに WebP というものがあります。すべてのモダンブラウザで使えます。
PNG, JPEG よりもより新しい技術を用いて開発されたファイルフォーマットで、同じ画質でもより小さなサイズにすることができます。 画質が劣化するかどうかはどちらも WebP で扱うことができ、作るときのオプションの違いで選択できます。もちろん劣化する場合の方がサイズを小さくすることができます。
ターゲットとするブラウザ環境が対応していれば、PNG, JPEG をすべて置き換えても良いと思います。
さらに新しいフォーマットとして AVIF が使われ始めつつあります。
WebM, AV1
動画を扱うファイルフォーマットに WebM というものがあります。iOS Safari を除くすべてのモダンブラウザで使えます。
こちらも新しいファイルフォーマットで、動画をほぼ同じ画質でより小さくすることが見込めます。
さらに新しいフォーマットとして AV1 が使われ始めつつあります。書き方がややこしくなって申し訳ないのですが、WebM がコンテナフォーマット、AV1 が動画コーデックとなります。
ちなみに WebP は WebM (VP8) の、AVIF は AV1 の技術の応用だそうです。動画の圧縮技術の開発の結果、画像の圧縮技術も改善されたということですね。
互換性とフォールバック
2023/10 現在では iOS Safari で WebM が使えないように、特定のブラウザ環境ではサポートされていないファイルフォーマットを使用したいときにも解決方法があります。
画像の場合は <picture> 要素および <source> 要素を使いましょう。複数列挙するとブラウザが対応しているひとつを選んで読み込んでくれます。
例:
<picture> <source srcset="example.avif" type="image/avif" /> <source srcset="example.png" type="image/png" /> <img src="example.jpg" /> </picture>
動画の場合は <video> 要素および <source> 要素を使いましょう。画像と同様です。
<video> <source src="example.webm" type="video/webm" /> <source src="example.mp4" type="video/mp4" /> </video>
