WORDPRESS

【2021年/大型アプデ】WordPressプラグイン「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. すでにアップロードしてある画像を「まとめて圧縮」するやり方【一括最適化】

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

 

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

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

WING AFFINGER5

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

「WING AFFINGER5」の気に入ってる点・気になる点をガチレビュー アイキャッチ
【愛用】「WING AFFINGER5」って実際どうなの?気に入ってる点・気になる点をガチレビュー【WordPressのおすすめテーマ/専業ブロガー4年目】

続きを見る

WordPressの「タグ管理」とは? アイキャッチ
WordPressの「タグ管理」とは?どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化/一括修正が最強に便利】

続きを見る

 

注意

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

 
WordPressプラグイン「BackWPup」の基本的な設定方法 アイキャッチ
【2021年】WordPressプラグイン「BackWPup」の基本的な設定方法を初心者向けに解説【ブログに必須な自動バックアップ】

続きを見る

※プラグインを使用されたことで生じたいかなる損失、損害につきましても当ブログでは一切の責任を負いかねます

 

【2021年版】WordPressプラグイン「EWWW Image Optimizer」の基本的な設定方法【画像の自動圧縮・自動リサイズ・一括最適化】

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

WordPressブログ「完全初心者」ガイド 見出し a-01

はじめに…

「EWWW Image Optimizer」の導入手順

について

 

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

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

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

 

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

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

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

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

↑ このアイコンが目印のプラグイン「EWWW Image Optimizer」を探します

 

無事見つかったら…

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

↑ こちらの「今すぐインストール」ボタンをクリックし、このボタンが…

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

↑ このように「有効化」という表示に切り替わったことを確認したら、こちらの「有効化」ボタンもクリックして、プラグインの導入は完了です🐥

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

 

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

WordPressブログ「完全初心者」ガイド 見出し a-02

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

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

について

 

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

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

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

WordPressブログ「完全初心者」ガイド 見出し a-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」とも呼ばれてるよ!
 

関連

 

重要

そのほかのプラグインやテーマ側の機能などで「Lazy Load=遅延読み込み」機能がすでに有効になっている場合は、重複を避けるために、この「遅延読み込み」の項目はチェックを外します

 

ちなみにこのブログでは、WordPressテーマ「WING AFFINGER5」専用の…

LazyLoad SEO

という「遅延読み込み」の有料プラグインを使っているので、「EWWW Image Optimizer」側の「遅延読み込み」の項目はチェックを外しています

※SEO対策を維持しつつ、遅延読み込みを有効にするプラグインです

 

つづいてその下にある…

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」導入以前からアップロードしていた画像については…

一括最適化

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

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

その前に…

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

 

 

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

WordPressブログ「完全初心者」ガイド 見出し a-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

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

 
 

ということで…

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

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

 

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

WordPressブログ「完全初心者」ガイド 見出し a-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 )

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

ここまでお疲れさま!
 
 

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

WordPressブログガイド 第4章「プラグイン」編 

あずきのWordPressブログガイド 総合TOP 

\ このブログでも愛用中!/

WING AFFINGER5 banner-large-01

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

WING AFFINGER5

 ✔ 洗練された美しいデザイン性と、「変幻自在」な圧巻のバリエーション

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

 ✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

公式:「稼ぐ」に特化したWordPress テーマ『WING AFFINGER5』

関連:「WING AFFINGER5」気に入ってる点・気になる点をガチレビュー

WordPressの「タグ管理」とは? アイキャッチ
WordPressの「タグ管理」とは?どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化/一括修正が最強に便利】

続きを見る

 

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立4年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-WORDPRESS

© 2019 あずきのぶろぐ