Web制作 おくだ屋

WEB制作 おくだ屋

//この中に次から作るsvgデータを入れていく
ホーム > ホームページ保守・管理 > WordPressの画像を軽くする方法|表示速度とSEOに効く
ホームページ保守・管理

WordPressの画像を軽くする方法|表示速度とSEOに効く

「ホームページの表示が遅い」と感じたら、まず疑うべきは画像の重さです。

実は、Webページのデータ量の約60〜70%を画像が占めています。つまり、画像を軽くするだけで表示速度が劇的に改善するケースがほとんどなんです。

今回は、WordPress初心者でもすぐにできる画像の軽量化テクニックを紹介します。

結論:画像最適化はSEO対策の第一歩

Googleは表示速度を検索順位の評価基準にしています。表示速度とSEOの関係については以前の記事で詳しく解説しましたが、画像の最適化はその中でも最もコスパの良い施策です。

画像の状態 1枚あたりの容量 10枚のページ合計
未圧縮(スマホ写真そのまま) 3〜5MB 30〜50MB
リサイズのみ 500KB〜1MB 5〜10MB
リサイズ+圧縮 50〜150KB 500KB〜1.5MB
WebP形式で最適化 30〜80KB 300KB〜800KB

未圧縮と最適化済みでは、データ量が50倍以上違うこともあります。

ステップ①:アップロード前にリサイズする

スマホで撮った写真は横幅4,000px以上あることも。ホームページで使うなら横幅1200pxあれば十分です。

リサイズの方法はいくつかあります。

  • Mac — プレビューアプリで「ツール」→「サイズを調整」
  • Windows — ペイントで「サイズ変更」
  • オンラインツール — iLoveIMG、Squooshなどが無料で使える

ステップ②:画像形式を選ぶ

形式 特徴 最適な用途
JPEG 写真向き、圧縮率が高い 人物写真、風景、商品画像
PNG 透過対応、ファイルサイズ大きめ ロゴ、アイコン、図解
WebP JPEG/PNGより30%軽い すべての用途(推奨)
SVG 拡大しても劣化しない ロゴ、アイコン

現在のおすすめはWebP形式です。主要ブラウザすべてに対応しており、JPEGより30%ほど軽くなります。

ステップ③:プラグインで自動圧縮する

毎回手動で圧縮するのは大変なので、プラグインに任せましょう。おすすめは「EWWW Image Optimizer」です。

EWWW Image Optimizerの設定ポイント

  • 「メタデータを削除」をON(撮影情報など不要なデータを除去)
  • 「WebP変換」をON(自動でWebP形式に変換)
  • 「遅延読み込み」をON(画面に表示される画像だけ先に読み込む)

過去にアップした画像も「一括最適化」機能でまとめて圧縮できます。数百枚あっても、ボタンひとつで処理してくれます。

ステップ④:遅延読み込み(Lazy Load)を有効にする

遅延読み込みとは、画面に表示されている画像だけを先に読み込み、スクロールして見える範囲に入ったら残りの画像を読み込む仕組みです。

WordPress 5.5以降は、画像の遅延読み込みが標準機能として搭載されています。特に設定しなくても有効になっていますが、テーマによっては無効化されている場合もあるので確認しましょう。

ステップ⑤:不要な画像を削除する

WordPressは画像をアップロードすると、自動的に複数サイズのコピーを作成します。使わないサイズの画像がサーバー容量を圧迫していることも。

「Media Cleaner」というプラグインを使えば、記事で使われていない画像を検出して一括削除できます。

画像最適化のビフォーアフター

指標 最適化前 最適化後
トップページの容量 12MB 1.2MB
表示速度 6.5秒 1.8秒
PageSpeed Insightsスコア 35点 82点

これは実際のケースですが、画像最適化だけでここまで改善することは珍しくありません。

まとめ:まずは既存の画像を一括最適化しよう

  • 画像はWebページのデータ量の大半を占める
  • 横幅1200px以下にリサイズしてからアップロード
  • WebP形式がおすすめ(JPEGより30%軽い)
  • EWWW Image Optimizerで自動圧縮が便利
  • 既存画像も一括最適化で改善効果大

問い合わせが来ない原因のひとつが表示速度の遅さです。画像を軽くするだけで、サイトの印象がガラッと変わりますよ。

「画像が重いかどうか分からない」「まとめて最適化してほしい」という方は、お気軽にご相談ください。