WordPress画像最適化ガイド | ページ速度を改善する画像圧縮テクニック

画像最適化が重要な理由

画像ファイルは、Webページの容量の約50〜70%を占めると言われています。画像を最適化することで、以下のメリットがあります。

ページ読み込み速度の向上：画像サイズが小さくなり、表示が高速化
SEO効果：Googleはページ速度を評価要因としている
モバイルユーザーの体験向上：データ通信量が減少
サーバー容量の節約：ストレージ使用量が削減
帯域幅の節約：転送量が減少しコスト削減

改善例：画像を適切に最適化すると、ページサイズが30〜50%削減され、読み込み時間が大幅に短縮されます。

画像形式の選び方

形式	特徴	適した用途
JPEG	写真に適している。透過不可	写真、風景、人物画像
PNG	透過可能。ロスレス圧縮	ロゴ、アイコン、イラスト
WebP	JPEG/PNGより軽量。新しい形式	すべての用途（モダンブラウザ）
SVG	ベクター形式。拡大しても劣化なし	ロゴ、アイコン、図形
GIF	アニメーション可能。色数制限あり	簡単なアニメーション

WebPのメリット：WebP形式はJPEGより25〜35%軽量で、PNGより26%軽量と言われています。最近のブラウザはほぼ全て対応しています。

画像最適化の基本手順

1. 適切なサイズにリサイズ

アップロードする前に、必要なサイズにリサイズしましょう。

フルHD（1920×1080）以上は不要：ほとんどの場合、横幅1200px程度で十分
サムネイル用：300〜600px程度
アイキャッチ画像：800〜1200px程度

2. 圧縮する

画質を保ちつつファイルサイズを削減します。

JPEG：品質70〜85%が最適
PNG：色数を減らす、メタデータを削除

3. 適切な形式で保存

用途に応じて最適な形式を選びます。

目標ファイルサイズ：1枚あたり100〜200KB以下を目指しましょう。大きい画像でも500KB以下に抑えることを推奨します。

プラグイン名	特徴	おすすめ度
EWWW Image Optimizer	無料で高機能。WebP変換対応	★★★★★
Imagify	圧縮率が高い。月25MB無料	★★★★★
ShortPixel	月100枚無料。WebP対応	★★★★☆
Smush	完全無料。サイズ制限あり	★★★★☆
Optimole	CDN機能付き。月5000訪問まで無料	★★★★☆

EWWW Image Optimizerの使い方

インストールと基本設定

WordPress管理画面で「プラグイン」→「新規追加」
「EWWW Image Optimizer」を検索
「今すぐインストール」→「有効化」
「設定」→「EWWW Image Optimizer」で設定画面を開く

推奨設定

基本タブ

「Remove Metadata」：チェックを入れる（EXIFデータを削除）
「Lazy Load」：チェックを入れる（遅延読み込み）

WebP変換

「WebP Conversion」にチェック
.htaccessでWebP画像を自動配信

既存画像の一括最適化

「メディア」→「Bulk Optimize」
「Scan for unoptimized images」をクリック
「Optimize」ボタンをクリック
最適化が完了するまで待つ

自動最適化：プラグイン有効化後にアップロードする画像は、自動的に最適化されます。

オンラインツールで事前圧縮

アップロード前にオンラインツールで圧縮するのも効果的です。

遅延読み込み（Lazy Load）

遅延読み込みは、画面に表示される直前まで画像の読み込みを遅らせる技術です。

遅延読み込みのメリット

初期読み込み時間の短縮
データ通信量の削減
サーバー負荷の軽減

実装方法

1. プラグインを使う

EWWW Image Optimizer（Lazy Load機能付き）
a3 Lazy Load
WP Rocket（有料）

2. WordPress標準機能（WordPress 5.5以降）

WordPress 5.5以降は、画像に自動的にloading="lazy"属性が付与されます。

関連ページ：詳しくは遅延読み込み（Lazy Load）をご覧ください。

レスポンシブ画像の活用

デバイスの画面サイズに応じて、適切なサイズの画像を配信する技術です。

srcset属性の利用

WordPressは自動的に複数サイズの画像を生成し、srcset属性を付与します。

ブラウザが自動選択

PC：大きい画像
タブレット：中サイズの画像
スマホ：小さい画像

自動対応：WordPressのデフォルト機能で、特別な設定なしでレスポンシブ画像が有効になっています。

まとめ

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

アップロード前に適切なサイズにリサイズ
画像最適化プラグインを導入
既存画像を一括最適化
WebP形式への変換
遅延読み込みを有効化
1枚あたり100〜200KB以下を目標

効果測定：PageSpeed InsightsやGTmetrixで、最適化前後のスコアを比較しましょう。

🖼️ WordPress画像最適化ガイド