画像最適化の完全ガイド｜WebP・遅延読み込み・next/imageの活用

はじめに

Webページのデータ量の多くは画像が占めています。HTTP Archiveの調査によれば、Webページの平均転送データの50〜60%が画像です。画像最適化はサイト表示速度改善において最も効果が大きく、かつ多くのサイトで手がつけられていない分野です。

本記事では、画像最適化の全手法——フォーマット選択・圧縮・レスポンシブ対応・遅延読み込み・next/imageの活用——を体系的に解説します。

なぜ画像最適化が重要か

未最適化の画像がWebサイトのパフォーマンスに与える影響を具体的に示します。

典型的な問題のある状況

• 3,000×2,000ピクセルのJPEG写真（ファイルサイズ3MB）を、実際には800×600ピクセルで表示しています

• JPEG形式のまま使用し、WebPに変換していない（30〜50%の削減余地がある）

• ページ内すべての画像を一度に読み込んでいる（スクロールしないと見えない画像も含む）

これらの問題を解消するだけで、多くのサイトでLCPを1〜3秒短縮できます。

画像フォーマットの選択

各フォーマットの特性

JPEG（JPG）

写真・グラデーションを含む画像に適しています。透過は不可。圧縮率が高く（非可逆圧縮）ファイルサイズを小さくできますが、圧縮しすぎると品質が低下する。

PNG

透過（透明な背景）が必要な場合に使用します。テキスト・ロゴ・スクリーンショットに適しています。ファイルサイズはJPEGより大きくなりやすい。

WebP

Googleが開発した次世代フォーマット。JPEGと同等の品質でJPEGより25〜34%小さく、透過もサポートします。現代のブラウザはすべてWebPに対応しており、2025年現在は積極的に採用すべきフォーマットです。

AVIF

WebPよりさらに圧縮率が高い最新フォーマット。ブラウザサポートは広がっているが、エンコードに時間がかかる。

SVG

ロゴ・アイコン・シンプルなイラストに最適。ベクター形式でどんなサイズでも品質が劣化しません。ファイルサイズも非常に小さい。

画像圧縮

非可逆圧縮と可逆圧縮

非可逆圧縮（Lossy）：画像データを一部削除してファイルサイズを大幅に削減します。JPEGの品質設定・WebPの品質設定が該当します。人間の目には品質の低下が気付かない範囲での最大圧縮が目標です。品質80〜85%程度が一般的に推奨されます。

可逆圧縮（Lossless）：画像データを完全に保持しながらファイルを圧縮します。PNGの最適化・WebPの可逆圧縮が該当します。ファイルサイズの削減量は非可逆より少ないが、品質を維持できます。

推奨ツール

Squoosh

Googleが開発するブラウザベースの画像最適化ツール。WebP・AVIFへの変換・品質の比較が視覚的に行える。開発・運用での手動変換に適しています。

Sharp（Node.js）

高速な画像処理ライブラリ。ビルドスクリプト・サーバーサイドでの自動変換に使用されます。Next.jsのnext/imageが内部でSharpを使用しています。

ImageMagick・FFmpeg

コマンドラインでの一括変換に使用できます。

画像サイズ（寸法）の最適化

適切なサイズでの提供

4Kディスプレイ向けに4,000×3,000ピクセルの画像を提供しても、モバイルの画面では800×600ピクセルで表示されます。不必要に大きな画像をダウンロードさせることになります。

推奨サイズの目安

• モバイル用：横幅400〜800px

• デスクトップ用：横幅800〜1,600px

• ヒーロー画像：横幅1,920px（最大）

srcsetによるレスポンシブ画像

<img> タグの srcset と sizes 属性を使うことで、ブラウザが画面サイズに応じて最適な解像度の画像を自動で選択できます。

遅延読み込み（Lazy Loading）

概念と効果

遅延読み込みとは、画面外にある画像をページ読み込み時に取得せず、ユーザーがスクロールして画像が画面に近づいたタイミングで読み込む技術です。

効果：初期ページ読み込み時のデータ量と処理量が削減され、LCPに集中してリソースを使えるようになります。

`loading="lazy"` 属性

<img> タグに loading="lazy" を追加するだけで、モダンなブラウザが自動的に遅延読み込みを行います。

重要な注意点：ファーストビュー（最初の画面）の画像、特にLCPの対象となる画像には loading="lazy" を設定してはいけません。遅延読み込みによりLCPが悪化します。

next/imageによる画像最適化の自動化

Next.jsのnext/imageコンポーネントは、上述した画像最適化のベストプラクティスを自動で実装します。

next/imageが自動で行う最適化

自動的なWebP/AVIF変換

ブラウザの対応状況を確認し、最適なフォーマットで提供します。JPEGやPNGで指定しても、WebPを配信できるブラウザにはWebPで配信します。

レスポンシブ画像の自動生成

srcset を自動生成し、デバイスの画面サイズに最適な解像度の画像をオンデマンドで生成・キャッシュします。

CLSの防止

width と height が必須プロパティのため、画像読み込み前から適切なスペースが確保され、レイアウトシフト（CLS）を防ぐ。

遅延読み込みのデフォルト適用

デフォルトで loading="lazy" が適用されます。priority プロパティでこれを無効化できます。

Vercelによるオンデマンド最適化

Vercelにデプロイすると、画像をリクエストのたびにオンデマンドで最適化・キャッシュする機能が有効になります。

基本的な使い方

CLS対策：画像の寸法指定

画像読み込み前にスペースを確保するために、必ず width と height を指定します。

HTMLでの寸法指定

width と height が指定されると、ブラウザは画像が読み込まれる前から適切なスペースを確保し、読み込み後のレイアウトシフトを防ぐ。

CSSのaspect-ratio

レスポンシブなサイズで寸法が固定できない場合は、aspect-ratio プロパティでアスペクト比を保持します。

画像最適化チェックリスト

フォーマット

• 写真系画像はWebP形式を使用しているか

• ロゴ・アイコンはSVGを使用しているか

サイズ・圧縮

• 表示サイズに合った解像度で提供しているか

• 品質80〜85%程度で圧縮しているか

読み込み戦略

• ファーストビューの画像にpriorityが設定されているか

• スクロール後の画像にlazy loadingが設定されているか

CLS対策

• すべての画像にwidth・heightが指定されているか

Next.js使用時

• next/imageを使用しているか

• LCP画像にpriorityプロパティを設定しているか

まとめ

画像最適化は「WebP形式への変換・適切なサイズ・遅延読み込み・寸法指定」という4つの施策を組み合わせることで、多くのサイトで大幅なパフォーマンス改善が実現できます。

Next.jsのnext/imageはこれらのベストプラクティスを自動化する強力なツールで、Vercelとの組み合わせでオンデマンドの画像最適化が実現できます。

次の記事では、CLSに大きく影響するフォント読み込みの最適化戦略を解説します。