UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

ウェブサイトに無くてはならない要素の1つが画像です。
しかし高品質な画像はファイルサイズが大きくなりがちで、ページの読み込み速度に影響を与えてしまいます。

しかし最近登場した画像フォーマットは、かなり軽量になっています。
今回は、WebP、AVIF、JPEG XLという3つの最新フォーマットについて解説します。

1. WebP

WebPは、Googleが開発した画像フォーマットで、2010年に公開されました。
執筆時点で2024年なので、2010年は全然最近ではありませんが、2020年後半になって主要ブラウザすべてでサポートされるようになり、いまでは使っても問題ない画像フォーマットになっています。

読み方は「ウェッピー」で、JPEGやPNGと比較して同等の画質でファイルサイズを大幅に削減できることが特徴です。

• ロスレス圧縮とロッシー圧縮の両方をサポート
• アニメーション対応
• 透明度（アルファチャンネル）のサポート

ロスレス圧縮（可逆圧縮）とロッシー圧縮（非可逆圧縮）とは、画像を圧縮したあとに、元の状態に戻せる圧縮かどうかが違います。
いままでの多くの画像フォーマットは、どちらか1つの圧縮しかできませんでしたが、WebPではどちらで圧縮するか選択できます。

また、いままでウェブサイトで透過画像を使用する場合はPNGにする必要がありましたが、PNGはJPEGと比べて画像容量が大きくなってしまいます。
しかしこれからはWebPを使えば、透過画像を扱いつつ、ファイルサイズの大幅な削減が可能です。

2. AVIF (AV1 Image File Format)

AVIFは、AOMediaが開発した比較的新しい画像フォーマットで、2019年に登場しました。
「AV1ビデオコーデック」という動画の圧縮技術をもとに作られており、非常に高い圧縮率が特徴です。

• 高い圧縮効率
• HDR（ハイダイナミックレンジ）対応
• アニメーションのサポート

WebPと比較しても20〜30%の削減が可能と言われています。
まだまだ対応していないブラウザもあるため、今後対応されていくことに期待です。

3. JPEG XL

JPEG XLは、JPEG規格の後継として開発された新しいフォーマットで、2020年に標準化されました。
既存のJPEGとの互換性を保ちつつ、高い圧縮効率と高画質を実現しています。

• 従来のJPEGと互換性がある
• 広色域とHDRサポート
• プログレッシブデコーディング（段階的な画像表示）

JPEG XLは、同じ画質でJPEGと比較して約60%のファイルサイズ削減が可能です。また、通常のJPEGがロッシー圧縮（非可逆圧縮）なのに対して、JPEG XLはロスレス圧縮（可逆圧縮）を採用しているため、圧縮の影響でノイズが増加し、画質を劣化してしまう問題を解消できます。

ただし、ブラウザサポートはされておらず、現時点で主要ブラウザにネイティブ対応しているものはありません（Firefoxが実験的サポートを行っています）。

また、Google ChromeはWebPやAVIFを推奨する流れのようで、JPEG XLの実験的サポートを2022年10月に取りやめています。
今後どうなっていくのか注目です。

実装と移行の考慮点

新しい画像フォーマットを導入する際は、ブラウザサポートを考慮する必要があります。

HTMLのpicture要素を使用して複数のフォーマットを指定すれば、ブラウザに最適な画像を選択させることができます。

下記のように記述すると、AVIFに対応しているブラウザであれば1番上のAVIFが表示され、サポートされていない場合はその次のWebPが表示されます。

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="画像の説明">
</picture>

まとめ

現時点ではWebPをメインに使用しつつ、さらに表示速度にこだわる場合は、サポートされているブラウザ向けにAVIFを導入するのが良さそうです。

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！