はじめに
Webサイトの表示パフォーマンス（LighthouseスコアやCore Web Vitals）を改善する上で、避けて通れないのが 「画像アセットの軽量化」 です。
一般的なWebサイトにおいて、画像ファイルは総ダウンロード容量（ペイロード）の半分以上を占めることが多く、画像の読み込み遅延は「LCP（Largest Contentful Paint）」の低下に直結します。
古くから使われている JPEG や PNG 形式に代わり、現代のWeb制作では WebP や AVIF といった高圧縮な「次世代画像フォーマット」の採用が標準となっています。本記事では、これら2つのフォーマットの違いと、ブラウザの対応状況に応じた最適な配信・マークアップ手法を解説します。
1. WebP と AVIF の特性比較
JPEG / PNG と比較して、次世代フォーマットは画質を保ちながらファイルサイズを劇的に削減できます。
① WebP (ウェブピー)
Googleが開発した画像フォーマットです。
- 特徴: ロスレス圧縮（PNG代替）と非可逆圧縮（JPEG代替）の両方をサポートし、アルファチャンネル（透過）やアニメーションにも対応しています。
- 圧縮率: 同等の画質のJPEGと比較して、約 25〜30% ファイルサイズを削減できます。
- 対応状況: 現在、ほぼすべてのブラウザで完全にサポートされており、実質的な業界標準となっています。
② AVIF (エーブイアイエフ)
ビデオコーデック（AV1）をベースに開発された、さらに新しいオープンでロイヤリティフリーな画像フォーマットです。
- 特徴: WebPを超える圧倒的な圧縮率を誇り、高次元の階調表現（HDR）や広い色域をサポートします。特にグラデーションやディテールの細かい写真画像でブロックノイズが発生しにくいのが特徴です。
- 圧縮率: 同等画質のJPEGと比較して、最大 50%以上 サイズを削減できます。
- 対応状況: Safari、Chrome、Firefoxなど主要ブラウザでのサポートが進み、十分にプロダクション環境で利用可能なフェーズに入っています。
2. HTML <picture> タグによる最適なフォールバック配信
すべてのブラウザが最新の AVIF に対応しているわけではないため、フロントエンドでは「AVIFに対応していればAVIFを、対応していなければWebPを、どちらもダメなら通常のJPEG/PNGを返す」という フォールバック配信 を行うのがベストプラクティスです。
これをHTMLの記述だけで実現するのが <picture> タグ です。
<picture>
<!-- 1. 最優先: 最も軽量な AVIF 形式 (ブラウザが対応していれば採用される) -->
<source srcset="image.avif" type="image/avif">
<!-- 2. 第2候補: 幅広く普及している WebP 形式 -->
<source srcset="image.webp" type="image/webp">
<!-- 3. 最終フォールバック: 従来の JPEG 形式 (古いブラウザ用) -->
<img src="image.jpg" alt="配信最適化された画像" width="800" height="600" loading="lazy">
</picture>
なぜこの書き方が優れているのか？
- JavaScript不要: ブラウザ自身が
type属性を確認し、自身が解釈できる最も適したフォーマットのファイルを自動で選択し、それ以外のファイルはダウンロードしません。 - SEO & CLS対策: 一番下の
<img>タグにwidth/heightおよびloading="lazy"（遅延読み込み）を設定しておくことで、どのソースが選ばれても画像の表示領域が事前に確保され、ページ読み込み時の「CLS（累積レイアウトシフト）」を防ぐことができます。
3. CDNやサーバー側での自動フォーマット変換
HTMLのマークアップを複雑にしたくない場合は、Cloudflare や Vercel などのCDN/ホスティングサービスが提供する「画像最適化（Image Optimization）機能」を利用するのも非常に有効です。
これらのサービスは、ブラウザから送られる HTTP リクエストヘッダーの Accept フィールド（例: image/avif,image/webp,*/*）を判別し、サーバー側で画像を自動的に AVIF や WebP に変換した上でキャッシュ配信してくれます。
- 例（Cloudflare Images）:
/cdn-cgi/image/format=auto,width=800/image.jpgにアクセスすると、ブラウザが対応する最適なフォーマットに自動変換されて返却されます。
まとめ
画像の最適化は、Webサイトの表示速度を最も手軽かつ効果的に高速化するアプローチです。
- 基本は WebP を標準採用し、可能な限り圧縮率のさらに高い AVIF の併用を進める
- HTML側では
<picture>タグのsource順序を意識してフォールバックを組む - インフラ側（CDN等）の自動変換機能を活用してマークアップをシンプルに保つのも有効
適切な画像最適化を施し、ユーザーの通信量制限に優しく、爆速で描画されるモダンなWebサイトを構築しましょう。