【WordPressプラグイン】「EWWW Image Optimizer」を使って画像の最適化を図ってみる

本記事では、WordPressの表示速度向上に役立つ「EWWW Image Optimizer」プラグインによる画像圧縮と、テーマにカスタム画像サイズを追加して不要な大きい画像読み込みを防ぐ方法について、理由と具体的手順を丁寧に解説します。

なぜ画像最適化が必要なのか

ページ表示速度の改善

大きな画像ファイルをそのまま読み込むと、ユーザーの通信回線（特にモバイル）で表示に時間がかかります。読み込みが遅いと、離脱率が上がりSEO（検索エンジン最適化）にも悪影響を及ぼします。

※離脱率（Bounce Rate）：ユーザーが1ページだけ見てサイトを離れる割合です。

帯域（バンド幅）とサーバー負荷の軽減

画像サイズが小さければ、それだけ転送データ量が減るため、サーバーやCDNのコストを抑えられます。高画質を保ちつつ圧縮率を上げられると理想的です。

レスポンシブ対応の強化

ユーザーの画面幅に合わせた最適な画像サイズを提供すると、無駄な大きい画像のダウンロードを防げます。WordPressはsrcset機能で自動的に最適画像を選択しますが、カスタムサイズを用意しておくことで、さらに細かく制御できます。

EWWW Image Optimizer の導入と設定

プラグインのインストール

1. 管理画面の「プラグイン」→「新規追加」で「EWWW Image Optimizer」を検索
2. “今すぐインストール” → “有効化”

基本設定

有効化後、管理画面の「設定」→「EWWW Image Optimizer」メニューに移動します。

［Basic Settings］
・『Remove metadata』：チェック → 画像に含まれる撮影情報などの余分なデータを削除  
・『Enable Jumbo Mode』：好みで → 圧縮率をさらに高める（サーバーCPUに負荷がかかる場合あり）Code language: plaintext (plaintext)

• Metadata（メタデータ）とは、撮影日時やカメラ情報などの付帯情報
• Jumbo Mode：高圧縮モード。時間がかかるがファイルサイズを大きく削減できます。

WebP 変換の有効化

「WebP Conversion」タブを開き、

1. 『Convert existing images to WebP』にチェック
2. 『Also convert to WebP in Media Library』にチェック

WebPはJPEG/PNGよりもさらに圧縮効率に優れた次世代フォーマットです。

一括最適化（Bulk Optimize）

既存メディアを一度に最適化するため、「Tools」→「Image Optimization」→「Run All Optimizations」で一括処理を実行します。時間がかかる場合があるので、深夜帯など負荷の低い時間に行いましょう。

画像サイズ（サムネイル）の追加と活用

なぜカスタム画像サイズが有効か

• テーマやテンプレートごとに必要な画像サイズは異なります。
• デフォルトの「サムネイル（150×150px）」「中サイズ（300×300px）」「大サイズ（1024×1024px）」以外に、独自サイズを追加すると、余分に大きいサイズを読み込まずに済みます。

functions.php に設定を追加

子テーマ（Child Theme）の functions.php に以下コードを追記します。

<?php
// カスタム画像サイズを追加
function mytheme_setup_custom_image_sizes() {
    // 幅800px、高さ450px、トリミングは中央基準
    add_image_size( 'hero-large', 800, 450, array( 'center', 'center' ) );
    // 幅400px、高さ225px、トリミングなし（縦横比を維持）
    add_image_size( 'hero-medium', 400, 225, false );
}
add_action( 'after_setup_theme', 'mytheme_setup_custom_image_sizes' );Code language: HTML, XML (xml)

コードの解説

• add_image_size( $name, $width, $height, $crop )
  • $name：画像サイズの識別名
  • $width, $height：ピクセル単位
  • $crop：切り抜き設定。true（センターで切り抜き）/array( ‘x’,’y’ )/false

サムネイル再生成

新規登録画像には自動生成されますが、過去画像には適用されません。
再生成には「Regenerate Thumbnails」などのプラグインを使い、以下手順で実行します。

1. プラグインをインストール・有効化
2. ツール→「Regenerate Thumbnails」→「Regenerate All Thumbnails」を実行

テンプレートでのサイズ指定

記事一覧やヘッダーなどテーマ内で画像を出力する際、以下のように呼び出します。

if ( has_post_thumbnail() ) {
    // hero-large サイズで出力
    the_post_thumbnail( 'hero-large' );
}Code language: PHP (php)

WordPressは自動的に srcset 属性を付与し、画面幅に合わせて最適な画像を選びます。さらに細かく制御したい場合は、wp_get_attachment_image_srcset() や sizes 属性を併用しましょう。

さらに効果を高めるポイント

Lazy Load（遅延読み込み）

EWWW Image Optimizer では「Lazy Load」タブから有効化でき、ユーザー画面内に到達した画像だけを読み込みます。WordPress 5.5以降は標準で loading="lazy" が付きますが、プラグインでさらに最適化可能です。

• CDN（コンテンツ配信ネットワーク）
  画像をCDNに配信すると、ユーザーからの地理的な距離による遅延を減らせます。EWWWのCDNオプション（有料）や、Cloudflare・AWS CloudFront・KeyCDNなどと併用しましょう。
• SVG（ベクター画像）の活用
  アイコンやロゴなど単色・簡易図形はSVG化できると、ファイルサイズ・解像度の両面でメリットがあります。

まとめ

1. EWWW Image Optimizer でメタデータ削除・圧縮・WebP変換・遅延読み込みを設定し、既存画像を一括最適化
2. カスタム画像サイズ を add_image_size() で定義し、不要な大きいサイズ読み込みを防ぐ
3. 再生成プラグイン で過去画像にも適用
4. テーマテンプレートで the_post_thumbnail() などを活用し、srcset でレスポンシブ配信

これらを組み合わせることで、ページの表示速度・ユーザー体験・SEOが同時に向上します。ぜひ試してみてください！