WordPressの表示速度を見直すとき、最初に確認したいのが画像です。スマホ写真、スクリーンショット、アイキャッチをそのままアップロードしていると、1枚の画像だけでページの読み込みが重くなることがあります。
ただし、画像最適化は「とにかく小さくすればよい」という作業ではありません。小さくしすぎると文字が読めない、図解がにじむ、アイキャッチの印象が落ちる、といった問題が出ます。
結論から言うと、WordPressの画像最適化は「必要な画像を選ぶ」「表示サイズに合わせる」「形式を選ぶ」「圧縮する」「WordPress側で正しく挿入する」の順で進めるのが安全です。
この記事では、初心者でも実行しやすい順番で、WordPress画像を軽くする方法と、やりすぎないための注意点を整理します。
先に結論：画像最適化はアップロード前がいちばん効く
WordPressには、アップロードした画像から複数サイズの画像を作り、端末や表示幅に合う画像を使いやすくする仕組みがあります。とはいえ、元画像が大きすぎると、管理も重くなりやすく、不要な容量も増えます。
そのため、最初にやるべきことは、プラグインを増やすことではなく、アップロード前に画像の大きさと容量を整えることです。
元画像をいきなり削除したり、全画像を一括変換したりする前に、必ずバックアップを取ってください。画像差し替えは見た目、SNSシェア画像、過去記事の表示に影響することがあります。
表示速度全体の改善順は、こちらの記事でも整理しています。
表示速度全体の改善順は、「WordPressが重い原因は？初心者がサーバー変更前に試す改善順」で確認できます。
画像が重いと何が起きるのか
画像が重いと、読者がページを開いたときの待ち時間が長くなります。特にファーストビューに大きなアイキャッチや図解がある場合、最初に見える主要コンテンツの表示が遅くなりやすいです。
WordPress公式のパフォーマンス資料でも、画像の数やファイルサイズ、Web向けの最適化は表示速度に関わる要素として扱われています。
| 重くなりやすい画像 | よくある状態 | 起きやすい問題 |
|---|---|---|
| スマホ写真 | 横幅3000px以上、数MBのまま | 読み込みが遅い、容量を圧迫する |
| スクリーンショット | 不要な余白や細かい文字が多い | 縮小すると読みにくい |
| 図解・表画像 | 文字入り画像を小さくしすぎる | スマホで読めない |
| アイキャッチ | 全記事で大きな画像を使っている | 一覧ページや関連記事も重くなる |
| 古い記事の画像 | 過去に大きいままアップロードした | 記事ごとに改善余地が残る |
画像最適化は、読者に見せる品質を保ちながら、不要な重さを減らす作業です。単純な圧縮だけでなく、画像を使う場所、表示サイズ、形式、alt、差し替え範囲まで含めて考えます。
WordPress画像最適化の全体像
作業順は、次の流れで考えると迷いにくくなります。
| 順番 | やること | 目的 |
|---|---|---|
| 1 | 重要ページを決める | 全部ではなく効果が出やすいページから始める |
| 2 | 元画像を残す | 失敗したときに戻せる状態にする |
| 3 | 表示サイズに合わせる | 必要以上に大きい画像を減らす |
| 4 | 形式を選ぶ | 写真、図解、透過画像を適した形式にする |
| 5 | 圧縮する | 画質を保ちながら容量を下げる |
| 6 | WordPressに挿入する | 適切な画像サイズ、alt、リンク設定にする |
| 7 | 再測定する | 改善したか、表示崩れがないか確認する |
最初から全記事を対象にしないのがポイントです。トップページ、収益記事、よく読まれる記事、画像が多い記事から着手すると、作業量を抑えながら改善しやすくなります。
手順1：まず重要ページだけを測定する
画像を直す前に、PageSpeed Insightsなどで現在の状態を見ます。体感だけで判断すると、画像ではなく広告タグ、テーマ、プラグイン、サーバーが原因だった場合に遠回りになります。
測定するページは、まず次の3種類で十分です。
- トップページ
- 収益につなげたい記事
- 画像が多い記事、または表示が遅いと感じる記事
測定結果では、点数だけでなく「画像を適切なサイズにする」「次世代フォーマットで画像を配信する」「オフスクリーン画像の遅延読み込み」など、画像に関係する指摘が出ていないか見ます。
最初の目的は、100点を取ることではなく、どの画像が重さの原因になっているかを見つけることです。
手順2：画像の表示サイズを先に決める
次に、画像をどの幅で表示するかを決めます。記事本文の横幅が700px前後なのに、横幅4000pxの写真を使う必要はほとんどありません。
サイトやテーマによって最適な幅は変わりますが、初心者はまず次の目安で考えると扱いやすいです。
| 用途 | 画像幅の目安 | 注意点 |
|---|---|---|
| アイキャッチ | 横1200px前後 | SNS共有やテーマ表示も考えて粗くしすぎない |
| 本文内の写真 | 横1000〜1200px前後 | 本文幅より少し大きめにしておく |
| 図解・チェックリスト | 横1200〜1600px前後 | スマホで文字が読めるか確認する |
| スクリーンショット | 必要部分だけ切り抜く | 余白を減らし、文字が小さくなりすぎないようにする |
| ロゴ・簡単な図形 | 実表示に合わせる | 拡大表示が必要ならSVGも検討する |
WordPressはレスポンシブ画像の仕組みにより、画像に複数サイズがある場合、ブラウザが端末や表示幅に応じた画像を選びやすくなります。
参考: WordPress公式: Responsive Images
ただし、元画像を大きすぎるまま入れ続けると、メディアライブラリの容量や管理の負担は増えます。アップロード前に、使う場所に合うサイズへ近づけておきましょう。
手順3：画像形式を使い分ける
画像形式は、写真か、図解か、透過が必要かで選びます。形式を間違えると、容量が大きくなったり、文字や線がぼやけたりします。
| 形式 | 向いている画像 | 注意点 |
|---|---|---|
| JPEG | 写真、人物、風景 | 圧縮しすぎるとにじみやノイズが出る |
| PNG | 透過画像、ロゴ、文字入り図解 | 写真では容量が大きくなりやすい |
| WebP | 写真、図解、アイキャッチ | 運用環境や変換方法を確認して使う |
| GIF | 短いアニメーション | 容量が大きくなりやすく、多用しない |
| SVG | ロゴ、単純なアイコン、線画 | WordPress標準では扱いに注意が必要 |
WordPress公式の最適化資料では、画像ごとに適切な形式と圧縮を選び、WebPのような現代的な形式も検討する考え方が示されています。
ただし、すべてをWebPに変えれば必ず解決する、とは考えないでください。テーマ、プラグイン、CDN、古い画像の扱いによって運用が変わります。
初心者は、まず「写真はJPEGまたはWebP」「図解はPNGまたはWebP」「透過が必要ならPNGまたはWebP」と覚えておけば十分です。
手順4：圧縮は画質を見ながら行う
画像圧縮では、容量を下げるほど表示は軽くなりやすい一方で、画質は落ちやすくなります。特に、文字入りの図解やスクリーンショットは、圧縮しすぎると読みにくくなります。
作業前には、元画像と圧縮後画像を並べて確認します。スマホ表示でも、文字、線、ボタン、数値が読めるかを見てください。
| 確認項目 | 見るポイント |
|---|---|
| 文字 | スマホで読めるか、にじんでいないか |
| 人物・商品写真 | 肌や商品の質感が不自然に崩れていないか |
| 図解の線 | 細い線が消えていないか |
| 背景 | グラデーションや余白にノイズが出ていないか |
| 容量 | 見た目を保ったまま、不要に大きくないか |
圧縮ツールや画像最適化プラグインを使う場合も、最初は数枚だけで試します。既存画像を一括で圧縮・変換する場合は、復元できるバックアップがあることを確認してください。
過去記事の画像を一括処理する場合、表示崩れや画質劣化に気づきにくいです。全体適用の前に、代表ページでプレビュー確認してください。
手順5：WordPressでは画像サイズとaltを整える
画像をアップロードしたら、本文に挿入するときのサイズ、alt、リンク設定を確認します。
| 項目 | おすすめ設定 | 理由 |
|---|---|---|
| 画像サイズ | 本文幅に合うサイズを選ぶ | 必要以上に大きい画像表示を避ける |
| alt | 画像の内容を短く具体的に書く | 読者補助と画像内容の理解に役立つ |
| キャプション | 必要な画像だけ入れる | 本文の読みやすさを保つ |
| 画像リンク | 原則なし | 不要な拡大ページや添付ファイルページへの遷移を避ける |
| ファイル名 | 英数字とハイフンで内容が分かる名前 | 管理しやすく、文字化けを避けやすい |
altはキーワードを詰め込む場所ではありません。画像を見られない読者にも意味が伝わるように、画像に何が写っているか、何を示しているかを書きます。
たとえば、単に「画像最適化」ではなく、「WordPress画像をアップロード前にリサイズ、形式選択、圧縮する流れ」のように書くと、内容が伝わりやすくなります。
手順6：古い記事の画像は優先順位をつけて差し替える
既存記事が多いサイトでは、すべての画像を一度に直そうとすると作業が止まります。まずは効果が出やすい記事から差し替えます。
優先順位は、次の順で十分です。
- トップページで表示される画像
- 検索流入がある記事のアイキャッチと本文画像
- 収益導線に関係する記事の画像
- 表示速度が明らかに遅い記事の画像
- 古い記事で、今後も残すと決めた記事の画像
古い記事を残すか、統合するか、非公開にするか迷っている場合は、先に記事整理の判断をしたほうが効率的です。消す予定の記事の画像まで丁寧に直す必要はありません。
古い記事の整理は、「古いブログ記事を整理する方法｜残す・統合・非公開の判断基準」で確認できます。
画像最適化でやりがちな失敗
画像最適化は、やり方を間違えると逆に管理が難しくなります。特に次の失敗に注意してください。
| 失敗 | なぜ問題か | 避け方 |
|---|---|---|
| 画質を落としすぎる | 図解やスクショが読めなくなる | スマホ表示で確認する |
| 元画像を消す | 再編集や復元ができなくなる | 元画像は別フォルダに残す |
| プラグインを増やしすぎる | 別の重さや競合の原因になる | 目的が重なるものを入れない |
| 全画像を一括変換する | 表示崩れに気づきにくい | 代表ページで試してから広げる |
| altにキーワードを詰め込む | 読者補助として不自然になる | 画像内容を短く具体的に書く |
特に、プラグイン選びは慎重に進めます。画像圧縮、WebP変換、キャッシュ、CDNなどは便利ですが、機能が重複するとトラブルの原因になります。
将来的に画像最適化プラグインや高速化サービスを比較する場合は、公式情報、料金、制限、復元方法、既存画像への影響を確認してから判断しましょう。
それでも遅い場合は画像以外も見る
画像を整えても表示が遅い場合、原因は画像だけではない可能性があります。テーマ、プラグイン、広告タグ、キャッシュ、PHP、サーバー環境も確認します。
WordPress全体の改善順は、画像だけでなく、プラグイン整理、キャッシュ、外部スクリプト、サーバー確認まで含めて考える必要があります。
表示速度全体の改善順は、「WordPressが重い原因は？初心者がサーバー変更前に試す改善順」で確認できます。
画像や不要な処理を減らしても、管理画面が重い、サーバーエラーが出る、PHPやデータベースが古い、サポートで解決しにくいといった状態が続くなら、サーバー見直しも検討します。
WordPressのレンタルサーバーを見直すべきタイミング｜移行前に確認したい7つの判断基準もあわせて確認してください。
サーバーを比較する前の判断軸は、こちらの記事で整理しています。
サーバーを比較する前の判断軸は、「WordPressレンタルサーバーの選び方｜初心者が比較前に見るべき7つの基準」で確認できます。
まとめ：画像は「軽さ」と「読みやすさ」の両方で見る
WordPress画像最適化で大切なのは、容量だけを見ることではありません。読者が内容を理解できる画質を残しながら、不要な大きさや重さを減らすことです。
最後に、作業順をもう一度整理します。
- 重要ページを測定する
- 元画像とバックアップを残す
- 表示サイズに合わせてリサイズする
- 写真、図解、透過画像に合う形式を選ぶ
- 画質を確認しながら圧縮する
- WordPressで画像サイズ、alt、リンク設定を整える
- 差し替え後にスマホ表示と速度を再確認する
まずは、トップページとよく読まれる記事のアイキャッチから見直すだけでも十分です。全記事を一気に直そうとせず、残す記事、伸ばしたい記事、収益につなげたい記事から順番に整えていきましょう。