ウェブ速度のための画像最適化：品質を失わずにページロード時間を短縮

最終更新日: June 28, 2026

画像は通常、ウェブページの最も重い部分であるため、画像を最適化することがページスピードにとって単一で最大のインパクトを持つ変更点となります。作業は簡単です。適切なサイズ、適切なフォーマット、適切な圧縮を提供し、ユーザーがすぐに目にする必要のない画像の読み込みを遅延させます。本ガイドでは、視覚的な品質低下なしに画像サイズとロード時間を削減する具体的な手順と、それらの改善がCore Web Vitalsにどのように現れるかを解説します。

クイックアンサー：ウェブスピードのために画像を最適化する方法は？

各画像を実際に表示される寸法にResizeし、WebP（またはフォールバックとしてAVIF）に変換し、品質80にcompressした後、srcsetを使用してレスポンシブなバリアントを提供することで、すべてのデバイスが適切なサイズを読み込むようにします。また、ビューポートの下にある画像を遅延ロードし、CDNから配信します。この一連のプロセスにより、視覚的な品質低下なしに画像サイズを70%以上削減でき、これはLargest Contentful Paintメトリクスと全体的なページロード速度を直接的に改善します。

なぜ画像がページの重さを支配するのか？

一般的なウェブページは、バイト数で見るとほとんどが画像で構成されています。テキストはごくわずかであり、CSSやJavaScriptも制限がありますが、最適化されていないヒーロー写真はそれ自体で数メガバイトに達することがあります。画像をフル解像度かつ重いフォーマットで提供することは、デフォルトでページを重くします。

機会は大きいです。なぜなら、デフォルトの「カメラ解像度のJPEGをアップロードする」という行為が非常に無駄だからです。5000ピクセルの写真が800ピクセルで表示される場合、必要なピクセルよりも6倍多くのピクセルを提供しており、WebPを使うべき場面でJPEGを使うとさらに重さが増します。この両方を修正するだけで、ファイルサイズは劇的に縮小します。

ステップ1：表示寸法にリサイズする

画像が表示される以上のピクセルを絶対に使用してはいけません。Resizeを使用して、最大の表示幅に対して、Retinaの鮮明さのために2倍にします。

• ソース解像度ではなく、表示スロットを測定します。
• Retinaスクリーン用には2倍（高密度なスマートフォンでは3倍）にします。
• 圧縮する前にリサイズします — ピクセルが少ないほど、より小さく圧縮されます。
• resize guideで、これをクリーンに行う方法を解説しています。

ステップ2：モダンなフォーマットに変換する

フォーマットの選択はファイルサイズの基準点を設定します。WebPとAVIFは、最新のブラウザでは視覚的な品質低下なしにJPEGよりも写真の圧縮がはるかに優れています。

• AVIF — 最も小さく、サポートが拡大中。WebPまたはJPEGのフォールバックと共に提供します。
• WebP — 実用的なデフォルトであり、広くサポートされており、JPEGよりもはるかに小さいです。
• JPEG — サポートされていないブラウザのための万能なフォールバックです。
• SVG — ロゴやアイコン用；無限にスケーラブルで小さく済みます。

format comparisonとAVIF vs WebP guideがトレードオフについて解説しています。要素を使用して、AVIFを最初に提供し、WebPおよびJPEGのフォールバックを使用します。

ステップ3：ターゲット品質に圧縮する

リサイズと変換の後、さらにバイト数を減らすためにcompressします。品質80が写真にとって最適なポイントであり、表示サイズでは損失は目に見えません。

100%ズームでテストし、目に見えるアーティファクトがないことを確認してください。compression guideが技術的な手法を解説しています。

ステップ4：レスポンシブバリアントを提供し、遅延ロードする

異なる画面には異なるサイズが必要であり、ビューポートの下にある画像はすぐに読み込む必要はありません。これら両方をマークアップで処理します。

• srcsetと幅記述子を使用して、すべてのデバイスが適切なファイルを受け取るようにします。
• ビューポートの下にある画像にはloading="lazy"を追加して遅延させます。
• ヒーロー画像はEager-load（即時ロード）にしておくことで、LCP要素が速く読み込まれます。
• レイアウトシフトを防ぐため、常にwidthとheight属性を設定します。

responsive images guideとlazy loading guideで実装の詳細を解説しています。

画像のスピードはCore Web Vitalsにどのように影響するか？

画像最適化はLargest Contentful Paint (LCP)メトリクスに直接影響します。これは、ヒーロー画像がどれだけ速くロードされるかを測定することがよくあります。重くて読み込みが遅いヒーロー画像は、Googleが「良好」と見なす2.5秒のしきい値を超えさせることがあり、ユーザーエクスペリエンスと検索ランキングの両方を損ないます。Core Web Vitals guideやimage SEO guideがこれらの改善をランキングに結びつけ、web.dev LCP documentationがこのメトリクスを説明しています。Mozilla performance guideはより広範な測定の全体像をカバーしているため、最適化後にPageSpeed Insightsを実行してLCPが改善したか確認してください。

実践例：ヒーロー画像を1枚最適化する

単一の画像を通して手順を追うことで、抽象的なステップが具体的なものになります。カメラから直接来た5000ピクセル幅のJPEGを、ウェブサイトの1200ピクセル幅のヒーロー枠に使うとします。

1. 5000pxから2400pxにリサイズします（Retina用：表示1200 × 2）。ピクセル数が75%以上減少するため、ファイルはすぐに縮小します。
2. JPEGをWebPに変換します。フォーマットの変更だけで、同等の品質で通常さらに25〜35%が削減されます。
3. 品質80に圧縮します。目に見える損失は無視できるほどですが、バイト数はさらに減少します。
4. srcsetを使用して1200wと2400wのバリアントを提供し、スマートフォンにはより小さいファイルを受け取らせます。
5. LCP要素でない場合は遅延ロードするか、ヒーローの場合は即時ロードを維持します。

6 MBのオリジナルは、これらのステップを経て約150 KBになります — これは、表示上で目に見える品質損失なしに97%の削減です。これを数十枚の画像があるページ全体に適用すると、ページサイズが崩壊し、これがまさに画像最適化がほとんどのサイトで最もレバレッジの高いスピード作業である理由です。同じロジックはすべての画像に適用されるため、パイプラインを自動化することが報われます。

サイト全体の最適化の自動化

画像を1枚手動で最適化するのは簡単ですが、成長するサイトのすべての画像をすべて手動で最適化するのは困難です。持続可能なアプローチは、忘れてしまう可能性のある手動ステップとしてではなく、ワークフローに最適化を組み込むことであり、それが自動的に行われるようにすることです。

WebPへの変換と圧縮をデプロイ時のすべての画像に対して実行するビルドステップツールは、未最適化の画像が本番環境に到達しないことを保証します。CMS駆動型のサイトの場合、アップロード時に最適化を行うプラグインがソース段階で画像をキャッチします。レイアウトが予測不能なサイトの場合、オンザフライで変換を行うCDNが手動バリアントなしでサイズを処理します。適切な自動化はスタックに依存しますが、原則は同じです — 最適化をデフォルトにして、人が行うことを忘れないという依存から解放することです。

結果の測定

計測なしの最適化は推測に過ぎません。手順を実行した後、実際のツールを使って改善を確認してください。

1. Google PageSpeed Insightsを実行し、画像のおすすめを確認します。
2. LCPが2.5秒未満であることを確認します。
3. ネットワークタブで実際に提供されたファイルサイズをチェックします。
4. ブロードバンドだけでなく、モバイル接続でテストします。

最適化後にこれらのチェックを通過するページは、真に高速な画像を持っています。この作業は再現性が高く、公開前にすべての画像に対して同じ手順を実行すれば、サイト全体でスピードの向上が維持されます。

よくある質問

最大の画像スピード改善点は何ですか？

表示寸法へのリサイズです。6000pxのカメラ写真が800pxで表示される場合、これが最大の無駄となります。ツールよりも順序が重要なので、まずリサイズし、次に圧縮します。

すべての画像を遅延ロードすべきですか？

ビューポートの下にあるものはすべてそうです。LCPヒーローは積極的にロードされなければならず（そしてプリロードされるべきです）、これを遅延ロードすると最大の要素を遅らせ、Core Web Vitalsを損ないます。残りの画像は競合しないように遅延ロードします。

画像のスピードはどう測定しますか？

PageSpeed Insightsは単一のラボテストではなく、28日間の期間にわたるフィールドデータを提供します。ラボツール（Lighthouse）は可能性を示し、フィールドデータが実際のユーザー体験を示します。CWVはフィールドデータに基づいてスコアリングされます。

ウェブで最も速いフォーマットは何ですか？

安全なデフォルトとしてはWebP（JPEGより25〜35%小さい、普遍的なサポート）、または最新のブラウザでの最小ファイルサイズを求めるならAVIFです。要素を通じて、モダンなフォーマットとJPEGフォールバックを提供します。

レスポンシブ画像をどのように提供しますか？

必要なブレークポイントのサイズの画像それぞれを生成し、sizes属性で表示幅を記述したsrcsetを使用することで、ブラウザにビューポートごとに適切なファイルを選択させます。これにより、小さな画面では必要なバリアントのみがダウンロードされ、バイト数が節約されます。responsive images guideで完全な設定を参照してください。

遅延ロードとは何ですか？

ブラウザの機能の一つで、画像がビューポートに近づくまで読み込みを遅らせることで、ビューポートの下にある画像がヒーローと帯域幅を競合させないようにします。ビューポートの下の画像にはloading="lazy"を追加します。LCPヒーローは積極的にロードされなければならない（遅延してはいけない）ため、これを遅延ロードすると最大の要素を遅らせ、Core Web Vitalsを損ないます。