WORDPRESS

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

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

※「EWWW Image Optimizer」はバージョンによって【日本語に翻訳済みのパターン】【未翻訳のパターン】があるため、どちらのケースにも対応できるよう「日本語・英語の両パターン」で記載しています

 

専業ブロガー5年目のあずきです🐥

 

WordPressにおける超定番プラグインの1つ…

EWWW Image Optimizer

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

 

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

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

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

px=ピクセル数

のことではなく…

ファイルサイズ=容量

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

 

補足

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

 

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

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

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

 

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

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

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

 

そんな「EWWW Image Optimizer」について、3つのステップで丁寧に解説していきます🐥

  1. 「EWWW Image Optimizer」の導入手順
  2. 「EWWW Image Optimizer」の基本的な設定方法(自動圧縮/自動リサイズ)
  3. すでにアップロードしてある画像を ”まとめて圧縮” するやり方(一括最適化)
さっそく見ていこー!

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

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

WordPress ヘッダー c-01

はじめに

プラグインの導入・設定に際しては、万が一のエラーに備えて各種データを事前にバックアップされたうえで、すべてご自身の責任にて行ってください(ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります)

BackWPupのおすすめな設定方法
【2022年】BackWPupのおすすめな設定方法を初心者向けに解説【WordPressプラグイン/ブログデータを自動でバックアップ】

続きを見る

 

はじめに…

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

について

 

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

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

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

 

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

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

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

EWWW Image Optimizerの設定方法と使い方 1-1-01

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

上の画像例はすでに「有効化」済みの状態だから、「今すぐインストール」ボタンは表示されてないよ!
 

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

 

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

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

お次は肝心の設定方法について見ていこう!
 



 

ステップ2:WordPressプラグイン「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管理画面の左側一覧から…

EWWW Image Optimizerの設定方法と使い方 1-2-1-top

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

 

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

EWWW Image Optimizerの設定方法と使い方 1-2-1-01

↑ こちらの「初期設定」画面が表示されますが、基本的には上画像のように…

  • サイトを高速化(Speed up your site)
  • 保存スペースを節約(Save storage space)
  • 今は無料モードのままにする(Stick with free mode for now)

の3項目を選んでおけばOKです

選択できたら、左下の 次(Next) ボタンをクリック!
 

すると…

EWWW Image Optimizerの設定方法と使い方 1-2-1-02

↑ このような画面に切り替わりますが、こちらは上画像のように…

  • メタデータを削除 → チェックあり
  • 遅延読み込み → チェックあり
  • 幅の上限 → 0
  • 高さの上限 → 0
  • 埋め込みヘルプ(Embedded Help) → チェックなし
  • 匿名の報告(Anonymous Reporting) → チェックなし

という形にしておけば無難です

それぞれの概要は、下記の通りだよ!
 

「メタデータを削除」について

ここで言う「メタデータ」とは、画像ファイルごとで記録されている「撮影場所」や「カメラ情報」を指し、メタデータを削除することで容量の軽量化(=WordPressの高速化)につながります

 

「遅延読み込み」について

遅延読み込み(Lazy Load)と聞くと、一見マイナスな機能にも思えるかもですが、むしろこの機能によって「ページ表示の高速化」が期待できます

 

くわしくはこちらの記事をどうぞ ↓

WordPress高速化におすすめな方法6選
【2022年】WordPress高速化におすすめな方法「6選」を初心者向けに1から解説【ブログを最適化してサイトスピード向上】

続きを見る

 

「幅の上限」「高さの上限」について

冒頭でもお伝えした「EWWW Image Optimizer」のサブ機能である、画像ファイルを ”自動リサイズ” する機能になります

 

ただしこの初期設定の段階では、ブログ画像の代表的な「ピクセル数」である…

幅 1024px

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

 

なのでこの時点では、上画像のように「幅」と「高さ」の両方とも…

0

にしておけばOKです(これで、自動リサイズ機能をひとまず無効にします)

 

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

「自動リサイズ」の設定手順については、このあと改めて解説していくよ!
 

「埋め込みヘルプ」について

こちらは通常使用しない項目なので、少なくとも当ブログでは「OFF」にしています

 

「匿名の報告」について

匿名化された使用状況データの送信許可を設定する項目なので、任意の方を選択すればOKです

 

ということで…

 

ここまで設定できたら、左下の 設定を保存(Save Settings) ボタンをクリックしましょう

 

つづいて…

EWWW Image Optimizerの設定方法と使い方 1-2-1-03

↑ こちらの 完了(Done) ボタンをクリックし…

EWWW Image Optimizerの設定方法と使い方 1-2-1-03

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

 

補足

今後は、WordPress管理画面の左側一覧から…

設定 > EWWW Image Optimizer

をクリックすると、さきほどの「初期設定」画面ではなく、こちらのTOP画面が表示されます

 

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

自動で圧縮

される形です

 

ちなみに!

 

今回の「EWWW Image Optimizer」を導入する以前から、すでにWordPressへアップロードしていた画像については…

一括最適化

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

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

その前に…

 

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

 



 

設定2:「EWWW Image Optimizer」の自動リサイズ設定

WordPress ヘッダー c-04

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

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

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

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

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

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

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

設定 > EWWW Image Optimizer

を再度開きましょう

 

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

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

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

 

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

EWWW Image Optimizerの設定方法と使い方 1-2-2-02

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

 

まずは「幅の上限」側に、任意のピクセル数を入力しましょう

 

ちなみにブログで定番なサイズは、上画像の通り…

1024

というピクセル数になります

 

つづいて右側の「高さ上限」については、基本的に…

0

のままがおすすめです

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

ただし!

 

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

幅 0 / 高さ 0

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

 

補足

ブログで使用する画像のサイズ(px)はもちろん任意ですが、ただ一般的には…

横幅 1024px

というのが、上限サイズとして定番です

 

参考までに当ブログでは…

  • アイキャッチ画像を始め、画質を優先させたい画像 → 横幅 1024px
  • それ以外の画像 → 横幅 700px

を基本的な上限に、その都度「画像編集ソフトでリサイズ」してから画像を貼っています(高さについては、「横幅のリサイズ比率にあわせて自動的に縮小」される形です)

 

※あくまで「上限サイズ」なので、そもそも上記より小さいサイズの画像をアップする場合は関係ありません

※Facebookで記事がシェアされる際のサムネ画像を「大きいサイズ」で表示させたい場合、「横幅1200px・高さ630px」が推奨されています

 

関連

画像を「自分でリサイズ」する場合、Windowsユーザーであれば標準搭載の画像編集ソフト「ペイント」が簡単でおすすめです ↓

「ペイント」の画像リサイズ方法と、jpg・png等を変換するやり方
「ペイント」の画像リサイズ方法と、jpg・png等を変換するやり方を初心者向けに解説。拡張子(ファイル形式)の変換方法【Windows10】

続きを見る

 

ということで…

 

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

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



 

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

WordPress ヘッダー c-05

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

一括最適化

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

 

まずは、WordPress管理画面の左側一覧から…

メディア > 一括最適化

をクリックします

 

「一括最適化」の画面が表示されたら、まず上部に表示されている注意メッセージの通り…

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

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

 
 

つづいて…

EWWW Image Optimizerの設定方法と使い方 1-3-01

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

 

画面が切り替わり、左上に「最適化できる画像が●●点あります」と表示されるので、最適化を行って問題なければ…

EWWW Image Optimizerの設定方法と使い方 1-3-02

↑ こちらの ●●点の画像を最適化 というボタンをクリックしましょう

 

すぐに「一括最適化」の処理が始まり、画面の左上に…

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

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

人気記事

 

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

”全8章” の総合TOPページです

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

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

ACTION AFFINGER6 バナー 01-300px

インフォトップ ワードプレステーマ売上

第1位

ACTION AFFINGER6

 

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

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

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

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

 

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

関連:【1番の本質】ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガー5年目が本気レビュー【愛用テーマ】

ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガーが本気レビュー
【1番の本質】ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガー5年目が本気レビュー【愛用テーマ】

続きを見る

※2021年発表Infotop Affidemy

About me

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

suzu azuki
あずき鈴々

 

独立5年目の専業ブロガー / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にいるので覗いてもらえると嬉しいです^^

-WORDPRESS