Page Speed Insights「適切なサイズの画像」とは？改善方法を紹介

12 min 5 views

「なんでこんなにページの表示が遅いんだろう？」そんな経験、ありませんか？実は、多くのWebサイトが抱えている表示速度の問題の大部分は、画像の最適化不足が原因なんです。

PageSpeed Insightsで診断を行うと、最もよく見かける警告の一つが「適切なサイズの画像」です。この警告は、文字通り画像のサイズが適切でないことを意味しており、実はファイルサイズの問題ではなく、画像の縦横のピクセル数が問題となっているケースがほとんどです。

本記事では、LandingHub（https://www.landinghub.net/）が長年培ってきた表示速度改善のノウハウを基に、「適切なサイズの画像」の改善方法を初心者の方でも分かりやすく解説します。画像最適化を行うことで、ページ表示速度を劇的に改善し、ユーザー体験の向上とSEO効果を同時に実現できるでしょう。

目次

「適切なサイズの画像」とは何か？基本概念を理解する

適切なサイズの画像の定義

「適切なサイズの画像」とは、一体何を指すのでしょうか？多くの方が勘違いしやすいポイントですが、これは画像のファイルサイズ（KB、MB）の問題ではありません。問題となるのは、画像の縦横のピクセル数です。

具体的には、実際にページで表示される画像のサイズと、画像ファイル自体のピクセル数に大きな差がある場合に、PageSpeed Insightsで「適切なサイズの画像」の警告が表示されます。

例えば、ページ上では300px × 200pxで表示される画像なのに、実際の画像ファイルが3000px × 2000pxといった大きなサイズである場合、ユーザーは必要以上に大きな画像データを読み込まなければならず、結果的に表示速度が遅くなってしまうのです。

なぜ画像サイズが表示速度に影響するのか

画像は、Webページの中で最も容量を占める要素の一つです。テキストデータがわずか数KB程度であるのに対し、画像は数十KB～数MBという大きな容量を持ちます。

不適切なサイズの画像を使用することで生じる問題は以下の通りです：

  • データ転送量の増加：必要以上に大きな画像データを読み込むため、通信量が増加
  • 読み込み時間の延長：大きなファイルサイズにより、画像の読み込みに時間がかかる
  • メモリ使用量の増加：ブラウザが処理する画像データが大きくなり、デバイスのメモリを消費
  • 帯域幅の圧迫：特にモバイル環境では、限られた帯域幅を無駄に消費

これらの問題は積み重なることで、ページ全体の表示速度に大きな影響を与えます。特に、複数の画像を使用しているランディングページや商品紹介ページでは、その影響はより顕著に現れるでしょう。

PageSpeed Insightsによる判定基準

PageSpeed Insightsでは、以下の基準で「適切なサイズの画像」の警告を出しています：

Google公式のドキュメントによると、ページ上の各画像について、表示サイズと実際のファイルサイズを比較し、表示サイズが実際のサイズより4KiB以上小さい場合に警告が表示されます。この判定には、デバイスのピクセル比も考慮されています。

具体的な数値で説明すると：

  • モバイル環境：横幅360px（※時期により変動する場合があります）
  • デスクトップ環境：横幅1350px

これらの基準を超える画像サイズを使用している場合、PageSpeed Insightsで警告が表示される可能性が高くなります。

実際のケーススタディ：画像サイズによる表示速度の違い

異なる画像サイズでの検証結果

ここでは、実際の画像を使用して、サイズの違いがどのような影響を与えるかを検証してみましょう。

検証パターン1：フルサイズ画像（2048×1333px）

スマートフォンで撮影した写真をそのまま使用した場合：

  • ファイルサイズ：約591KB
  • モバイルでの表示：警告対象
  • 表示品質：高品質だが、必要以上

検証パターン2：中サイズ画像（1024×667px）

リサイズを行った場合：

  • ファイルサイズ：約419KB
  • モバイルでの表示：警告対象
  • 表示品質：十分な品質を保持

検証パターン3：小サイズ画像（300×195px）

モバイル表示に最適化した場合：

  • ファイルサイズ：約211KB
  • モバイルでの表示：警告なし
  • 表示品質：モバイルでは粗さが目立つ

検証結果から見える課題

上記の検証結果から、以下のような課題が見えてきます：

単純なリサイズだけでは解決できない
小さすぎる画像では、高解像度ディスプレイ（Retinaディスプレイなど）で表示した際に画質が粗く見えてしまいます。特に最近のスマートフォンは高解像度ディスプレイを搭載しているため、適度な解像度を保つ必要があります。

デバイスに応じた最適化が必要
モバイルとデスクトップでは画面サイズが大きく異なるため、同じ画像を使用するのは効率的ではありません。デバイスごとに最適化された画像を提供することが重要です。

レスポンシブ対応による解決方法

srcset属性を使用した基本的な対応

現代のWebサイトでは、レスポンシブデザインが標準となっており、画像もデバイスに応じて最適化する必要があります。HTML5のsrcset属性を使用することで、複数の画像サイズを指定し、ブラウザが自動的に最適な画像を選択するようになります。

基本的な記述例：

<img src="image.jpg" 
     srcset="image-small.jpg 300w, 
             image-medium.jpg 1024w, 
             image-large.jpg 2048w"
     alt="サンプル画像">

この記述により、ブラウザは表示環境に応じて最適な画像を選択します。しかし、単純なsrcset属性だけでは、まだPageSpeed Insightsの警告を完全に解決できない場合があります。

picture要素とsource要素を組み合わせた高度な対応

より確実に「適切なサイズの画像」の警告を解決するには、picture要素とsource要素を組み合わせた手法が効果的です。

実装例：

<picture>
  <source media="(max-width: 360px)" 
          srcset="image-mobile.jpg 1x, image-mobile-2x.jpg 2x"
          width="300" height="200">
  <source media="(max-width: 1350px)" 
          srcset="image-tablet.jpg 1x, image-tablet-2x.jpg 2x"
          width="1024" height="683">
  <img src="image-desktop.jpg" 
       alt="レスポンシブ画像" 
       width="2048" height="1365">
</picture>

この手法により、以下の利点が得られます：

  • デバイス別最適化：各デバイスに最適なサイズの画像を配信
  • 高解像度対応：Retinaディスプレイなどの高解像度画面にも対応
  • CLS対策：width、height属性により、レイアウトシフトを防止
  • PageSpeed Insights対応：警告を確実に解決

高解像度ディスプレイ対応の重要性

現代のモバイルデバイスの多くは、高解像度ディスプレイを搭載しています。これらのディスプレイでは、物理的な1pxが実際には2px～3px相当の解像度を持っているため、通常の画像では粗く見えてしまいます。

この問題を解決するには、devicePixelRatio（デバイスピクセル比）を考慮した画像の提供が必要です。

例：

  • 1x画像：通常の解像度（devicePixelRatio = 1）
  • 2x画像：高解像度（devicePixelRatio = 2）
  • 3x画像：超高解像度（devicePixelRatio = 3）

適切な解像度の画像を提供することで、どのデバイスでも美しい表示を実現できます。

WordPressでの画像最適化

WordPress標準機能の活用

WordPressは、画像をアップロードする際に自動的に複数のサイズの画像を生成してくれる優れた機能を持っています。デフォルトで以下のサイズが生成されます：

  • サムネイル：150×150px（正方形）
  • 中サイズ：300×300px（最大値）
  • 大サイズ：1024×1024px（最大値）
  • フルサイズ：元の画像サイズ

これらの自動生成された画像を適切に使用することで、「適切なサイズの画像」の問題を大幅に改善できます。

WordPressの画像設定最適化

WordPressの管理画面から、自動生成される画像サイズをカスタマイズできます：

設定方法：

  1. 管理画面の「設定」→「メディア」を選択
  2. 各サイズの数値を実際の表示サイズに合わせて調整
  3. 「変更を保存」をクリック

推奨設定例：

  • サムネイル：300×300px
  • 中サイズ：600×600px
  • 大サイズ：1200×1200px

これらの設定により、様々なデバイスや表示場面に適した画像サイズが自動的に生成されます。

プラグインを使用した自動最適化

WordPressには、画像最適化を自動化するプラグインが数多く存在します。代表的なものは以下の通りです：

  • EWWW Image Optimizer：アップロード時の自動圧縮
  • Smush：画像の自動圧縮と最適化
  • ShortPixel：高品質な画像圧縮
  • Optimole：CDN連携による自動最適化

これらのプラグインを使用することで、技術的な知識がなくても画像最適化を実現できます。

画像フォーマットの選択と最適化

従来の画像フォーマットの特徴

適切な画像フォーマットを選択することで、ファイルサイズを大幅に削減できます。主要な画像フォーマットの特徴は以下の通りです：

JPEG（Joint Photographic Experts Group）

  • 適用場面：写真や複雑なグラデーションを含む画像
  • 特徴：非可逆圧縮、小さなファイルサイズ
  • メリット：高い圧縮率、幅広いサポート
  • デメリット：透明度非対応、圧縮による画質劣化

PNG（Portable Network Graphics）

  • 適用場面：ロゴ、アイコン、透明度が必要な画像
  • 特徴：可逆圧縮、透明度対応
  • メリット：画質劣化なし、透明度対応
  • デメリット：ファイルサイズが大きい

GIF（Graphics Interchange Format）

  • 適用場面：アニメーション、シンプルな画像
  • 特徴：256色制限、アニメーション対応
  • メリット：アニメーション対応、小さなファイルサイズ
  • デメリット：色数制限、画質制限

次世代画像フォーマット：WebPの活用

WebP（ウェッピー）は、Googleが開発した次世代の画像フォーマットです。従来のJPEGやPNGと比べて、以下のような優れた特徴があります：

WebPの特徴

  • 高い圧縮率：JPEGと比べて25-35%小さいファイルサイズ
  • 高画質：圧縮による画質劣化が少ない
  • 透明度対応：PNG同様の透明度機能
  • アニメーション対応：GIF同様のアニメーション機能

WebPの対応状況

2024年現在、WebPは以下のブラウザでサポートされています：

  • Chrome（全バージョン）
  • Firefox（65以降）
  • Safari（14以降）
  • Edge（18以降）

Internet Explorerでは対応していませんが、現在の使用率を考慮すると、多くのサイトでWebPを採用する価値があります。

フォーマット選択の判断基準

適切な画像フォーマットを選択するためのフローチャートを以下に示します：

  1. アニメーションが必要か？
    • Yes → WebP（対応ブラウザ）またはGIF
    • No → 次の質問へ
  2. 透明度が必要か？
    • Yes → WebP（対応ブラウザ）またはPNG
    • No → 次の質問へ
  3. 写真・複雑な画像か？
    • Yes → WebP（対応ブラウザ）またはJPEG
    • No → WebP（対応ブラウザ）またはPNG

具体的な画像最適化手順

初心者向け：基本的な最適化手順

技術的な知識がない方でも実践できる、基本的な画像最適化手順をご紹介します。

ステップ1：適切な画像サイズの決定

まず、画像が実際に表示されるサイズを確認します：

  1. ブラウザの開発者ツールを開く（F12キー）
  2. 画像を右クリックし、「検証」または「要素を調査」を選択
  3. 表示サイズ（width × height）を確認

ステップ2：画像のリサイズ

Macの場合：

  1. プレビューアプリで画像を開く
  2. 「ツール」→「サイズを調整」を選択
  3. 単位を「ピクセル」に変更
  4. 目標サイズの2倍程度に設定（高解像度ディスプレイ対応）
  5. 保存

Windowsの場合：

  1. ペイントアプリで画像を開く
  2. 「ホーム」→「サイズ変更」を選択
  3. 単位を「ピクセル」に変更
  4. 目標サイズの2倍程度に設定
  5. 保存

ステップ3：画質の調整

画像編集ソフトやオンラインツールを使用して、画質を調整します：

  • JPEG画像：品質を80-90%に設定
  • PNG画像：色数を最適化
  • オンラインツール：TinyPNG、Compressor.ioなどを活用

中級者向け：自動化ツールの活用

ある程度の技術的知識がある方は、以下のツールを使用することで、効率的な画像最適化が可能です：

画像圧縮ツール

  • ImageOptim：Mac用の画像圧縮ツール
  • FileOptimizer：Windows用の多機能圧縮ツール
  • Squoosh：Google製のブラウザベース画像圧縮ツール

バッチ処理ツール

  • ImageMagick：コマンドライン画像処理ツール
  • Adobe Photoshop：アクション機能による自動化
  • GIMP：フリーの画像編集ソフト

上級者向け：プログラムによる自動化

開発者の方は、以下のような手法で画像最適化を自動化できます：

ビルドツールとの連携

  • Webpack：imagemin-webpack-pluginを使用
  • Gulp：gulp-imageminを使用
  • Grunt：grunt-contrib-imageminを使用

CDNサービスの活用

  • Cloudinary：自動画像最適化機能
  • ImageKit：リアルタイム画像処理
  • Fastly：エッジでの画像最適化

LandingHubでの画像最適化事例

LandingHub（https://www.landinghub.net/）では、数多くのランディングページ制作を通じて、画像最適化による表示速度改善を実現してきました。ここでは、具体的な事例をご紹介します。

事例1：ECサイトのランディングページ改善

課題：
商品画像が多数含まれるランディングページで、表示速度が4.2秒と非常に遅い状態でした。PageSpeed Insightsのスコアは32点と低く、特に「適切なサイズの画像」の警告が多数発生していました。

実施した対策：

  1. 商品画像を表示サイズに応じて3種類のサイズで用意
  2. WebP形式での配信を実装（フォールバック付き）
  3. 遅延読み込みの実装
  4. 画像圧縮の最適化

結果：

  • 表示速度：4.2秒 → 1.8秒（57%改善）
  • PageSpeed Insightsスコア：32点 → 78点
  • コンバージョン率：2.3% → 3.1%（35%向上）

事例2：コーポレートサイトのパフォーマンス向上

課題：
高解像度の企業画像を多用したコーポレートサイトで、特にモバイル環境での表示速度が問題となっていました。

実施した対策：

  1. picture要素とsource要素を使用したレスポンシブ画像の実装
  2. デバイスピクセル比に応じた画像の出し分け
  3. Critical Path最適化による画像読み込み順序の調整
  4. Service Workerによる画像キャッシュ戦略の実装

結果：

  • モバイル表示速度：5.1秒 → 2.4秒（53%改善）
  • データ転送量：平均2.3MB → 0.8MB（65%削減）
  • ユーザー満足度：大幅な改善を実現

LandingHubの画像最適化アプローチ

LandingHubでは、以下のような包括的なアプローチで画像最適化を行っています：

1. 分析・診断フェーズ

  • PageSpeed Insightsによる詳細分析
  • WebPageTestによるWaterfall分析
  • 実際のユーザー環境での測定
  • 競合サイトとの比較分析

2. 戦略策定フェーズ

  • ターゲットユーザーのデバイス・環境調査
  • 画像使用箇所の優先度付け
  • 技術的実装方法の検討
  • 運用・保守性の考慮

3. 実装フェーズ

  • 段階的な実装とテスト
  • A/Bテストによる効果測定
  • 継続的な監視と調整
  • チーム内での知識共有

よくある質問と解決方法

Q1: 画像を小さくしすぎて、画質が粗くなってしまいます

A: 高解像度ディスプレイを考慮して、表示サイズの2倍程度の解像度で画像を用意することをお勧めします。さらに、picture要素を使用して、デバイスピクセル比に応じた画像を出し分けることで、この問題を解決できます。

Q2: WebPを使いたいのですが、古いブラウザでは表示されません

A: picture要素とsource要素を使用することで、WebP対応ブラウザではWebPを、非対応ブラウザでは従来のフォーマットを自動的に配信できます。フォールバック機能を必ず実装してください。

Q3: WordPressで自動生成される画像サイズでは不十分です

A: functions.phpに以下のコードを追加することで、カスタム画像サイズを追加できます。

// カスタム画像サイズを追加
add_image_size('mobile-optimized', 600, 400, true);
add_image_size('tablet-optimized', 1200, 800, true);
add_image_size('desktop-optimized', 1920, 1280, true);

// 管理画面でカスタムサイズを選択可能にする
function custom_image_sizes($sizes) {
    return array_merge($sizes, array(
        'mobile-optimized' => 'モバイル最適化',
        'tablet-optimized' => 'タブレット最適化',
        'desktop-optimized' => 'デスクトップ最適化',
    ));
}
add_filter('image_size_names_choose', 'custom_image_sizes');

Q4: 大量の画像を一括で最適化したいのですが、効率的な方法はありますか？

A: 以下のような方法で効率的に一括最適化できます：

  • ImageOptim（Mac）：フォルダをドラッグ&ドロップで一括処理
  • FileOptimizer（Windows）：複数ファイルの同時処理
  • オンラインツール：TinyPNG、Compressor.ioなどのバッチ処理機能
  • コマンドラインツール：ImageMagickやcwebpでのスクリプト処理

Q5: 画像最適化後に、レイアウトが崩れてしまいました

A: この問題は、画像のアスペクト比が変更されたか、適切なwidth・height属性が設定されていないことが原因です。以下を確認してください：

  1. 元画像と最適化後の画像のアスペクト比を確認
  2. img要素にwidth・height属性を設定
  3. CSSでmax-width: 100%; height: auto;を指定
  4. aspect-ratioプロパティの活用（対応ブラウザのみ）

実践的なチェックリスト

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

以下のチェックリストを活用して、画像最適化の実装状況を確認してください：

□ 画像サイズの最適化

  • 表示サイズの2倍程度の解像度で画像を用意している
  • 不必要に大きな画像を使用していない
  • デバイス別に最適化された画像を用意している

□ 画像フォーマットの選択

  • 写真にはJPEG、図版にはPNGを使用している
  • 可能な限りWebPを活用している
  • 古いブラウザ向けのフォールバックを実装している

□ レスポンシブ対応

  • srcset属性を使用している
  • picture要素とsource要素を適切に使用している
  • 高解像度ディスプレイに対応している

□ 遅延読み込み

  • ファーストビュー以外の画像に遅延読み込みを実装している
  • loading=”lazy”属性を使用している
  • JavaScript による高度な遅延読み込みを実装している

□ CLS対策

  • img要素にwidth・height属性を設定している
  • aspect-ratioプロパティを活用している
  • 画像読み込み前のスペース確保を行っている

パフォーマンス測定チェックリスト

□ 測定ツールの活用

  • PageSpeed Insightsでの定期的な測定
  • WebPageTestでの詳細分析
  • 実際のユーザー環境での測定
  • 競合サイトとの比較分析

□ 継続的な監視

  • 定期的なパフォーマンス測定の実施
  • 新しい画像追加時の最適化確認
  • ユーザーフィードバックの収集
  • 技術的な更新への対応

LandingHubが提供する画像最適化サービス

LandingHub（https://www.landinghub.net/）では、包括的な画像最適化サービスを提供しています。技術的な知識がない方でも、プロフェッショナルなサポートを受けることができます。

サービス内容

画像最適化診断

  • 現在のサイトの詳細分析
  • 改善ポイントの特定
  • 最適化による効果の試算
  • 実装方法の提案

技術的実装サポート

  • レスポンシブ画像の実装
  • 次世代フォーマットの導入
  • 遅延読み込みの実装
  • CDN連携による高速化

継続的な最適化

  • 定期的なパフォーマンス監視
  • 新技術への対応
  • 運用サポート
  • 教育・トレーニング

実績と信頼性

LandingHubは、数多くの企業様の画像最適化をサポートしており、以下のような実績があります：

  • 改善実績：平均して表示速度を40-60%改善
  • 対応実績：500社以上の企業様をサポート
  • 技術力：最新技術への迅速な対応
  • サポート体制：専門チームによる手厚いサポート

まとめ：画像最適化で得られる効果

「適切なサイズの画像」の改善は、単なる技術的な最適化にとどまらず、ビジネス成果に直結する重要な施策です。本記事で解説した手法を実践することで、以下のような効果が期待できます：

技術的な効果

  • 表示速度の大幅改善：平均40-60%の速度向上
  • データ転送量の削減：帯域幅の効率的な利用
  • サーバー負荷の軽減：リソース使用量の最適化
  • PageSpeed Insightsスコアの向上：SEO効果の改善

ビジネス効果

  • ユーザー体験の向上：離脱率の減少
  • コンバージョン率の改善：売上・問い合わせ数の増加
  • SEO効果の向上：検索順位の改善
  • モバイルユーザーの満足度向上：スマートフォン環境での快適性

継続的な改善のために

画像最適化は一度行えば終わりではありません。継続的に以下のポイントを意識することが重要です：

  1. 定期的な測定と分析：パフォーマンスの監視
  2. 新技術への対応：最新フォーマットや手法の導入
  3. ユーザーフィードバックの活用：実際の使用感の把握
  4. チーム内の知識共有：継続的な改善体制の構築

画像最適化は、現代のWebサイト運営において必須の技術です。本記事で紹介した手法を参考に、ぜひ実践してみてください。技術的な実装に不安がある場合は、LandingHub（https://www.landinghub.net/）のような専門サービスを活用することをお勧めします。

適切な画像最適化により、ユーザーにとって快適で、ビジネスにとって成果の出るWebサイトを実現しましょう。表示速度の改善は、今や競争優位性を左右する重要な要素となっています。今すぐ始めて、その効果を実感してください。

<PREV
次世代フォーマットでの画像の配信を完全攻略！Webサイトの表示速度を劇的に改善する方法
NEXT>
PageSpeed Insightsの最新ブラウザに従来のJavaScriptを配信しないようにしてくださいとは？対応策も紹介
関連記事

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です