WordPress画像を軽くする方法｜WebP・圧縮・サイズ最適化

WordPressの表示が重いとき、画像は最初に確認したい項目の1つです。ただし、全部を小さくすればよいわけではありません。画質を落としすぎず、表示する大きさに合った画像を配信することが重要です。

画像最適化の確認順

最初に「表示サイズ」と「元画像サイズ」を分ける

たとえば本文で横幅700px程度に表示する画像に、横3000px以上の元画像を毎回そのまま使うと、必要以上のデータを読み込むことがあります。高解像度ディスプレイもあるため単純に表示幅と同じでよいとは限りませんが、用途に対して極端に大きな画像を避けることが基本です。

WordPressはアップロード画像から複数サイズを生成するため、テーマやブロックが適切なサイズを選べているかも確認します。

web.devでも、写真やスクリーンショットではJPEG、WebP、AVIFなどを用途に応じて選び、実際の画質とファイルサイズを比較する考え方が案内されています。形式名だけで決めず、同じ画像で見比べます。

圧縮率を上げすぎると、文字入り画像やグラデーション、細かい線がにじむことがあります。特にスクリーンショットや図解は、写真と同じ圧縮設定にしない方がよい場合があります。

ブラウザはsrcsetやsizesなどの情報を使って、画面幅に合った画像候補を選べます。WordPressやテーマが自動出力していることも多いため、まずは公開ページの実際の表示を確認します。

web.devでも、レスポンシブ画像を使うことで、画面に対して必要以上に大きな画像を読み込む無駄を減らせると説明されています。

画像の表示領域が事前に分かると、読み込み中に本文が大きくずれるのを防ぎやすくなります。WordPressでは通常、メディア挿入時に幅と高さの情報が出力されますが、カスタムHTMLや外部埋め込みでは抜けることがあります。

画像を軽くする作業とあわせて、読み込み前後でレイアウトが大きく動かないかもスマホで確認します。

画面下の画像では遅延読み込みが役立つことがありますが、最初に見える大きな画像まで遅らせると、かえって表示体験が悪くなる場合があります。ファーストビューの主要画像と、下部の補助画像では扱いを分けます。

画像が多いサイトでは、全部を一度に変換するより、アクセスされやすく容量の大きい画像から順に進める方が安全です。

変換前の容量、変換後の容量、画質、表示確認を1枚ずつ記録しておくと、同じ基準で次の画像へ展開しやすくなります。

サイト全体が遅い場合は、画像だけでなくWordPressの表示速度改善も確認します。画像をアップロードできない場合は画像アップロードエラーの確認手順、容量が増え続ける場合はサーバー容量不足の確認方法へ進みます。

WordPress画像の最適化は、WebPへ変換するだけでは不十分です。元画像の大きさ、形式、圧縮、レスポンシブ配信、表示領域、遅延読み込み、公開後の確認までセットで見ると、画質を保ちながら無駄な転送量を減らしやすくなります。