MENU
WordPressサイト解析「WP-Search」
WP-Search
無料でプレスリリース「ブロググ」
WP-Search

【WebP化】EWWW Image Optimizerの設定方法と使い方【SWELL・SANGO対応】

この記事では、画像最適化プラグイン「EWWW Image Optimizer」の初期設定と使い方を、画像を用いてわかりやすくご紹介します。

EWWW Image Optimizer」を使えば、画像圧縮に加えて画像のWebP化も簡単です。

とても便利ですが、設定によってはの遅延読み込み機能とバッティングするので注意してください。

suya

画像最適化はサイト高速化に重要です。

なるほどくん

なるほど!設定してみます。

この記事でできること
  • EWWW Image Optimizer」の初期設定が完了できる
  • 設定項目の重要度がわかる
  • EWWW Image Optimizer」の使い方がわかる
この記事を書いた人

suya @suyasite

この記事を最後まで読めば、WordPress(ワードプレス)で画像圧縮や画像のWebP化ができます。

ぜひ最後まで進めてみてください。

目次

EWWW Image Optimizerでできること

最初に、EWWW Image Optimizerが何をするプラグインなのかを簡単に説明します。

画像の圧縮

画像の圧縮
画像の圧縮

1つ目は、画像の圧縮です。

多少画像が粗くなりますが、データ容量を削減することができます。

画像のリサイズ

画像のリサイズ
画像のリサイズ

2つ目は、画像のリサイズです。

画像サイズが大きいほどデータ容量が大きくなるため、小さな画像に縮小(リサイズ)することも効果的です。

PageSpeed Insightsの「適切なサイズの画像(Properly size images)」を改善できます。

ただし、WordPress本体やテーマ側でも画像のリサイズが複数実行されています。

ファイル数が増加してサーバー容量圧迫につながるため、安易にリサイズ設定することはおすすめしません

WordPress本体の画像リサイズを止めたい場合は、以下のメディア設定をご覧ください。

画像のWebP化

画像のWebP化
画像のWebP化

3つ目は、画像のWebP化です。

画像のファイル形式を次世代フォーマットであるWebP(.webp)に変換します。

PageSpeed Insightsの「次世代フォーマットでの画像の配信(Serve images in next-gen formats)」を改善できます。

新しい画像フォーマットを使用することで、画質を落とさずに容量を大幅に削減することができます。

高速化に影響が大きいため、WebP化することをおすすめします。

画像の遅延読み込み(LazyLoad)

画像の遅延読み込み
画像の遅延読み込み

4つ目は、画像の遅延読み込み(LazyLoad)です。

ファーストビューに表示されていない画像などを後から読み込みます。

PageSpeed Insightsの「オフスクリーン画像の遅延読み込み(Defer offscreen images)」を改善できます。

高速化に影響が大きいため、画像を遅延読み込みさせることをおすすめします。

ただし、の遅延読み込み(LazyLoad)機能と重複します。

SWELLやSANGOを使用する場合は、必ず画像遅延読み込みをオフ(OFF)にしてください。

1) プラグイン「EWWW Image Optimizer」をインストール

WordPress(ワードプレス)にログインしたら、左メニューの[プラグイン][新規追加]をクリックして、[プラグインの検索]をします。

WordPress(ワードプレス)のプラグインを検索して新規追加
[プラグイン]→[新規追加]から、[プラグインの検索]

EWWW Image Optimizer」を検索して、[今すぐインストール]した後に[有効化]します。

WordPressプラグイン「EWWW Image Optimizer」のインストール
「EWWW Image Optimizer」をインストール・有効化

以上で、プラグイン「EWWW Image Optimizer」のインストール・有効化は完了です。

2) プラグイン「EWWW Image Optimizer」の設定方法

画像最適化プラグインは、テーマ機能や他のプラグインと機能重複することが多いです。

各設定項目の意味を簡単に解説しているので、ざっくり理解しながら設定することをおすすめします。

時間がない場合は、重要度:は飛ばしても大丈夫です。

0) ステップ設定(スキップします)

左メニューの[設定]から[EWWW Image Optimizer]を開きます。

初回はステップ設定画面が表示されますが、[I know what I’m doing, leave me alone!](私は何をするかわかっているので一人でやります!)をクリックしてスキップしてください。

WordPressプラグイン「EWWW Image Optimizer」のステップ設定画面(スキップ)
EWWW Image Optimizerのステップ設定画面(スキップ)

[サイトを高速化]などを選択してステップを進めてしまうと、自動的に[遅延読み込み]がオン(ON)になります。

このせいで遅延読み込み(LazyLoad)機能がバッティングする人がとても多いです。

WordPressプラグイン「EWWW Image Optimizer」のステップ設定画面(設定)
EWWW Image Optimizerのステップ設定画面(設定)

特に、テーマにを使用している人は注意してください。

また、ここの設定だけではWebP化も完了しません

どうせ細かく設定する必要があるのですから、ここはスキップして進めます。

1) モード変更(必須)

設定画面が開くので、[Enable Ludicrous Mode](詳細モード)をクリックします。

WordPressプラグイン「EWWW Image Optimizer」の設定モード変更(開始)
EWWW Image Optimizerの設定モード変更(開始)

隠れていたメニューが表示されていることがわかります。

WordPressプラグイン「EWWW Image Optimizer」の設定モード変更(完了)
EWWW Image Optimizerの設定モード変更(完了)

有料版(プロ版・プレミアム)を契約しないと、最適化スコアは 100% になりません

最適化スコアが50%以下であっても全く問題ありません。

2) 基本設定(重要度:

[WebP変換]をチェックします。

WordPressプラグイン「EWWW Image Optimizer」の基本設定(WebP変換ON)
EWWW Image Optimizerの基本設定
重要度設定項目説明
メタデータを削除写真のEXIF情報(位置情報など)を削除
→ プライバシー上ONを推奨
画像のリサイズ越える場合リサイズ
→ サーバー負荷が上がるためOFF
不足している寸法を追加遅延読み込み時にリサイズ
→ CLS対策だがサーバー負荷UP
遅延読み込み画像のLazyLoad設定
→ 機能重複のためOFFを推奨
WebP 変換.jpgや.pngを.webp形式に変換
→ 高速化のためONを推奨

写真のメタデータ(EXIF情報)には、撮影地点の位置情報などが含まれています。

そのため、プライバシーを考慮して削除することを推奨します。

画像のリサイズは、サーバー負荷が上がる原因となります。

サイトの表示速度が遅くなっては元も子もありませんので、リサイズしないことをおすすめします。

サーバー容量を削減したい場合は、アップロードする画像サイズを小さくしましょう。

画像の遅延読み込み(LazyLoad)は、さまざまなところで機能重複します。

機能が重複すると、画像が表示されないなどの不具合が生じることがあります。

遅延読み込み機能のあるテーマ

そもそもWordPress本体にも遅延読み込み機能が搭載されるようになりました。(WordPress 5.5以降)

よくわからなければ無理に設定する必要はありません。

いろいろWebP変換の設定項目が増えますが、一旦[変更を保存]します。

WordPressプラグイン「EWWW Image Optimizer」の基本設定(一旦保存)
EWWW Image Optimizerの基本設定(一旦保存)

少し上に戻って、[リライトルールを挿入する]をクリックします。

WordPressプラグイン「EWWW Image Optimizer」の基本設定(WordPressプラグイン「EWWW Image Optimizer」の基本設定(.htaccess挿入)
EWWW Image Optimizerの基本設定(.htaccess挿入)
重要度設定項目説明
リライトルールを挿入する.htaccessでWebP画像の切替表示
→ CDNなしなら推奨
JS WebP リライトJavaScriptでWebP画像の切替表示
→ CDNありなら推奨
Picture WebP RewritingJavaScriptなしでWebP画像の切替表示
→ CSS背景画像は対応不可

[リライトルールを挿入する]には、.htaccessを使えるApacheやLiteSpeedサーバーである必要があります。

ただ、国内レンタルサーバーで.htaccessが使えないサーバー(Nginxのみ)はほぼありません。

「挿入成功」と表示されたら完了です。

WordPressプラグイン「EWWW Image Optimizer」の基本設定(.htaccess挿入成功)
EWWW Image Optimizerの基本設定(.htaccess挿入成功)

.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)してみてください。

WordPressプラグイン「EWWW Image Optimizer」の基本設定(WebP画像確認)
EWWW Image Optimizerの基本設定(WebP画像確認)
重要度設定項目説明
強制 WebPすべてのブラウザでWebP画像を表示
→ 未対応ブラウザがあるためOFF

3) ローカル設定(重要度:

ローカル設定は、サーバー内部(ローカル)で実行される処理の設定です。

特に変更の必要はありません。

WordPressプラグイン「EWWW Image Optimizer」のローカル設定
EWWW Image Optimizerのローカル設定
重要度設定項目説明
JPG 最適化レベル圧縮レベルを選択
→ 無料版はピクセルパーフェクト
PNG 最適化レベル圧縮レベルを選択
→ 無料版はピクセルパーフェクト
GIF 最適化レベル圧縮レベルを選択
→ 無料版はピクセルパーフェクト
PDF 最適化レベル圧縮レベルを選択
→ 無料版は無圧縮
SVG 圧縮圧縮レベルを選択
→ 無料版は無圧縮
バックアップ元
(バックアップ先)
バックアップ場所を選択
→ 無料版は無効

[バックアップ元]は誤訳で、正しくは[バックアップ先]です。

有料版の場合、オリジナル画像をクラウドに保存できます。

無料版の場合、サーバー内部(ローカル)に保存できますが、同じサーバー内なのでバックアップの意味がありません。

4) 高度な設定(重要度:

高度な設定は、特に変更の必要はありません。

WordPressプラグイン「EWWW Image Optimizer」の高度な設定
EWWW Image Optimizerの高度な設定
重要度設定項目説明
定期的な最適化uploadフォルダ以外も定期圧縮
→ 通常ブログ利用であればOFF
メディアフォルダを含める定期的な最適化にuploadフォルダを含める
→ 通常ブログ利用であればOFF
オリジナルを含める元画像まで最適化
→ バックアップがなくなるためOFF
最適化するフォルダー最適化を行うフォルダ
→ 通常ブログ利用であれば空白のまま
Exclude Images最適化を行わないフォルダ
→ 通常ブログ利用であれば空白のまま
Sharpen Images画像をシャープに
→ サーバー負荷が上がるためOFF
JPG 品質レベルJPGの画質を設定
→ デフォルト82のままでOK
WebP 品質WebPの画質を設定
→ デフォルト75のままでOK
AVIF Quality LevelAVIFの画質を設定
→ 有料版のみ

5) リサイズ設定(重要度:

リサイズ設定は、特に変更の必要はありません。

WordPressプラグイン「EWWW Image Optimizer」のリサイズ設定
EWWW Image Optimizerのリサイズ設定
重要度設定項目説明
リサイズ検知ツールバー(管理バー)にリサイズ検知ボタンを表示
→ 一括変換するためOFF
既存の画像をリサイズメディアの既存画像のリサイズを許可
→ そもそもリサイズ設定しない
他の画像をリサイズ最適化するフォルダーのリサイズを許可
→ そもそもリサイズ設定しない
リサイズを無効化リサイズを無効化するサイズを指定
→ WordPress本体の設定変更を推奨

画像サイズの意味は、以下を参考にしてください。

画像サイズ説明
thumbnail – 150 x 150WordPress本体:[設定] → [メディア] → [サムネイルのサイズ]
medium – 300 x 300WordPress本体:[設定] → [メディア] → [中サイズ]
medium_large – 768 x 9999WordPress本体:option.phpの[medium_large_size_w]
large – 1024 x 1024WordPress本体:[設定] → [メディア] → [大サイズ]
1536×1536WordPress本体:自動リサイズ
2048×2048WordPress本体:自動リサイズ

この他にもSANGOなどのテーマは、テーマ独自のリサイズ画像を生成します。

WordPress本体の[リサイズを無効化]は、本体側の設定で変更を推奨します。

リサイズ画像が増えすぎないために、メディア設定を変更します。

WordPressのメディア設定は、以下をご覧ください。

6) 変換設定(重要度:

変換設定は、特に変更は必要ありません。

WordPressプラグイン「EWWW Image Optimizer」の変換設定
EWWW Image Optimizerの変換設定
重要度設定項目説明
変換リンクを非表示JPGとPNGの変換リンクを表示
→ 複数ユーザーで使うならON
オリジナルを削除変換後に元画像を削除
→ バックアップがなくなるためOFF
JPG を PNG に変換画像形式を自動変換
→ サーバー負荷が上がるためOFF
PNG を JPG に変換画像形式を自動変換
→ サーバー負荷が上がるためOFF
GIF を PNG に変換画像形式を自動変換
→ サーバー負荷が上がるためOFF

[変換リンクを非表示]は、メディア画面でJPGとPNGの変換リンクを表示する設定です。

WordPressプラグイン「EWWW Image Optimizer」の変換リンク
EWWW Image Optimizerの変換リンク

一人で運営するサイトならONでもOFFでもいいですが、複数人で運営する場合はONにしておいた方が安全です。

以上で、プラグイン「EWWW Image Optimizer」の初期設定は完了です。

3) プラグイン「EWWW Image Optimizer」の使い方

設定完了後にアップロードした画像は、自動的にWebPなどに変換されます

EWWW Image Optimizer」をインストールする前にアップロードした画像がある場合は、一括変換をおこないます。

1) 既存画像の一括変換

左メニューの[メディア]から[一括最適化]を開きます。

[最適化されていない画像をスキャンする]をクリックします。

WordPressプラグイン「EWWW Image Optimizer」のメディア一括変換(スキャン開始)
EWWW Image Optimizerのメディア一括変換(スキャン開始)

[画像を最適化]をクリックします。

WordPressプラグイン「EWWW Image Optimizer」のメディア一括変換(スキャン結果)
EWWW Image Optimizerのメディア一括変換(スキャン結果)

変換が完了したら、変換された画像一覧が表示されます。

WordPressプラグイン「EWWW Image Optimizer」のメディア一括変換(変換完了)
EWWW Image Optimizerのメディア一括変換(変換完了)

以上で、プラグイン「EWWW Image Optimizer」のメディア一括変換は完了です。

4) アップロードする前に画像を圧縮する必要があるか?

アップロードする前に画像を圧縮する必要がありますか?

いいえ、アップロード後に圧縮されるため、アップロード前に圧縮する必要はありません。

逆に、アップロード前に圧縮してしまうと2回圧縮されることになり、画質が劣化します。

OptimizillaTinyPNGで圧縮してからアップロードするのはやめましょう

アップロードする前に画像をリサイズする必要がありますか?

はい、リサイズしておかないとサーバー容量を圧迫します。

そのため、アップロードする前に800〜1280px程度にリサイズすることをおすすめします。

5) SWELLで画像の不具合が発生した場合

SWELLテーマで画像が表示されないのはなぜですか?

EWWW Image Optimizer」プラグインを使用している場合、遅延読み込みが重複(バッティング)している可能性があります。

自動でONに設定されている場合もあるため、遅延読み込みがOFFになっていることを確認しましょう。

SWELLフルワイドブロックの境界線が波などにならず直線になるのはなぜですか?

EWWW Image Optimizer」プラグインを使用している場合、遅延読み込みが重複(バッティング)している可能性があります。

自動でONに設定されている場合もあるため、遅延読み込みがOFFになっていることを確認しましょう。

この記事のまとめ

プラグイン「EWWW Image Optimizer」の設定方法と使い方を見てきました。

遅延読み込み機能はテーマ機能や他のプラグインと重複しやすいため気をつけてください。

なるほどくん

設定に気をつけます。

XMLサイトマッププラグイン
セキュリティプラグイン
SSLプラグイン
高速化プラグイン
PHPカスタマイズプラグイン

この記事の参考情報

EWWW Image Optimizer公式サイト

読者の声を紹介させてください

この記事をご紹介いただいた方がいらっしゃいましたら、読者の声として掲載させていただきます。

ぜひご連絡いただければと思います。

  • 当サイトで紹介した商品を購入すると、売上の一部が当サイトに還元されることがあります。(消費者庁資料
  • 当サイトで掲載しているコンテンツは独自のものであり、広告主は一切関与していません。(コンテンツポリシー
この記事が役に立ったらご紹介ください!

コメント

コメントする

目次