ホームページを開いたとき、なかなかページが表示されない。画像がゆっくりと上から下に読み込まれていく。スマホでアクセスしたら5秒以上待たされる。こうした現象の原因は、ほぼ間違いなく画像のファイルサイズが大きすぎることにあります。特に中小企業のサイトでは、デジカメやスマホで撮影した写真をそのままアップロードしているケースが非常に多く、1枚あたり3MB〜10MBの画像がページに複数枚並んでいることも珍しくありません。この記事では、画像サイズがもたらす具体的な弊害と、今すぐできる改善方法を解説します。
表示に5秒かかるサイトは訪問者の半数以上が離脱する
ページの表示速度が遅いと、訪問者はページの読み込みを待たずに離脱します。Googleの調査によると、モバイルページの読み込みに3秒以上かかると訪問者の53%が離脱するとされています（出典 Google PageSpeed Insights）。5秒かかるサイトでは、半数以上の訪問者がページの内容を一切見ることなく別のサイトへ移動してしまいます。
これは「せっかく検索結果に表示されたのに、クリックされてもすぐに帰られてしまう」ということです。広告費をかけてアクセスを集めている場合、表示速度が遅いだけで広告費が無駄になります。仮にリスティング広告のクリック単価が200円で、月間500クリックを獲得しているなら、月額10万円の広告費のうち半分以上が表示速度の遅さで無駄になっている計算です。SEO（検索エンジン最適化）で上位表示を目指している場合も、ユーザーがすぐに離脱するサイトはGoogleからの評価が下がり、検索順位が低下する要因になります。ページの表示速度は、デザインや文章の質以前の「入口」の問題です。どれだけ優れたコンテンツを用意しても、そこにたどり着く前に訪問者が帰ってしまっては意味がありません。
画像ファイルが大きくなる原因はアップロード時の処理不足
Webサイトで使用する画像が大きくなる主な原因は、撮影した写真や素材サイトからダウンロードした画像を、最適化せずにそのままアップロードしていることです。最近のスマートフォンのカメラは高性能化しており、1枚の写真が4MB〜12MBになることも珍しくありません。一眼レフカメラで撮影した写真ともなると、RAWデータでなくJPEGでも1枚20MB以上になることがあります。
Webサイトに掲載する画像は、横幅1200px程度、ファイルサイズ200KB以下が目安です。1枚5MBの画像を掲載しているとすれば、本来必要なサイズの25倍の容量を無駄に転送していることになります。5MBの画像が5枚あるページを表示すると、合計25MBものデータを読み込む必要があります。光回線のWi-Fi環境であれば数秒で読み込めますが、問題はスマートフォンでの閲覧です。モバイル回線（4G）の平均ダウンロード速度は20〜40Mbps程度ですが、通信環境が悪い場合や月末の通信制限がかかっている場合は5Mbps以下になることもあり、25MBの画像を読み込むだけで40秒以上かかる計算になります。現在はホームページのアクセスの7割以上がスマートフォンからという企業も珍しくなく、モバイル環境での表示速度こそが最優先で改善すべきポイントです。
WordPressには画像アップロード時に「サムネイル」「中サイズ」「大サイズ」「フルサイズ」の4種類を自動生成する機能がありますが、元画像が大きすぎると「大サイズ」でも1MB以上になることがあります。また、テーマやプラグインの設定によっては「フルサイズ」の画像がそのまま表示される場合もあります。画像サイズの問題は、アップロードする前の段階で対処しなければ根本的に解決しません。「アップロードすればWordPressが自動的に最適化してくれる」と思い込んでいる方が多いのですが、WordPressの自動生成機能はリサイズ（サイズ変更）を行うだけで、圧縮率の最適化までは行いません。
表示速度の低下はGoogleの検索順位にも影響する
Googleは2021年からCore Web Vitals（コアウェブバイタル）をランキング要因として使用しています。Core Web Vitalsは、ユーザー体験の質を測定する3つの指標で構成されています（出典 web.dev Web Vitals）。
| 指標 | 内容 | 画像との関連 |
|---|---|---|
| LCP（Largest Contentful Paint） | 最大コンテンツの表示時間 | 大きな画像がLCPの主要因になる |
| CLS（Cumulative Layout Shift） | レイアウトのずれの累積 | サイズ未指定の画像が読み込まれるとレイアウトがずれる |
| INP（Interaction to Next Paint） | ユーザー操作への応答速度 | 大量の画像読み込みがメインスレッドを占有する |
特にLCPは画像と直接的な関係があります。LCPは「ページ内で最も大きな要素が表示されるまでの時間」を測定する指標で、多くのページではメインビジュアルの画像やアイキャッチ画像がLCPの対象になります。Googleの基準では、LCPが2.5秒以内であれば「良好」、4秒を超えると「改善が必要」と判定されます。メインビジュアルに5MBの画像を使用していると、この基準を満たすことはまず不可能です。また、CLSについても注意が必要です。画像にwidth属性とheight属性を指定していない場合、画像が読み込まれた瞬間にレイアウトがガタッとずれる現象が発生します。この「レイアウトシフト」は訪問者にとって不快な体験であり、CLSスコアの悪化につながります。検索順位への影響は劇的ではないものの、同じ品質のコンテンツであれば表示速度が速いサイトが優先される傾向があります。特に競合が多いキーワードでは、わずかな差が順位の差につながります。
自社サイトの画像サイズを確認する方法
まずは現状を把握することが重要です。自社サイトの画像がどの程度の容量を占めているかを確認する方法はいくつかあります。
PageSpeed Insightsで全体の診断を行う
Googleが無料で提供しているPageSpeed InsightsにサイトのURLを入力すると、表示速度のスコアと改善提案が表示されます。画像が原因で速度が低下している場合、「適切なサイズの画像を配信」「次世代フォーマットでの画像の配信」などの改善項目が表示されます。スコアは100点満点で評価され、モバイル版で50点以下の場合は画像を含む何らかの要因で重大な速度低下が起きていると判断できます。なお、デスクトップ版とモバイル版でスコアが大きく異なる場合が多いため、必ずモバイル版のスコアを優先して確認してください。弊社が診断した中小企業のサイトでは、画像最適化だけでモバイルスコアが30点台から70点台まで改善したケースがあります。
ブラウザの開発者ツールで個別画像を確認する
Google Chromeの開発者ツール（F12キーで起動）の「ネットワーク」タブで「Img」を選択すると、ページ内のすべての画像のファイルサイズと読み込み時間を確認できます。1枚あたり500KBを超えている画像があれば、最適化の余地があります。この方法は技術的な知識がない方には少しハードルが高いかもしれませんが、画像の問題を特定する最も正確な方法です。どの画像が重いのかをファイル名と容量で具体的に把握することで、優先的に対処すべき画像が明確になります。
画像を軽量化する具体的な方法
画像サイズの問題を解決する方法は、大きく分けて3つあります。いずれも技術的に難しい作業ではなく、適切なツールやプラグインを使えば短時間で対応できます。
アップロード前に画像を圧縮する
最も基本的で効果の高い方法が、画像をアップロードする前に圧縮することです。無料で使えるオンラインツール（TinyPNG、Squooshなど）を使えば、画像の見た目をほとんど変えずにファイルサイズを70〜80%削減できます。たとえば5MBの画像を圧縮すれば、500KB〜1MB程度まで縮小でき、さらに横幅を1200px程度にリサイズすれば200KB以下にすることも可能です。圧縮前と圧縮後の画像を並べても、一般的なユーザーが違いを認識することはほぼありません。Web上での表示においては、人間の目で判別できないレベルのデータは不要です。画像の用途がWebでの表示のみであれば、印刷品質のデータを保持しておく必要はありません。圧縮ツールはこの「不要なデータ」だけを効率的に削除するため、見た目の品質を維持したまま軽量化できます。
WebP形式に変換してさらに軽量化する
WebP（ウェッピー）はGoogleが開発した画像フォーマットで、JPEG（写真向けフォーマット）と比較してファイルサイズを25〜35%削減できます。現在ではChrome、Safari、Firefox、Edgeなど主要なブラウザがすべてWebPに対応しています。WordPressでは「EWWW Image Optimizer」や「ShortPixel」などのプラグインを使えば、既存の画像を一括でWebPに変換できます。新しくアップロードする画像も自動的にWebPに変換される設定が可能です。プラグインによっては、WebPに対応していない古いブラウザ向けにJPEGやPNGを自動的に出し分ける機能も備わっているため、互換性の心配は不要です。変換作業はサーバー上で自動的に行われるため、運用者が画像フォーマットを意識する必要もありません。
遅延読み込み（Lazy Load）を有効にする
遅延読み込み（Lazy Load）は、画面に表示されている範囲の画像だけを先に読み込み、スクロールして画面に近づいた画像をその都度読み込む仕組みです。たとえばページ内に20枚の画像があっても、最初に画面に表示される3〜4枚だけを読み込むため、初回の表示速度が大幅に向上します。残りの画像は訪問者がスクロールするタイミングで順次読み込まれます。WordPress 5.5以降では画像の遅延読み込みが標準機能として搭載されているため、追加のプラグインは不要です。ただし、テーマによっては遅延読み込みが正しく動作しない場合もあるため、実際のページでスクロールしながら画像が正常に表示されるか確認してください。ファーストビュー（ページを開いたときに最初に表示される範囲）の画像にはLazy Loadを適用しないほうが良い場合もあります。LCPの対象となるメインビジュアルに遅延読み込みを適用すると、逆に表示が遅くなるためです。
画像のアップロードルールを社内で決めておくべき理由
画像の最適化は一度行えば終わりではありません。サイトを運用していく中で新しい画像をアップロードするたびに、同じ問題が再発する可能性があります。特に複数の担当者がWordPressを操作している場合、画像の取り扱いに関するルールを明確にしておかないと、最適化されていない大容量の画像がアップロードされ続けます。
社内で決めておくべき画像のアップロードルールは以下のとおりです。
- アップロード前に必ず横幅を1200px以下にリサイズする
- ファイルサイズは1枚あたり200KB以下を目安にする
- TinyPNGやSquooshで圧縮してからアップロードする
- ファイル名は日本語を使わず、半角英数字とハイフンで統一する
これらのルールをA4用紙1枚にまとめて、WordPress操作マニュアルとセットで共有しておくだけで、画像由来の速度低下を予防できます。ルールが守られているかを月に1回確認する「画像チェック日」を設けるのも効果的です。担当者が変わった際にルールが引き継がれないケースも多いため、マニュアルの存在自体を定期的に周知してください。ルールの策定が難しい場合は、画像のアップロード自体を保守会社に任せるという選択肢もあります。保守の範囲内で画像の最適化を代行してもらえば、担当者がツールの使い方を覚える手間も不要です。
既存の画像を一括で最適化する方法
既にサイト上に大量の未最適化画像がアップロードされている場合、1枚ずつ手作業で差し替えるのは現実的ではありません。WordPressでは、画像最適化プラグインを使って既存画像を一括で圧縮・変換できます。
代表的なプラグインとして「EWWW Image Optimizer」があります。このプラグインをインストールすると、メディアライブラリに登録されているすべての画像を一括で圧縮する「一括最適化」機能が使えます。圧縮レベルの設定やWebPへの変換もプラグインの管理画面から行えるため、専門的な知識は不要です。ただし、大量の画像を一括処理するとサーバーに負荷がかかるため、アクセスの少ない時間帯（深夜や早朝）に実行することを推奨します。処理中にエラーが発生した場合に備えて、事前にバックアップを取得しておくことも重要です。また、圧縮後の画像が意図した品質を保っているかどうか、主要なページを目視で確認する工程も忘れないでください。過度な圧縮により画像がぼやけてしまうと、かえって印象が悪くなります。
プラグインの設定に不安がある場合や、一括処理でトラブルが発生した場合は、保守会社に依頼するのが安全です。弊社でも画像最適化の一括処理を保守業務の中で対応しており、数千枚の画像を一括で最適化した実績があります。
最後に
画像のファイルサイズは、ホームページの表示速度に最も大きな影響を与える要因です。5秒以上の表示待ちは、訪問者の離脱、検索順位の低下、コンバージョン率の悪化に直結します。しかし、画像の最適化は対処方法が明確で、正しく実施すれば確実に効果が出る分野です。弊社が対応した事例では、画像最適化だけでページの表示時間が8秒から1.5秒に短縮され、月間の問い合わせ件数が2倍以上に増加したケースもあります。まずはPageSpeed Insightsで自社サイトの現状を確認するところから始めてください。
Web管理では、画像の最適化を含むサイト全体の表示速度改善を保守の一環として対応しています。既存画像の一括圧縮、WebPへの変換設定、画像アップロードルールの策定支援など、サイトの状況に応じた最適な対策を実施します。「サイトが重いけどどこから手を付ければいいかわからない」「画像の最適化を自分でやる時間がない」というご相談も歓迎です。まずはお気軽にお問い合わせください。
