Webページの読み込み速度に最も大きく影響する要素の一つが画像です。PageSpeed Insightsを開くと「適切なサイズの画像を使用してください」や「次世代フォーマットで画像を配信してください」という指摘が頻繁に出てきます。この記事では、画像フォーマットの選択基準から圧縮レベルの設定、Core Web Vitalsへの具体的な影響まで、実装可能な最適化手法を解説します。
画像フォーマットの選択基準
JPEG は写真・グラデーションが多い画像に最適で、圧縮レベル75〜85程度で品質とサイズのバランスが取れます。PNGは透明度（アルファチャンネル）が必要な場合、またはスクリーンショットや図版など直線的なグラフィックに向いています。WebPはJPEGとPNGを置き換える次世代フォーマットで、同等品質でJPEG比25〜35%、PNG比最大50%のファイルサイズ削減が見込めます。現在はすべての主要ブラウザでサポートされており、新規プロジェクトでは積極的に採用すべきフォーマットです。AVIFはWebPをさらに超える圧縮効率を持ち、HDR対応も含む最新フォーマットですが、エンコードが遅くブラウザサポートがやや遅れているため、WebPのフォールバックとセットで使うのが現実的です。
サイズ最適化：表示サイズに合わせた画像提供
最も単純で効果的な最適化は「表示サイズと同じピクセル数の画像を提供する」ことです。モバイルで300px幅に表示するカード画像に1200px幅の画像を配信していれば、ファイルサイズが4倍以上無駄になります。`srcset` 属性を使うと、デバイスの画面サイズに応じて異なるサイズの画像をブラウザが自動選択します。Next.js の `<Image>` コンポーネントはこの最適化を自動で行い、WebP変換・サイズ最適化・lazy loadingを一括して処理します。Webp Studio（旧Resize Image）ではブラウザ上でサイズ変更とフォーマット変換を行い、最適化後のファイルをダウンロードできます。
LCPとFIDへの影響：Core Web Vitals対策
LCP（Largest Contentful Paint）はページの主要コンテンツが表示されるまでの時間で、GoogleのCore Web Vitalsの中で最も重要な指標の一つです。多くのページでLCPの対象はヒーロー画像や上部の大きな画像です。LCPを改善するには、①該当画像を `loading="eager"` かつ `fetchpriority="high"` に設定してブラウザに優先読み込みを指示、②画像を圧縮・WebP化してファイルサイズを削減、③CDNを使ってユーザーの近くから配信するという3点が有効です。スクロールしないと見えない画像には `loading="lazy"` を設定することで、初期ロードの帯域を節約できます。ただしファーストビューの画像にlazy loadingを設定するとLCPが悪化するため、設定箇所の判断が重要です。
圧縮レベルとツールの活用
JPEG の圧縮レベルは 1〜100 のスケールで、75〜85 が品質とサイズのスイートスポットです。それ以上の圧縮は視覚的な劣化が目立ちます。WebPは同品質設定でJPEGより小さくなるため、WebPに変換した上で圧縮レベル80を基準にすると効率的です。SVGは不要なメタデータや小数点以下の桁数を削減するSVGO処理を行うことで、手書きSVGなら30〜50%の削減が見込めます。Image Color Extractorでは画像の主要カラーを抽出でき、背景プレースホルダーの色をコンテンツに合わせて設定する「Dominant Color Placeholder」技術の実装に活用できます。
まとめ
画像最適化はWebパフォーマンス改善の中でも最も費用対効果が高い施策の一つです。まず既存サイトのPageSpeed Insightsを確認し、「適切なサイズの画像」「次世代フォーマット」の指摘が出ている場合はWebP変換とサイズ最適化から着手することで、LCPスコアを大幅に改善できます。新規開発では最初からWebP・遅延読み込み・srcsetを標準として組み込むことで、後から修正するコストを避けられます。