WORDPRESS

【2021年】「EWWW Image Optimizer」の設定方法と使い方を初心者向けに解説【WordPressプラグイン/画像を自動圧縮してサイト高速化】

「EWWW Image Optimizer」の設定方法と使い方
 

あずきです🐥

WordPressにおける定番プラグインの1つで、2021年くらいに「バージョン 6.0.0」の大型アップデートが行われた…

EWWW Image Optimizer

について、その導入手順と「基本的な設定方法・使い方」をブログ初心者さん向けに1から解説していきます

 

まず…

この「EWWW Image Optimizer」は、WordPressにアップロードした画像を自動で「圧縮」するためのプラグインです

つまり、画像のサイズを軽量化してくれるよ!
 

ちなみに!

ここで言う「画像のサイズ」というのは、横幅・高さ(例 1024px・700px )の…

px=ピクセル数

のことではなく…

ファイルサイズ=容量

のことを指します(例 150KB, 2MB )

 

補足

画像の容量というのは、「ファイルサイズ」の圧縮以外にも、横幅・高さの「ピクセル数」をリサイズ=縮小することで、大幅に軽減させられます

 

通常は、「画像の容量によってページ表示が重たくなる」のを防ぐために…

  • 「ファイルサイズ」を圧縮
  • 「ピクセル数」をリサイズ

この2つを併用して「容量を軽減させる」のが一般的です

 

「EWWW Image Optimizer」では、「ファイルサイズの圧縮」というメイン機能に加えて…

ピクセル数の自動リサイズ

というサブ機能も付属されていて、こちらの設定方法もあわせてご紹介していきます

 

ということで、今回のステップは大きく「3つ」です

  1. 「EWWW Image Optimizer」の導入手順【インストールと有効化】
  2. 「EWWW Image Optimizer」の基本的な設定方法【自動圧縮/自動リサイズ】
  3. すでにアップロードしてある画像を「まとめて圧縮」するやり方【一括最適化】

さっそく見ていきましょー🐥

 

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

【2021年】「EWWW Image Optimizer」の設定方法と使い方を初心者向けに解説【WordPressプラグイン/画像を自動圧縮してサイト高速化】

ステップ1:プラグイン「EWWW Image Optimizer」をWordPressに導入する手順【インストール&有効化】

WordPress ヘッダー c-01

 

注意

プラグインを使用することで、ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります。 プラグインの使用に際しては、あらかじめデータやファイルをバックアップされたうえで、ご自身の責任にて行ってください

 

関連:WordPressプラグイン「BackWPup」の設定方法を初心者向けに解説【ブログに必須な自動バックアップ】

 

はじめに…

プラグイン「EWWW Image Optimizer」の導入手順

について

 

WordPress管理画面の左側にある一覧メニューから…

WordPressプラグイン インストール 1-01

↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう

 

つづいて、画面の右上にある…

WordPressプラグイン インストール 1-02

↑ こちらの検索フォームに EWWW Image Optimizer と入力し、その下の検索結果から…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-1-01

↑ このアイコンが目印のプラグイン「EWWW Image Optimizer」を探し、右上の「今すぐインストール」ボタンをクリックします

 

「今すぐインストール」ボタンが「有効化」という表示に切り替わったら、つづいて「有効化」ボタンもクリックしましょう

WordPressプラグイン インストール 1-03

↑「プラグインを有効化しました。」と表示されたら、プラグインの「インストール&有効化」は完了です

お次は肝心の「設定方法」を見ていこう!
 

ステップ2:プラグイン「EWWW Image Optimizer」の基本的な設定方法【自動圧縮/自動リサイズ】

WordPress ヘッダー c-02

 

つづいて2つ目のステップは…

「EWWW Image Optimizer」の基本的な設定方法

について

 

具体的には、「2つ」の設定パートにわけて解説していきます

  1. 「EWWW Image Optimizer」のメイン設定
  2. 「EWWW Image Optimizer」の付属機能である、「自動リサイズ」の設定方法
まずはメイン設定から!
 

【設定1】「EWWW Image Optimizer」のメイン設定

WordPress ヘッダー c-03

 

WordPress管理画面の左側にある一覧メニューから…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-1-top

↑ 設定 > EWWW Image Optimizer をクリックします

 

初めて「EWWW Image Optimizer」を有効化したときに限り、通常の設定画面ではなく…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-1-01-top

↑ こちらの初期設定画面が表示されます

 

選択は任意ですが、基本的には…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-1-01-a

↑ こちらの3つを選んでおけば無難だと思います

 

いずれも英語表記なため少しわかりづらいですが、和訳すると、まず1番上のタイトルが…

In order to recommend the best settings for your site, please select which goal(s) are most important:
サイトに最適な設定を提案するには、最も重要な目標を選択してください

つづいて真ん中の2つが、それぞれ…

Speed up your site
サイトのスピードを上げたい

save storage space
ストレージスペースを節約する

最後に、下側の2つがそれぞれ…

Get 5x more optimization and priority support
5倍以上の最適化と優先的なサポートを取得

Stick with free mode for now
今のところフリーモードのまま

といった内容です

 

ちなみに、このなかで自分が唯一選択していない…

Get 5x more optimization and priority support
5倍以上の最適化と優先度のサポートを取得

という項目ですが、試しに選択してみたところ「APIキー」を始めとする認証画面のような表示になったので、こちらはいわゆる【有料版】と思われます

その下の「Stick with free mode for now」の方はフリーモードだから、【無料版】だよ!
 

ということで…

ここまで選択できたら、左下の…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-1-01-b

↑「Next」ボタンをクリックしましょう

 

つづいて…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-1-02-top

↑ このような設定画面が表示されます

 

まず、上側にある…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-1-02-a

↑ この3項目については、通常…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-1-02-b

↑ こちらの…

  • メタデータを削除
  • 遅延読み込み

の2つにチェックを入れておけば無難です

 

「メタデータ」というのは、画像ファイルごとで記録されている撮影場所やカメラ情報などのことを言います

つまり、メタデータを削除することで容量をより軽くできる!
 

「遅延読み込み」というのは、初めて聞いた人にとってはマイナスな機能にも思えるかもしれませんが、むしろこの機能によって「ページ表示の高速化」が期待できます

この「遅延読み込み」という機能は、「Lazy Load」とも呼ばれてるよ!
 
 

つづいてその下にある…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-1-02-c

↑「幅の上限」と「高さ上限」についてですが、これが冒頭でもお伝えした「EWWW Image Optimizer」のサブ機能である…

画像の「ピクセル数」を自動リサイズ

する機能になります

 

ただし!

この初期設定の段階では、ブログ画像における代表的な「ピクセル数」の1つである…

幅 1024px

という数値が、なぜか設定できないんですね

実際に試してみたけど、次に進もうとしたらエラーになった…
 

なのでこの時点では、一旦…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-1-02-d

↑ このように、「幅」と「高さ」のいずれも ”0” にしておけばOKです

これで、自動リサイズの機能をひとまず無効にするよ!
 

重要

上記の「自動リサイズ」については、この初期設定を一通り済ませたら表示できるようになる「通常の設定画面」からであれば、幅「1024px」という定番の数値を指定できるようになります

 

具体的な設定手順については、この次のパートでご紹介していきます

 

最後に、その下にある…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-1-02-e

↑ こちらの、英語で表記されている2つの項目について

 

ここの選択も任意ですが、自分は…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-1-02-f

↑ このように、2つともチェックを外しています

 

ちなみにそれぞれ和訳すると、まず上側が…

Embedded Help
埋め込みヘルプ

Access documentation and support from your WordPress dashboard. Uses resources from external servers
WordPressのダッシュボードから、文書とサポートにアクセスします。 外部サーバーからのリソースを使用します

といった意味で、下側が…

Anonymous Reporting
匿名の報告

Send anonymized usage data to help make the plugin better. Opt-in and get a 10% discount code
プラグインを改善するために、匿名化された使用状況データを送信します。 許可して10%の割引コードを取得する

といった意味です

 

ということで、ここまで設定できたら左下の…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-1-02-g

↑「Save Settings」ボタンをクリックしましょう

 

つづいて…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-1-03

↑「Done」ボタンをクリックします

 

表示画面が…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-1-04

↑ このような画面に切り替わったら、【メイン設定】については完了です

 

補足

今後は WordPress管理画面 > 設定 > EWWW Image Optimizer をクリックすると、さきほどの「初期設定」画面ではなく、こちらの「通常」画面が表示されるようになります

 

これで今後WordPressにアップロードする画像については、「ファイルサイズ=容量」が…

自動で圧縮

されるようになります

 

とはいえ…

 

実際にどれくらい圧縮されているのか?

 

気になるかもしれないですよね

 

ということで!

「自動圧縮」の稼働状況をチェックするやり方について、サクッとご紹介しておきます🐣

上の設定画面は一旦閉じちゃってOKだよ!
 

WordPress管理画面の一覧メニューから…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-1-05-top

↑ メディア > ライブラリ をクリックしましょう

 

つづいて、左上に表示されている…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-1-05-a

↑ こちらの「リスト」型アイコンをクリックします

最初から選択されていたら、そのままで大丈夫!
 

すると、今までWordPressにアップした画像が一覧表示されるので、その右側にある…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-1-05-b

↑ こちらの、「画像最適化」という列を見てみましょう

 

まず、「EWWW Image Optimizer」の導入以降にアップロードした画像については…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-1-05-c

↑ このように、画像のファイルサイズが自動で「すでに圧縮済み」ということがわかります

上の画像例だと、「16.4KB」削減できてるよ!
 

一方で!

「EWWW Image Optimizer」を導入する以前からアップロードしていた画像については、「自動圧縮」が行われていないので…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-1-05-d

↑ このように「圧縮します」という表記になっています

 

つまり…

  • 「EWWW Image Optimizer」の導入以降にアップロードしている画像 → 勝手に圧縮してくれるので、なにもしなくてOK!
  • 「EWWW Image Optimizer」の導入以前からアップロードしていた画像 → 自動圧縮の対象外なので、「手動」で圧縮をかける必要がある!

ということですね

 

で!

後者の、「EWWW Image Optimizer」導入以前からアップロードしていた画像については…

一括最適化

という機能を使うことで、すべての画像を「まとめて圧縮」することができます

この「一括最適化」については、最後のステップ③で解説するよ!
 

その前に…

さきほどの【メイン設定】を済ませたら、セットで忘れずに行っておきたい「自動リサイズ設定」のやり方について、次パートで見ていきましょう🐥

 

【設定2】「EWWW Image Optimizer」の付属機能である、「自動リサイズ」の設定方法

WordPress ヘッダー c-04

 

プラグイン「EWWW Image Optimizer」のメイン機能は、あくまで…

画像ファイルサイズの圧縮

ですが、冒頭でもお伝えした通り、もう1つ…

ピクセル数の自動リサイズ

という付属機能もあります

画像の幅・高さを「リサイズ」することで、容量はぐんと軽くなるよ!
 

さきほどの【メイン設定】をおえたら、またWordPress管理画面の一覧メニューから…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-2-top

↑ 設定 > EWWW Image Optimizer をクリックしましょう

 

まず、画面の上部に並んでいるタブについては…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-2-01

↑ こちらの「基本」タブのままでOKです

 

この「基本」タブのなかにある…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-2-2-02

↑「画像のリサイズ」という項目で、自動リサイズの具体的な数値(px=ピクセル数)を指定することができます

 

まずは「幅の上限」側に、任意の…

px(=ピクセル数)

を入力しましょう

 

ちなみに!

「ピクセル数とか言われても正直さっぱり…」という場合は、上の画像例のように…

1024

という数値が、ブログ画像における「幅の上限」としては、わりと定番になります

 

またその場合、右側の「高さ上限」については…

0

のままがおすすめです

「0」にすることで、「幅」の縮小する比率に合わせて自動でリサイズされるよ!
 
 

ただし!

「いつも画像編集ソフトを使って自分でリサイズしてからWordPressにアップしてる!」という場合であれば、この「自動リサイズ」はもちろん不要なので、その場合は…

幅 0 / 高さ 0

のままにしておきましょう

 
 

ということで…

設定を変更した場合は「変更を保存」ボタンを忘れずにクリックして、この【画像の自動リサイズ設定】についても完了です🐥

最後に、すでにアップロードしてある画像を「一括最適化」する手順について見ていこう!

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

 

ステップ3:「EWWW Image Optimizer」を有効化する前からアップロードしてある画像を、「まとめて圧縮」するやり方【画像ファイルサイズの一括最適化】

WordPress ヘッダー c-05

 

最後の3つ目のステップは、「EWWW Image Optimizer」を導入する以前からアップロードしていた画像を「まとめて」圧縮にかける…

一括最適化

という機能のやり方について

 

WordPress管理画面の一覧メニューから…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-3-top

↑ メディア > 一括最適化 をクリックしましょう

 

すると…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-3-01-a

↑ このような画面になります

 

まず、画面の上部に表示されている注意メッセージの通り…

「一括最適化」を行った画像は元に戻すことができない

という旨を了承したうえで、あらかじめ「画像のバックアップ」をとっておきましょう

 
 

つづいて…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-3-01-b

↑ こちらの、「最適化されていない画像をスキャンする」というボタンをクリックします

 

画面が切り替わり、左上に「最適化できる画像が●●点あります」というメッセージが表示されるので、このまま最適化をスタートして問題なければ…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-3-01-c

↑ こちらの…

●●点の画像を最適化

というボタンをクリックします

 

すぐに「一括最適化」の処理が始まって…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-3-02-a

↑ こちらの画面左上に…

WordPressプラグイン「EWWW Image Optimizer」の設定方法と使い方 1-3-02-b

↑ このように…

  • 完了
  • 最適化済み ●●/●●(例 21 / 21 )

と表示されれば、アップロード済み画像の「一括最適化」も完了です🐥

ここまでお疲れさま!
 
 

今回の記事はこちらの章に属しています

 第4章 プラグイン 編         

次の章はこちらからどうぞ

 第5章 サイトマップ 編        

全9章のTOPページです

あずきのワードプレスブログ「完全初心者」ガイド

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

 

   ✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!

   ✔ 時間のかかる面倒なカスタマイズも「クリック1つ」でさくさく実現!

   ✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能!

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

-WORDPRESS