【WebP化】EWWW Image Optimizerの設定方法と使い方【SWELL・Cocoon・SANGO対応】
この記事では、画像圧縮プラグイン「EWWW Image Optimizer」の初期設定と使い方を、画像を用いてわかりやすくご紹介します。
「EWWW Image Optimizer」を使えば、画像圧縮に加えて画像のWebP化も簡単です。
とても便利ですが、設定によってはSWELL
、Cocoon、SANGOなどの遅延読み込み機能とバッティングするので注意してください。
suya画像最適化はサイト高速化に重要です。
なるほどくんなるほど！設定してみます。
高速化プラグイン（キャッシュプラグイン等）一覧
この記事でできること
- 「EWWW Image Optimizer」の初期設定が完了できる
- 設定項目の重要度がわかる
- 「EWWW Image Optimizer」の使い方がわかる
この記事を書いた人
この記事を最後まで読めば、WordPress（ワードプレス）で画像圧縮や画像のWebP化ができます。
ぜひ最後まで進めてみてください。
目次
EWWW Image Optimizerでできること
最初に、EWWW Image Optimizerが何をするプラグインなのかを簡単に説明します。
画像の圧縮
1つ目は、画像の圧縮です。
多少画質が劣化しますが、データ容量を削減することができます。
「EWWW Image Optimizer」無料版は、圧縮率がそこまで高くないのがデメリットです。
しかし、PNGやJPEGから後述するWebPに変換するため、実際に圧縮画像が使われることは少ないです。
WEBP対応のブラウザが少なかった昔とは違って、圧縮率を気にする必要はあまりありません。
画像のリサイズ
2つ目は、画像のリサイズです。
画像サイズが大きいほどデータ容量が大きくなるため、小さな画像に縮小（リサイズ）することも効果的です。
ただし、WordPress本体やテーマ側でも画像のリサイズが複数実行されています。
ファイル数が増加してサーバー容量圧迫につながるため、安易にリサイズ設定することはおすすめしません。
WordPress本体の画像リサイズを止めたい場合は、以下のメディア設定をご覧ください。
あわせて読みたい
WordPressのおすすめ初期設定【必須8項目】 この記事では、WordPress（ワードプレス）でおすすめの初期設定のやり方と手順を、画像を用いてわかりやすくご紹介します。 WordPressを始めたら、最初にやるべき必須の…
画像のWebP化
3つ目は、画像のWebP化です。
画像のファイル形式を次世代フォーマットであるWebP（.webp）に変換します。
新しい画像フォーマットを使用することで、画質を落とさずに容量を大幅に削減することができます。
高速化に影響が大きいため、WebP化することをおすすめします。
画像の遅延読み込み（LazyLoad）
4つ目は、画像の遅延読み込み（LazyLoad）です。
ファーストビューに表示されていない画像などを後から読み込みます。
高速化に影響が大きいため、画像を遅延読み込みさせることをおすすめします。
ただし、SWELL、Cocoon、SANGOなどの遅延読み込み（LazyLoad）機能と重複します。
SWELL、Cocoon、SANGOなどのテーマを使用する場合は、必ず画像遅延読み込みをオフ（OFF）にしてください。
1) プラグイン「EWWW Image Optimizer」をインストール
WordPress（ワードプレス）にログインしたら、左メニューの[プラグイン]→[新規追加]をクリックして、[プラグインの検索]をします。
「EWWW Image Optimizer」を検索して、[今すぐインストール]した後に[有効化]します。
以上で、プラグイン「EWWW Image Optimizer」のインストール・有効化は完了です。
2) プラグイン「EWWW Image Optimizer」の設定方法
画像最適化プラグインは、テーマ機能や他のプラグインと機能重複することが多いです。
各設定項目の意味を簡単に解説しているので、ざっくり理解しながら設定することをおすすめします。
時間がない場合は、重要度：低〜中は飛ばしても大丈夫です。
0) ステップ設定（スキップします）
左メニューの[設定]から[EWWW Image Optimizer]を開きます。
初回はステップ設定画面が表示されますが、[I know what I’m doing, leave me alone!]（私は何をするかわかっているので一人でやります！）をクリックしてスキップしてください。
1) モード変更（必須）
設定画面が開くので、[Enable Ludicrous Mode]（詳細モード）をクリックします。
隠れていたメニューが表示されていることがわかります。
有料版（プロ版・プレミアム）を契約しないと、最適化スコアは 100% になりません。
最適化スコアが50%以下であっても全く問題ありません。
2) 基本設定（重要度：高）
[WebP変換]をチェックします。
| 重要度 | 設定項目 | 説明 |
|---|---|---|
| 中 | メタデータを削除 | 写真のEXIF情報（位置情報など）を削除 → プライバシー上ONを推奨 |
| 低 | 画像のリサイズ | 越える場合リサイズ → サーバー負荷が上がるためOFF |
| 低 | 不足している寸法を追加 | 遅延読み込み時にリサイズ → CLS対策だがサーバー負荷UP |
| 中 | 遅延読み込み | 画像のLazyLoad設定 → 機能重複のためOFFを推奨 |
| 高 | WebP 変換 | .jpgや.pngを.webp形式に変換 → 高速化のためONを推奨 |
写真のメタデータ（EXIF情報）には、撮影地点の位置情報などが含まれています。
そのため、プライバシーを考慮して削除することを推奨します。
画像のリサイズは、サーバー負荷が上がる原因となります。
サイトの表示速度が遅くなっては元も子もありませんので、リサイズしないことをおすすめします。
サーバー容量を削減したい場合は、アップロードする画像サイズを小さくしましょう。
画像の遅延読み込み（LazyLoad）は、さまざまなところで機能重複します。
機能が重複すると、画像が表示されないなどの不具合が生じることがあります。
画像遅延読み込み機能のあるプラグイン
そもそもWordPress本体にも遅延読み込み機能が搭載されるようになりました。（WordPress 5.5以降）
よくわからなければ無理に設定する必要はありません。
いろいろWebP変換の設定項目が増えますが、一旦[変更を保存]します。
少し上に戻って、[リライトルールを挿入する]をクリックします。
| 重要度 | 設定項目 | 説明 |
|---|---|---|
| 高 | リライトルールを挿入する | .htaccessでWebP画像の切替表示 → CDNなしなら推奨 |
| 低 | JS WebP リライト | JavaScriptでWebP画像の切替表示 → CDNありなら推奨 |
| 低 | Picture WebP Rewriting | JavaScriptなしでWebP画像の切替表示 → CSS背景画像は対応不可 |
[リライトルールを挿入する]には、.htaccessを使えるApacheやLiteSpeedサーバーである必要があります。
ただ、国内レンタルサーバーで.htaccessが使えないサーバー（Nginxのみ）はほぼありません。
「挿入成功」と表示されたら完了です。
.htaccessへのコード挿入が失敗した場合は、自分でコードを挿入する必要があります。
「レンタルサーバー名 htaccess」などと検索して出てきたマニュアルを参考に、.htaccessファイルの最後に以下のようなコードを挿入してください。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(jpe?g|png|gif)$">
Header append Vary Accept
</FilesMatch>
</IfModule>
AddType image/webp .webpブラウザを更新（F5）して、PNG画像（赤）からWEBP画像（緑）に変わったらOKです。
すぐ変わらない場合は、何度か更新（F5）してみてください。
| 重要度 | 設定項目 | 説明 |
|---|---|---|
| 低 | 強制 WebP | すべてのブラウザでWebP画像を表示 → 未対応ブラウザがあるためOFF |
3) ローカル設定（重要度：低）
ローカル設定は、サーバー内部（ローカル）で実行される処理の設定です。
特に変更の必要はありません。
| 重要度 | 設定項目 | 説明 |
|---|---|---|
| 低 | JPG 最適化レベル | 圧縮レベルを選択 → 無料版はピクセルパーフェクト |
| 低 | PNG 最適化レベル | 圧縮レベルを選択 → 無料版はピクセルパーフェクト |
| 低 | GIF 最適化レベル | 圧縮レベルを選択 → 無料版はピクセルパーフェクト |
| 低 | PDF 最適化レベル | 圧縮レベルを選択 → 無料版は無圧縮 |
| 低 | SVG 圧縮 | 圧縮レベルを選択 → 無料版は無圧縮 |
| 低 | バックアップ元 （バックアップ先） | バックアップ場所を選択 → 無料版は無効 |
[バックアップ元]は誤訳で、正しくは[バックアップ先]です。
有料版の場合、オリジナル画像をクラウドに保存できます。
無料版の場合、サーバー内部（ローカル）に保存できますが、同じサーバー内なのでバックアップの意味がありません。
4) 高度な設定（重要度：低）
高度な設定は、特に変更の必要はありません。
| 重要度 | 設定項目 | 説明 |
|---|---|---|
| 低 | 定期的な最適化 | uploadフォルダ以外も定期圧縮 → 通常ブログ利用であればOFF |
| 低 | メディアフォルダを含める | 定期的な最適化にuploadフォルダを含める → 通常ブログ利用であればOFF |
| 低 | オリジナルを含める | 元画像まで最適化 → バックアップがなくなるためOFF |
| 低 | 最適化するフォルダー | 最適化を行うフォルダ → 通常ブログ利用であれば空白のまま |
| 低 | Exclude Images | 最適化を行わないフォルダ → 通常ブログ利用であれば空白のまま |
| 低 | Sharpen Images | 画像をシャープに → サーバー負荷が上がるためOFF |
| 低 | JPG 品質レベル | JPGの画質を設定 → デフォルト82のままでOK |
| 低 | WebP 品質 | WebPの画質を設定 → デフォルト75のままでOK |
| 低 | AVIF Quality Level | AVIFの画質を設定 → 有料版のみ |
5) リサイズ設定（重要度：低）
リサイズ設定は、特に変更の必要はありません。
| 重要度 | 設定項目 | 説明 |
|---|---|---|
| 低 | リサイズ検知 | ツールバー（管理バー）にリサイズ検知ボタンを表示 → 一括変換するためOFF |
| 低 | 既存の画像をリサイズ | メディアの既存画像のリサイズを許可 → そもそもリサイズ設定しない |
| 低 | 他の画像をリサイズ | 最適化するフォルダーのリサイズを許可 → そもそもリサイズ設定しない |
| 低 | リサイズを無効化 | リサイズを無効化するサイズを指定 → WordPress本体の設定変更を推奨 |
画像サイズの意味は、以下を参考にしてください。
| 画像サイズ | 説明 |
|---|---|
| thumbnail – 150 x 150 | WordPress本体：[設定] → [メディア] → [サムネイルのサイズ] |
| medium – 300 x 300 | WordPress本体：[設定] → [メディア] → [中サイズ] |
| medium_large – 768 x 9999 | WordPress本体：option.phpの[medium_large_size_w] |
| large – 1024 x 1024 | WordPress本体：[設定] → [メディア] → [大サイズ] |
| 1536×1536 | WordPress本体：自動リサイズ |
| 2048×2048 | WordPress本体：自動リサイズ |
この他にもSANGOなどのテーマは、テーマ独自のリサイズ画像を生成します。
WordPress本体の[リサイズを無効化]は、本体側の設定で変更を推奨します。
リサイズ画像が増えすぎないために、メディア設定を変更します。
WordPressのメディア設定は、以下をご覧ください。
あわせて読みたい
WordPressのおすすめ初期設定【必須8項目】 この記事では、WordPress（ワードプレス）でおすすめの初期設定のやり方と手順を、画像を用いてわかりやすくご紹介します。 WordPressを始めたら、最初にやるべき必須の…
6) 変換設定（重要度：中）
変換設定は、特に変更は必要ありません。
| 重要度 | 設定項目 | 説明 |
|---|---|---|
| 中 | 変換リンクを非表示 | JPGとPNGの変換リンクを表示 → 複数ユーザーで使うならON |
| 低 | オリジナルを削除 | 変換後に元画像を削除 → バックアップがなくなるためOFF |
| 低 | JPG を PNG に変換 | 画像形式を自動変換 → サーバー負荷が上がるためOFF |
| 低 | PNG を JPG に変換 | 画像形式を自動変換 → サーバー負荷が上がるためOFF |
| 低 | GIF を PNG に変換 | 画像形式を自動変換 → サーバー負荷が上がるためOFF |
[変換リンクを非表示]は、メディア画面でJPGとPNGの変換リンクを表示する設定です。
一人で運営するサイトならONでもOFFでもいいですが、複数人で運営する場合はONにしておいた方が安全です。
[オリジナルを削除]をONにしてしまうと、変換元の元画像が削除されていまいます。
不具合などでいつでも戻せるように、[オリジナルを削除]をOFFに設定しておきましょう。
以上で、プラグイン「EWWW Image Optimizer」の初期設定は完了です。
3) プラグイン「EWWW Image Optimizer」の使い方
設定完了後にアップロードした画像は、自動的にWebPなどに変換されます。
「EWWW Image Optimizer」をインストールする前にアップロードした画像がある場合は、一括変換をおこないます。
1) 既存画像の一括変換
左メニューの[メディア]から[一括最適化]を開きます。
[最適化されていない画像をスキャンする]をクリックします。
[画像を最適化]をクリックします。
変換が完了したら、変換された画像一覧が表示されます。
以上で、プラグイン「EWWW Image Optimizer」のメディア一括変換は完了です。
4) アップロードする前に画像を圧縮する必要があるか？
5) 画像が表示されない・WebP変換されない場合
この記事のまとめ
プラグイン「EWWW Image Optimizer」の設定方法と使い方を見てきました。
遅延読み込み機能はテーマ機能や他のプラグインと重複しやすいため気をつけてください。
なるほどくん設定に気をつけます。
SSLプラグイン
高速化プラグイン
この記事の参考情報
- EWWW Image Optimizer公式サイト
コメント