広告 WORDPRESS

EWWW Image Optimizerのおすすめな設定方法&使い方を画像たっぷりで徹底解説【WordPressの画像圧縮・最適化プラグイン】

EWWW Image Optimizerのおすすめな設定方法&使い方を画像たっぷりで徹底解説【WordPressの画像圧縮・最適化プラグイン】

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

専業ブロガー7年目のあかね猫です

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

EWWW Image Optimizer

の導入手順からおすすめな設定方法&使い方まで、実際の画像たっぷりでブログ初心者さん向けに徹底解説していきます

 



 

EWWW Image Optimizerのおすすめな設定方法&使い方を画像たっぷりで徹底解説【WordPressの画像圧縮・最適化プラグイン】 top-01

 

「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. すでにアップロードしてある画像を「まとめて圧縮」するやり方(一括最適化)
さっそく見ていこー!

EWWW Image Optimizerのおすすめな設定方法&使い方を画像たっぷりで徹底解説【WordPressの画像圧縮・最適化プラグイン】

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

WordPress ヘッダー c-01

はじめに

 

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

BackWPupのおすすめな設定方法&使い方を約30枚の画像付きで徹底解説【WordPressの自動バックアッププラグイン】
BackWPupのおすすめな設定方法&使い方を約30枚の画像付きで徹底解説【WordPressの自動バックアッププラグイン】

続きを見る

 

はじめに…

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

について

 

WordPress管理画面の左側一覧から…

WordPressプラグインの導入手順(インストールと有効化) 1-01

↑【プラグイン】という項目にカーソルを合わせ、その右側に表示される【新規追加】をクリックしましょう

 

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

WordPressプラグインの導入手順(インストールと有効化) 1-02

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

EWWW Image Optimizerのおすすめな設定方法&使い方を画像たっぷりで徹底解説【WordPressの画像圧縮・最適化プラグイン】 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のおすすめな設定方法&使い方を画像たっぷりで徹底解説【WordPressの画像圧縮・最適化プラグイン】 1-2-1-top

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

 

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

EWWW Image Optimizerのおすすめな設定方法&使い方を画像たっぷりで徹底解説【WordPressの画像圧縮・最適化プラグイン】 1-2-1-01

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

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

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

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

すると…

EWWW Image Optimizerのおすすめな設定方法&使い方を画像たっぷりで徹底解説【WordPressの画像圧縮・最適化プラグイン】 1-2-1-02

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

  • メタデータを削除 → チェックあり
  • 遅延読み込み → チェックあり
  • 幅の上限 → 0
  • 高さの上限 → 0
  • 埋め込みヘルプ(Embedded Help) → チェックなし
  • 匿名の報告(Anonymous Reporting) → 任意(当ブログはチェックなしにしています)

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

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

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

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

 

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

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

 

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

WordPressの高速化におすすめな方法6選を初心者向けにわかりやすく解説【サイトスピード向上】
WordPressの高速化におすすめな方法6選を初心者向けにわかりやすく解説【サイトスピード向上】

続きを見る

 

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

冒頭でもお伝えした「EWWW Image Optimizer」に備わっている機能の1つ、画像ファイルを「自動リサイズ」する設定になります

 

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

幅 1024px

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

 

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

0

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

 

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

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

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

こちらは通常使用しない項目なので、「OFF」でOKです

 

「匿名の報告」について

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

 

ということで…

 

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

 

つづいて…

EWWW Image Optimizerのおすすめな設定方法&使い方を画像たっぷりで徹底解説【WordPressの画像圧縮・最適化プラグイン】 1-2-1-03

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

EWWW Image Optimizerのおすすめな設定方法&使い方を画像たっぷりで徹底解説【WordPressの画像圧縮・最適化プラグイン】 1-2-1-03

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

 

補足

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

設定 > EWWW Image Optimizer

をクリックすると、上画像のように「通常の設定画面」が表示されるようになります

 

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

自動で圧縮

される形です

 

ちなみに!

 

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

一括最適化

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

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

その前に…

 

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

 



 

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

WordPress ヘッダー c-04

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

「ファイルサイズ」の圧縮

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

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

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

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

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

設定 > EWWW Image Optimizer

を再度開きましょう

 

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

EWWW Image Optimizerのおすすめな設定方法&使い方を画像たっぷりで徹底解説【WordPressの画像圧縮・最適化プラグイン】 1-2-2-01

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

 

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

EWWW Image Optimizerのおすすめな設定方法&使い方を画像たっぷりで徹底解説【WordPressの画像圧縮・最適化プラグイン】 1-2-2-02

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

 

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

 

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

1024

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

 

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

0

のままがおすすめです

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

ただし!

 

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

幅:0 / 高さ:0

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

 

補足

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

横幅 1024px

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

 

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

  • 画質を優先させたい画像(例:アイキャッチ画像) → 横幅 1024px
  • そのほかの通常画像 → 横幅 700px

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

 

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

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

 

関連

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

「ペイント」で画像をリサイズ&「jpg・png」などを変換する方法。拡張子(ファイル形式)の変更手順【Windows10/初心者向け】
「ペイント」で画像をリサイズ&「jpg・png」などを変換する方法。拡張子(ファイル形式)の変更手順【Windows10/初心者向け】

続きを見る

 

ということで…

 

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

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



 

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

WordPress ヘッダー c-05

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

一括最適化

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

 

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

メディア > 一括最適化

をクリックします

 

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

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

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

 
 

つづいて…

EWWW Image Optimizerのおすすめな設定方法&使い方を画像たっぷりで徹底解説【WordPressの画像圧縮・最適化プラグイン】 1-3-01

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

 

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

EWWW Image Optimizerのおすすめな設定方法&使い方を画像たっぷりで徹底解説【WordPressの画像圧縮・最適化プラグイン】 1-3-02

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

 

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

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

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

人気記事

 
 

各章のTOPページを【ブックマーク】などしておくと、迷わずスムーズに進められます

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

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

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

 
プロフィールカード bg-01
プロフィールカードアイコン main-02

あかね猫

専業ブロガー7年目 / 元アパレル(歴10年)/ 2024年からYouTubeも本格的に始めました!(旅行系チャンネル)

少しでも参考になりましたら、
\ シェアしていただけると励みになります!! /

-WORDPRESS