EWWW Image Optimizerの設定方法と使い方【WebP化】

フェニック

EWWW Image Optimizerで画像圧縮したいけど設定が難しいぞ？

今回はこのようなお悩みにお答えします。

EWWW Image Optimizerは、画像圧縮プラグインで人気No,1です。

圧縮率が高く、作業も簡単だからです。

ただ正しく設定をしないと「画像が表示されない」などの不具合が生じます。

そこで今回は、EWWW Image Optimizerの正しい設定方法と使い方を解説します。

この記事を読めば、ページ表示速度が大幅に向上します。

気になる方はのぞいてみてください。

この記事の著者

Shota　@Shota_Lab_1

歴3年の副業ブロガー。月間32,000PVのブログフェニックスを運営。
X（Twitter）のフォロワーは5,000人以上

著者情報の詳細

さくっと設定方法を知りたい方はEWWW Image Optimizerの設定方法をクリックしてください。

当サイトのテーマ｜SWELL

¥17,600（税込）

導入方法を見るCocoonから乗り換え

EWWW Image Optimizerとは

EWWW Image Optimizerは、無料でWordPress画像を圧縮するプラグインです。

画像の圧縮とは、画像ファイルの容量を下げることです。

EWWW Image Optimizerは、以下の方法で画像ファイルを圧縮します。

上の2つの画像は、EWWW Image Optimizerで圧縮する前と後の画像です。

圧縮後の画像は、画質がほとんど変わりません。

EWWW Image Optimizerは画質を落とすことなく、画像を圧縮することができます。

画像圧縮するとページ表示速度が向上する

EWWW Image Optimizerで画像圧縮すると、ページ表示速度が大幅に向上します。

Webサイト全体容量に対し、画像容量が21％も占めているためです。

動画の少ないWordPressブログの場合、画像容量の比率は更に高くなります。

画像を圧縮すれば、1ページあたりの容量を大幅に削減できるためページ表示速度が向上します。

画像圧縮するとバックアップが楽になる

上の図はAll-in-One WP Migrationを使い、ブログをバックアップしている画像です。

EWWW Image Optimizerで画像を圧縮すると、ブログ全体の容量が軽くなります。

そのためバックアップ完了までの時間が短くなります。

バックアップはとても重要な作業のため、画像を圧縮して作業負荷を下げることは重要です。

なおAll-in-One WP Migrationを使ったバックアップ方法は、以下の記事で解説しています。

EWWW Image Optimizerは不要？

EWWW Image Optimizerは不要ではありません。

不要でない理由は2つあります。

それぞれ解説します。

アップロードするだけで画像圧縮できる

EWWW Image Optimizerは、WordPressに画像をアップロードするだけで圧縮してくれます。

そのためブログ運営が非常に楽になります。

TinyPNGなど無料で使える外部圧縮サイトがありますが、作業が面倒です。

TinyPNGで画像圧縮する場合は、以下の工程が必要です。

記事を更新するたびに、この工程を繰り返すのは面倒です。

EWWW Image Optimizerは、WordPressに画像をアップロードするだけで圧縮できます。

そのためブログ運営がとても楽になります。

画像圧縮プラグインで一番優秀

EWWW Image Optimizer以外にも画像圧縮プラグインがあります。

上記の画像圧縮プラグインを無料で使用する場合には、圧縮枚数に制限があります。

EWWW Image Optimizerは無料で画像を無制限に圧縮できます。

そのため画像圧縮プラグインで一番優秀だと判断できます。

インストール方法

WordPressのダッシュボードの【プラグイン】⇒【新規追加】をクリックします。

プラグイン検索窓に「EWWW Image Optimizer」と入力します。

EWWW Image Optimizerが見つかったら【今すぐインストール】⇒【有効化】をクリックしてください。

これでEWWW Image Optimizerのインストールは完了です。

EWWW Image Optimizerの設定方法

この項目では、EWWW Image Optimizerで画像圧縮する最適な設定方法を解説します。

初期設定

WordPressダッシュボードの【設定】⇒【EWWW Image Optimizer】をクリックします。

利用目的

EWWW Image Optimizerの利用目的を聞かれるので、以下のように設定してください。

設定が完了したら【次】をクリックしてください。

EWWW Image Optimizerの有料プランを使う必要はありません。

無料でページ表示速度を高速化するプラグインは他にもあるからです。

当サイトは現在、LiteSpeed Cacheを利用してページ表示速度を高速化しています。

このプラグインを使い「PageSpeed Insights」でパフォーマンススコア100点をたたきだしています。

LiteSpeed Cacheは、LiteSpeedサーバーを利用している人が使用できるプラグインです。

LiteSpeedサーバーを使用しているサーバー会社とプランは、以下になります。

LiteSpeed Cacheの使い方は、以下の記事をご覧ください。

画像圧縮方法

次に画像の圧縮方法について聞かれます。

以下のように設定してください。

設定が完了したら【設定を保存】をクリックしてください。

次に画像の一括最適化について聞かれますが、後ほど設定するため【完了】をクリックしましょう。

①メタデータとは

メタデータとは、撮影時間や撮影機器など画像の付随情報のことです。

EWWW Image Optimizerを使いメタデータを削除することで、画質を落とさずに画像を軽量化できます。

②遅延読み込みとは

【遅延読み込み】とは、プラウザに表示される画像を先出しする機能です。

表示していない画像を後から読み込むため「遅延読み込み」と呼ばれます。

画像の遅延読み込みは、多くのWordPressテーマに標準装備されています。

EWWW Image Optimizerの遅延読み込みを使用すると、機能が被り不具合が発生します。

Cocoonの場合、ヘッダー画像が表示されないトラブルが発生します。

WordPressテーマの画像遅延読み込みと機能が被らないように、チェックを外しておきましょう。

③EWWW Image Optimizerの幅の上限について

今回は【幅の上限】を1,600pxに設定しています。

幅が1,600pxを超える画像は、縦横比率を変えずに幅を1,600pxにリサイズします。

【幅の上限】を設定することで画像ファイルの容量が軽量化し、バックアップが楽になります。

Enable Ludicrous Modeへの変更

EWWW Image Optimizerはデフォルトでは【簡単にモード】に設定されています。

高度な設定をするため【Enable Ludicrous Mode】をクリックしてください。

設定タブの数が3個から8個に増えます。

設定が完了したら【変更を保存】をクリックしてください。

リサイズ設定

【リサイズ】のタブをクリックして画面を切り替えます。

リサイズ設定は以下のように設定してください。

リサイズ設定することで、既にアップロードしているブログ内の全ての画像をリサイズすることができます。

設定が完了したら【変更を保存】をクリックしてください。

EWWW Image Optimizerのリサイズの無効化(※参考)

EWWW Image Optimizerで【リサイズの無効化】を設定をすると、サーバーの使用容量を抑制できます。

「ブログで使用しない画像」の自動生成を無効化できるからです。

サーバー使用量を抑制するメリットは、バックアップ時間の短縮です。

WordPressでは【large-1024×1024(メディア設定の大サイズ)】以外の画像の使用シーンは、ほとんどありません。

しかしWordPressは画像をアップロードすると、さまざまなサイズの画像を自動生成します。

森の画像(幅3264px×高さ2448px)をWordPressにアップロードすると、13枚の画像が自動生成されました。

EWWW Image Optimizerで【リサイズの無効化】を設定をすると、ブログで使用しないの画像の自動生成を無効化できます。

Shota

これは上級者向けの内容です。わからなければデフォルト設定でOKです。

画像の自動生成無効化については、以下の記事でも解説しています。

あわせて読みたい

WordPressブログの画像サイズの目安と最適化方法 この記事ではWordPressブログに使う画像サイズ(写真サイズ)の目安と、画像サイズを最適化する方法を解説しています。スマホで撮った写真を例に解説します。WordPressの画像サイズでお悩みの方は必見です。

変換設定

【変換】のタブをクリックして画面を切り替えます。

変換設定は以下のように設定してください。

【変換リンクを非表示】には必ずチェックを入れましょう。

チェックを入れないと画像の拡張子が自動変換されます。

画像の拡張子が変換されると、画像が粗くなってしまいます。

設定が完了したら【変更を保存】をクリックしてください。

WebP設定

【基本】のタブをクリックして画面を切り替えます。

WebP設定は以下のように設定してください。

WebPは、Googleが開発した次世代画像フォーマットです。

圧縮しても画質が落ちにくく、画像容量が軽いのが特徴です。

WebPはページ表示速度向上に最適な画像フォーマットです。

ただし【WebP 変換】にチェックを入れるだけでは、画像はWebPに変換しません。

更に設定を続けます。

<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

【WebP配信用コード】をコピーして、使用しているサーバーの「.htaccessファイル」の一番上に貼り付けます。

「.htaccessファイル」の保管場所はレンタルサーバーによって異なります。

コアサーバーの場合「.htaccessファイル」はファイルマネージャーの中にあります。

STEP

コアサーバーにログインし【ツール】⇒【ファイルマネージャー】⇒【domains】⇒【対象のドメイン】をクリック

STEP

【public_html】⇒【.htaccess】をクリック

STEP

「.htaccessファイル」の一番上に【WebP配信用コード】を貼り付け【Save File】をクリック

STEP

WordPressの管理画面に戻り【変更を保存】をクリック

STEP

「WebPルールが正常に検証されました」と表示されたら画像のWebP化は成功

自分のレンタルサーバーの「.htaccessファイル」の場所を調べてみましょう。

「.htaccessファイル」が分からない場合の対処方法

「.htaccessファイル」が分からない場合は【リライトルールを挿入する】をクリックしましょう。

EWWW Image Optimizerが【WebP配信用コード】を「.htaccessファイル」に自動入力してくれます。

WebP画像に変換されない時の対処法

以下の項目にチェックを入れて【変更を保存】をクリックしてください。

EWWW Image Optimizerの使い方

この項目では設定方法に基づき、実際に画像を圧縮する方法を解説します。

アップロードする画像を圧縮する

WordPressダッシュボードの【メディア】⇒【新規追加】をクリックしてください。

画像をアップロードするだけで、EWWW Image Optimizerが自動で画像を圧縮します。

圧縮された画像は【メディア】⇒【ライブラリ】をクリックすると確認できます。

1Mを超える画像は80％以上、画像容量を削減してくれます。

アップロード済みの画像を圧縮する

WordPressに既にアップロードしている画像や、ブログに掲載している画像を一括で圧縮することができます。

WordPressダッシュボードの【メディア】⇒【一括最適化】をクリックしてください。

EWWW Image Optimizerが一括で圧縮する画像を選択しています。

【画像を最適化】をクリックしましょう。

【最適化済み】と表示されたら成功です。

実際にブログに掲載している画像をダウンロードして、圧縮されているか確認してみましょう。

締めに入る前にお知らせです。

SWELLユーザーの方にはSWELLプラグインの記事もおすすめです。

あわせて読みたい

SWELLのおすすめプラグイン16選と設定方法【総まとめ】 この記事ではSWELLと相性のよいおすすめプラグインを16個厳選して解説しています。また併せてプラグインの設定方法も解説しています。SWELLを導入直後の方は必見です。

EWWW Image Optimizerの設定が終わったら

ブログ収益化ツールを導入しましょう。

ブログツールを導入すると、より確実に稼げます。

以下の記事では、開設14ヶ月で「月間28,000PV、月間収益5万円」を実現させた神ツールを紹介しています。

ぜひチェックしてみてください。

＞＞ブログアフィリエイト収益化を加速させるおすすめツール20選

あわせて読みたい

ブログアフィリエイト収益化を加速させるおすすめツール21選 この記事では、ブログ収益化を加速させるおすすめツールを紹介しています。無料と思えないお宝ツールも豊富に紹介しています。ブログで早く稼ぎたい方は必見です。

EWWW Image Optimizerの設定方法と使い方のまとめ

今回はEWWW Image Optimizerの設定方法と使い方を解説しました。

ただし、画像圧縮だけではページ表示速度の向上は限定的です。

WordPressに挿入する画像サイズを【メディア設定】で最適化する必要があります。

【メディア設定】については以下の記事で解説しています。

今回の内容は以上です！