「EWWW Image Optimizer」は、画像最適化プラグインです。WordPressで画像をアップロードする際に、自動でリサイズ、圧縮してくれます。
そのため、画像圧縮サイトでの作業手間を短くできます。
![](https://www.blog-start.org/wp-content/uploads/2022/06/writer-good-min-150x150.jpg)
SWELLで使って1年。不具合ないです。
この記事では、SWELLに「EWWW Image Optimizer」を導入する手順と使い方をご紹介します。
この記事を読めば、10分でプラグインを設定できます。
この記事を書いている人
![筆者のプロフィール画像](https://www.blog-start.org/wp-content/uploads/2023/11/myprofile-image.png)
![筆者のプロフィール画像](https://www.blog-start.org/wp-content/uploads/2023/11/myprofile-image.png)
- ConoHaWINGユーザー4年目
- SWELLユーザー3年目
- SEO検定一級合格
- 月収6ケタ(プラチナランク)
- 某ASPの社員
![A8プラチナ会員](https://www.blog-start.org/wp-content/uploads/2023/10/platinum-1.jpg)
![A8プラチナ会員](https://www.blog-start.org/wp-content/uploads/2023/10/platinum-1.jpg)
スクロール&拡大できます
![SEO検定1級](https://www.seo-study.jp/wp-content/uploads/2023/01/SEO-Level1.jpg)
![SEO検定1級](https://www.seo-study.jp/wp-content/uploads/2023/01/SEO-Level1.jpg)
![登場人物](https://www.blog-start.org/wp-content/uploads/2023/12/character-main.png)
![登場人物](https://www.blog-start.org/wp-content/uploads/2023/12/character-main.png)
EWWW Image Optimizerとは【画像最適化プラグイン】
![EWWW Image Optimizerとは?](https://www.blog-start.org/wp-content/uploads/2022/04/EWWW-Image-Optimizer.jpg)
![EWWW Image Optimizerとは?](https://www.blog-start.org/wp-content/uploads/2022/04/EWWW-Image-Optimizer.jpg)
EWWW Image Optimizer「以下EIO」は、画像最適化プラグインです。ワードプレスに画像をアップするとき、自動でリサイズ、圧縮してくれます。
![](https://www.blog-start.org/wp-content/uploads/2022/06/writer-good-min-150x150.jpg)
![](https://www.blog-start.org/wp-content/uploads/2022/06/writer-good-min-150x150.jpg)
![](https://www.blog-start.org/wp-content/uploads/2022/06/writer-good-min-150x150.jpg)
これからアップする画像だけでなく、アップ済みの画像も圧縮してくれます。
EIOは、無料版と有料版(Cloud)があります。無料の場合「1回の圧縮で500枚以内、圧縮率は20%」と制限があります。有料に制限はありません。
![](https://www.blog-start.org/wp-content/uploads/2023/08/check-1.png)
![](https://www.blog-start.org/wp-content/uploads/2023/08/check-1.png)
![](https://www.blog-start.org/wp-content/uploads/2023/08/check-1.png)
個人ブログなら、無料版で問題ないです。
有料版は、大企業やプロのブロガーさん向けプランです。
- 劣化なく画像を圧縮できる
- いちいちフォトショでリサイズしなくて良い
- サーバーへの負担が少なくなる
- Webp形式に対応しているのでサイトが軽くなる
- ドメインパワーが上がりやすい
- 画像のメタ情報も削除できる
通常、画像を圧縮する場合「compressjpeg」「iloveimg」など、外部ツールを利用します。しかし、いちいちアップロードして圧縮するのは、かなり面倒です。
EIOは、画像をアップロードするときに、自動で圧縮してくれます。例えば「compressjpegやiloveimg」で、画像1枚を圧縮するのに30秒かかる場合、100枚画像を圧縮したら50分です。
つまりEIOを使うことで、1時間近く、作業時間を節約できます。
EIOの設定手順を詳しく解説【一括でWebP変換】
![インストール手順と初期設定](https://www.blog-start.org/wp-content/uploads/2022/07/step-min-3.jpg)
![インストール手順と初期設定](https://www.blog-start.org/wp-content/uploads/2022/07/step-min-3.jpg)
ここからは、EIOのインストール手順と初期設定について、画像で解説いたします。
![EWWW Image Optimizerをインストール](https://www.blog-start.org/wp-content/uploads/2022/01/EWWW-Image-Optimizer-01-1024x404.jpg)
![EWWW Image Optimizerをインストール](https://www.blog-start.org/wp-content/uploads/2022/01/EWWW-Image-Optimizer-01-1024x404.jpg)
まず、ワードプレスからプラグインをインストールします。
- 画像「プラグイン」をクリック
- 画像、キーワードから「EWWW Image Optimizer」を検索
- インストール完了したら有効化する
![設定画面を開く](https://www.blog-start.org/wp-content/uploads/2022/01/EWWW-Image-Optimizer-02.jpg)
![設定画面を開く](https://www.blog-start.org/wp-content/uploads/2022/01/EWWW-Image-Optimizer-02.jpg)
「EWWW Image Optimizer」のプラグインを有効化したら、初期設定をします。
ワードプレス管理画面の左ナビから、以下進めます。
- ツール「設定」をクリック
- 「EWWW Image Optimizer」をクリック
次は、詳細設定です。
![簡単モードに移行](https://www.blog-start.org/wp-content/uploads/2022/01/EWWW-Image-Optimizer-03-1024x630.jpg)
![簡単モードに移行](https://www.blog-start.org/wp-content/uploads/2022/01/EWWW-Image-Optimizer-03-1024x630.jpg)
「EWWW Image Optimizer」設定画面トップへ。画像①の「Enable Ludicrous Mode」(簡単モード)をクリックすると、詳細設定画面に遷移します。
![詳細設定](https://www.blog-start.org/wp-content/uploads/2022/01/EWWW-Image-Optimizer-Configuration-1024x606.jpg)
![詳細設定](https://www.blog-start.org/wp-content/uploads/2022/01/EWWW-Image-Optimizer-Configuration-1024x606.jpg)
- 「基本」タブをクリック
- メタデータ削除にチェック
- 画像のリサイズ
- Webp変換にチェック
メタデータ削除
②のメタデータとは、画像情報です。
スマホなどで撮影した写真をブログにアップする際、Exifデータ(撮影情報や位置情報などのデータ)が記載されているケースがあります。
![Exifデータ](https://www.blog-start.org/wp-content/uploads/2022/01/Exif-min.jpg)
![Exifデータ](https://www.blog-start.org/wp-content/uploads/2022/01/Exif-min.jpg)
情報漏えいを防ぐため、メタデータは削除がおすすめです。
画像のリサイズ
③「画像のリサイズ」で、リサイズサイズを指定できます。
1,200ピクセル以上を推奨します。
※「500PX」のように、リサイズ設定が小さいと、SearchConsole(サーチコンソール)から警告がきます
WebP(ウェッピー)変換にチェック
![WebP自動変換](https://www.blog-start.org/wp-content/uploads/2023/07/webp-ex.jpg)
![WebP自動変換](https://www.blog-start.org/wp-content/uploads/2023/07/webp-ex.jpg)
WebP(ウェッピー)変換にチェックします。
WebPとは、Googleが開発した画像フォーマット。画質を劣化させず軽量化できるメリットがあります。
画像形式 | WebP | JPEG | PNG | GIF |
---|---|---|---|---|
圧縮方式 | 非可逆圧縮 | 非可逆圧縮 | 可逆圧縮 | 可逆圧縮 |
透過 | 〇 | ✖ | 〇 | △ |
アニメーション | 〇 | ✖ | ✖ | 〇 |
![](https://www.blog-start.org/wp-content/uploads/2022/06/writer-good-min-150x150.jpg)
![](https://www.blog-start.org/wp-content/uploads/2022/06/writer-good-min-150x150.jpg)
![](https://www.blog-start.org/wp-content/uploads/2022/06/writer-good-min-150x150.jpg)
画像をWebP(ウェッピー)にするだけで、サイト表示速度が上がり、SEOが有利になるメリットがあります。
![「WeaPの配信方法」のコードを全コピー](https://www.blog-start.org/wp-content/uploads/2023/07/webp-003.jpg)
![「WeaPの配信方法」のコードを全コピー](https://www.blog-start.org/wp-content/uploads/2023/07/webp-003.jpg)
サイトにWebPを導入する手順を解説します。
- 「WebP変換」にチェック
- コードをコピー
![コピーしたコードをサーバーの「 .htaccess」に貼り付ける](https://www.blog-start.org/wp-content/uploads/2023/07/webp-004.jpg)
![コピーしたコードをサーバーの「 .htaccess」に貼り付ける](https://www.blog-start.org/wp-content/uploads/2023/07/webp-004.jpg)
コノハウィングにログインして、コピーしたコードをコノハウィングの「 .htaccess」に貼り付けます。
- サイト管理
- 対応設定
- .htaccess設定
![コピーしたコードを貼り付ける](https://www.blog-start.org/wp-content/uploads/2023/07/webp-005-1024x420.jpg)
![コピーしたコードを貼り付ける](https://www.blog-start.org/wp-content/uploads/2023/07/webp-005-1024x420.jpg)
- 「えんぴつマーク」をチェック
- コピーしたコードを最上部にペースト
- 保存
保存できたら、WordPressに戻ります。コノハウィングはログアウトしてOK。
![表示が「WEBP」に変わる](https://www.blog-start.org/wp-content/uploads/2023/07/webp-006.jpg)
![表示が「WEBP」に変わる](https://www.blog-start.org/wp-content/uploads/2023/07/webp-006.jpg)
「EWWW Image Optimizer設定画面」に戻ったら、①保存→「F5」でページ更新します。
![表示が「WEBP」に変わってれば正しく設定されています。](https://www.blog-start.org/wp-content/uploads/2023/07/webp-010.jpg)
![表示が「WEBP」に変わってれば正しく設定されています。](https://www.blog-start.org/wp-content/uploads/2023/07/webp-010.jpg)
表示が緑色「WEBP」に変れば「コノハウィング .htaccess」が正しく設定されている証拠。
![メディア→一括最適化](https://www.blog-start.org/wp-content/uploads/2023/07/webp-009.jpg)
![メディア→一括最適化](https://www.blog-start.org/wp-content/uploads/2023/07/webp-009.jpg)
WordPress管理画面の①メディア→②一括最適化をクリック。
![最適化されてない画像をスキャンする](https://www.blog-start.org/wp-content/uploads/2023/07/webp-008.jpg)
![最適化されてない画像をスキャンする](https://www.blog-start.org/wp-content/uploads/2023/07/webp-008.jpg)
「最適化されてない画像をスキャンする」をクリック。
![JPGやPNGが「WEBP」に変換されました](https://www.blog-start.org/wp-content/uploads/2023/07/webp-011.jpg)
![JPGやPNGが「WEBP」に変換されました](https://www.blog-start.org/wp-content/uploads/2023/07/webp-011.jpg)
JPGやPNGが「WEBP」に変換されました。
![赤枠はデフォルトでOK](https://www.blog-start.org/wp-content/uploads/2022/01/EWWW-Image-Optimizer-Configuration-02.jpg)
![赤枠はデフォルトでOK](https://www.blog-start.org/wp-content/uploads/2022/01/EWWW-Image-Optimizer-Configuration-02.jpg)
上記画像の赤枠は、デフォルトのままで大丈夫です。
EWWW Image Optimizerの使い方【画像圧縮】
![実際に画像最適化してみる](https://www.blog-start.org/wp-content/uploads/2021/11/ewww-image-optimizer-02-min.jpg)
![実際に画像最適化してみる](https://www.blog-start.org/wp-content/uploads/2021/11/ewww-image-optimizer-02-min.jpg)
「EWWW Image Optimizer」の設定が終わったら、実際に画像の最適化をしてみましょう。
「EWWW Image Optimizer」の使い方は2通りあります。
順番に解説します。
これからアップする画像を圧縮、最適化
![無料素材のサイズが大きい画像の詳細](https://www.blog-start.org/wp-content/uploads/2022/01/photo-test-01-min.jpg)
![無料素材のサイズが大きい画像の詳細](https://www.blog-start.org/wp-content/uploads/2022/01/photo-test-01-min.jpg)
「EWWW Image Optimizer」を使うことで「どれだけ最適化されるか?」検証します。画像は 「4000ピクセル×2667ピクセル」の大きい画像で検証します。
![ワードプレスにアップロード](https://www.blog-start.org/wp-content/uploads/2022/01/photo-test-02-min.jpg)
![ワードプレスにアップロード](https://www.blog-start.org/wp-content/uploads/2022/01/photo-test-02-min.jpg)
ワードプレスに「4000ピクセル×2667ピクセルの画像」をアップロードします。
![画像の自動最適化](https://www.blog-start.org/wp-content/uploads/2022/01/photo-test-03-min-1024x437.jpg)
![画像の自動最適化](https://www.blog-start.org/wp-content/uploads/2022/01/photo-test-03-min-1024x437.jpg)
ワードプレス管理画面の「メディア」から、アップロードした画像を確認。
すると、以下に自動調整されてました。
- ファイルサイズ:3.67MB→87KBに削減
- サイズ(画像):4000ピクセル×2667ピクセル→900ピクセル×600ピクセルにリサイズ
圧縮だけでなく「EWWW Image Optimizer」で設定したサイズにリサイズされてました。
「EWWW Image Optimizer」は、外部ツール不要で圧縮リサイズできます。時間が節約となるので、サラリーマンにはありがたい無料プラグインです。
アップ済みの画像を圧縮、最適化
EWWW Image Optimizerは、過去にワードプレスにアップした画像も、ワンクリックで最適化できます。
![最適化の手順1](https://www.blog-start.org/wp-content/uploads/2022/01/EWWWImageOptimizer-scan-min.jpg)
![最適化の手順1](https://www.blog-start.org/wp-content/uploads/2022/01/EWWWImageOptimizer-scan-min.jpg)
- 「メディア」をクリック
- 「一括最適化」をクリック
- 「最適化されていない画像をスキャンする」をクリック
![155点の画像を最適化](https://www.blog-start.org/wp-content/uploads/2022/01/EWWWImageOptimizer-scan-02-min.jpg)
![155点の画像を最適化](https://www.blog-start.org/wp-content/uploads/2022/01/EWWWImageOptimizer-scan-02-min.jpg)
過去、圧縮していない画像「155点」が自動抽出されます。
![自動で最適化中](https://www.blog-start.org/wp-content/uploads/2022/01/EWWWImageOptimizer-scan-03-min.jpg)
![自動で最適化中](https://www.blog-start.org/wp-content/uploads/2022/01/EWWWImageOptimizer-scan-03-min.jpg)
「最適化ボタン」をクリックすると、画像の最適化が始まります。
![完了と最適化ログ](https://www.blog-start.org/wp-content/uploads/2022/01/EWWWImageOptimizer-scan-04-min-1024x598.jpg)
![完了と最適化ログ](https://www.blog-start.org/wp-content/uploads/2022/01/EWWWImageOptimizer-scan-04-min-1024x598.jpg)
画像最適化は、1分ほどで完了しました。
※WebP(ウェッピー)設定をした場合、WebPに変換されます。
![一括最適化完了](https://www.blog-start.org/wp-content/uploads/2021/11/ewww-image-optimizer-04-min-1024x577.jpg)
![一括最適化完了](https://www.blog-start.org/wp-content/uploads/2021/11/ewww-image-optimizer-04-min-1024x577.jpg)
![](https://www.blog-start.org/wp-content/uploads/2022/06/writer-good-min-150x150.jpg)
![](https://www.blog-start.org/wp-content/uploads/2022/06/writer-good-min-150x150.jpg)
![](https://www.blog-start.org/wp-content/uploads/2022/06/writer-good-min-150x150.jpg)
ワンクリックで「画像サイズ1.7%(49 B)減少」できました。
「EWWW Image Optimizer」で時間の節約【まとめ】
![まとめ](https://www.blog-start.org/wp-content/uploads/2022/10/summarize-min.jpg)
![まとめ](https://www.blog-start.org/wp-content/uploads/2022/10/summarize-min.jpg)
まとめです。
「EWWW Image Optimizer」は、画像の自動圧縮プラグインです。使う画像が多いほど、作業の短縮ができます。
- ブログに使える時間が増える
- サイト表示速度が速くなる
- SEOで上位表示されやすくなる
といった効果が得られます。
しかも、「EWWW Image Optimizer」は無料で利用できます。これからずっと、画像のリサイズと圧縮に工数を取られません。ワンクリックで「SEO対策」ができます。
それって、とっても効率的だと思いませんか?