Webサイトの画像を最適化する方法：2026年完全ガイド

画像は平均的なWebページの総重量の約40%を占めています。適切に最適化すればページサイズを半分に削減し、Largest Contentful Paint（LCP）を2.5秒以下に抑え、検索ランキングも改善できます。以下にステップバイステップで完全なプロセスを解説します。

ステップ1：正しいフォーマットを選ぶ

フォーマットの選択は、ファイルサイズへの影響が最も大きい要素です。実際の圧縮ベンチマークに基づいた主要なWebフォーマットの比較です。

ほとんどのウェブサイトにとってWebPが最も安全なデフォルトです。写真とグラフィックの両方をうまく処理し、積極的に圧縮でき、ほぼすべてのブラウザで動作します。スタックが対応するなら、<picture>要素でAVIFをプライマリ、WebPをフォールバックとして配信できます。JPGをWebPに変換またはAVIFに変換はVizuaでブラウザ内のみで完結します。

より深い比較についてはWebP vs AVIF比較と非可逆vs可逆圧縮の解説をご覧ください。

ステップ2：表示サイズにリサイズ

カメラから取り出した4000×3000ピクセルの写真をウェブサイトで800×600で表示するのは、約80%のピクセルを無駄にしています。見えていないピクセルでも帯域幅と解析時間を消費します。

原則として、レンダリングサイズに合わせた画像を配信してください。通常のディスプレイではピクセル寸法を正確に合わせます。Retinaなどの高解像度ディスプレイ（2x）では表示幅の2倍の解像度で配信しますが、それ以上は不要です。

実用的な目標サイズ：

• フルワイドヒーロー画像：1600〜1920px幅（Retina用は最大2x）
• ブログのコンテンツ画像：800〜1200px幅
• サムネイル：300〜400px幅
• アバター：64〜128px（2x用は最大256px）

Vizuaの画像リサイズツールで圧縮前に必要な幅に正確にリサイズできます。これだけでファイルサイズが70〜90%削減されることもあります。

ステップ3：適切な品質で圧縮

フォーマット選択とリサイズの後は、圧縮で残りの削減を行います。品質スライダーはほとんどの人が思う以上に重要で、品質とファイルサイズの関係は線形ではありません。JPEGの品質を100から80に下げると膨大なスペースが節約できますが、80から60に下げると目立つアーティファクトが現れる割に削減効果は小さくなります。

推奨品質設定：

• JPEG：75〜85——写真に最適。品質80のJPEGは非圧縮オリジナルより通常60〜80%小さく、見た目の差はほぼありません。
• WebP：75〜80——JPEG 85と同等の視覚品質で、より小さいファイルになります。
• AVIF：60〜75——コーデックの効率性のおかげで、低い数値でも見た目は良好です。
• PNG：最大圧縮レベル（可逆）を使用。さらなる削減が必要な場合はグラフィックが許す範囲で8ビット（256色）に変換します。

VizuaのJPEG圧縮ツールはエッジとグラデーションを保持する最適化アルゴリズムで自動処理します。フォーマット別の詳細な解説は画質を落とさずに圧縮する方法をご覧ください。

ステップ4：効率的に配信する

優れた圧縮はパフォーマンスの半分に過ぎません。ブラウザへの画像の配信方法も同じくらい重要です。

サイズを明示的に指定する：<img>タグには常にwidthとheight属性を含めるか、CSSのaspect-ratioを使ってください。これによりレイアウトシフト（画像が読み込まれるときにコンテンツがずれる現象）を防ぎ、Cumulative Layout Shift（CLS）スコアに直接影響します。

ファーストビュー以下の画像はlazy-loadにする：ページ最初の表示時に見えない画像にはloading="lazy"を追加します。ブラウザはユーザーがスクロールしてその近くに来るまでダウンロードを遅らせ、初期ページロードの帯域幅を節約します。

ヒーロー画像を優先する：最も重要なファーストビュー画像は逆の対応をします。fetchpriority="high"を追加し、loading="lazy"を設定しないようにします。プリロードされたLCP画像はパーセンタイル75でほぼ364msで読み込まれますが、lazy-loadを適用したLCP画像は約720msと2倍近く遅くなります。

レスポンシブ画像を使用する：srcsetとsizes属性を使うと、ブラウザがユーザーの画面サイズと解像度に合わせた最適な画像バリアントを選択できます。スマートフォンには400px、タブレットには800px、デスクトップには1600pxの画像を1つの<img>タグから配信できます。

Core Web Vitalsとの関係

GoogleのCore Web Vitals——特にLargest Contentful Paint（LCP）——は最大の可視要素がどれだけ速く読み込まれるかを直接測定します。ほとんどのページでは、その要素が画像です。

基準：LCP 2.5秒以下が「良好」。4秒超が「不良」。画像ベースのLCP要素を持つページは、テキストベースのLCPページと比べてパフォーマンスが大きく劣ります。最適化されたヒーロー画像と肥大化したヒーロー画像の差が、Core Web Vitalsのスコアで緑と赤の違いになることがよくあります。

自動化と一括処理

最適化は一回限りの作業ではありません。新しい画像を追加するたびに劣化のリスクがあります。

• Vizuaのバッチ変換ツールを使えば、複数の画像を一度に処理できます。
• Google PageSpeed Insightsで主要ページを定期的に確認し、LCPスコアや「次世代フォーマットで画像を配信してください」などの推奨事項を確認します。
• 200 KBを超える単一の画像がないか、ブラウザのDevToolsのネットワークタブでサイズ順に確認します。

ファイルサイズの目安については画像ファイルサイズガイドもあわせてご覧ください。

フォーマット別 最適化チェックリスト

よくある質問