あずきです🐥
WordPressにおける定番プラグインの1つで、2021年くらいに「バージョン 6.0.0」の大型アップデートが行われた…
EWWW Image Optimizer
について、その導入手順と「基本的な設定方法・使い方」をブログ初心者さん向けに1から解説していきます
まず…
この「EWWW Image Optimizer」は、WordPressにアップロードした画像を自動で「圧縮」するためのプラグインです
ちなみに！
ここで言う「画像のサイズ」というのは、横幅・高さ（例 1024px・700px ）の…
px＝ピクセル数
のことではなく…
ファイルサイズ＝容量
のことを指します（例 150KB, 2MB ）
補足
画像の容量というのは、「ファイルサイズ」の圧縮以外にも、横幅・高さの「ピクセル数」をリサイズ＝縮小することで、大幅に軽減させられます
通常は、「画像の容量によってページ表示が重たくなる」のを防ぐために…
- 「ファイルサイズ」を圧縮
- 「ピクセル数」をリサイズ
この2つを併用して「容量を軽減させる」のが一般的です
「EWWW Image Optimizer」では、「ファイルサイズの圧縮」というメイン機能に加えて…
ピクセル数の自動リサイズ
というサブ機能も付属されていて、こちらの設定方法もあわせてご紹介していきます
ということで、今回のステップは大きく「3つ」です
- 「EWWW Image Optimizer」の導入手順【インストールと有効化】
- 「EWWW Image Optimizer」の基本的な設定方法【自動圧縮／自動リサイズ】
- すでにアップロードしてある画像を「まとめて圧縮」するやり方【一括最適化】
さっそく見ていきましょー🐥
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中！！！
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます
【2021年】「EWWW Image Optimizer」の設定方法と使い方を初心者向けに解説【WordPressプラグイン／画像を自動圧縮してサイト高速化】
ステップ１：プラグイン「EWWW Image Optimizer」をWordPressに導入する手順【インストール＆有効化】
注意
プラグインを使用することで、ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります。 プラグインの使用に際しては、あらかじめデータやファイルをバックアップされたうえで、ご自身の責任にて行ってください
はじめに…
プラグイン「EWWW Image Optimizer」の導入手順
について
WordPress管理画面の左側にある一覧メニューから…
↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう
つづいて、画面の右上にある…
↑ こちらの検索フォームに EWWW Image Optimizer と入力し、その下の検索結果から…
↑ このアイコンが目印のプラグイン「EWWW Image Optimizer」を探し、右上の「今すぐインストール」ボタンをクリックします
「今すぐインストール」ボタンが「有効化」という表示に切り替わったら、つづいて「有効化」ボタンもクリックしましょう
↑「プラグインを有効化しました。」と表示されたら、プラグインの「インストール＆有効化」は完了です
ステップ２：プラグイン「EWWW Image Optimizer」の基本的な設定方法【自動圧縮／自動リサイズ】
つづいて2つ目のステップは…
「EWWW Image Optimizer」の基本的な設定方法
について
具体的には、「2つ」の設定パートにわけて解説していきます
- 「EWWW Image Optimizer」のメイン設定
- 「EWWW Image Optimizer」の付属機能である、「自動リサイズ」の設定方法
【設定1】「EWWW Image Optimizer」のメイン設定
WordPress管理画面の左側にある一覧メニューから…
↑ 設定 ＞ EWWW Image Optimizer をクリックします
初めて「EWWW Image Optimizer」を有効化したときに限り、通常の設定画面ではなく…
↑ こちらの初期設定画面が表示されます
選択は任意ですが、基本的には…
↑ こちらの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キー」を始めとする認証画面のような表示になったので、こちらはいわゆる【有料版】と思われます
ということで…
ここまで選択できたら、左下の…
↑「Next」ボタンをクリックしましょう
つづいて…
↑ このような設定画面が表示されます
まず、上側にある…
↑ この3項目については、通常…
↑ こちらの…
- メタデータを削除
- 遅延読み込み
の2つにチェックを入れておけば無難です
「メタデータ」というのは、画像ファイルごとで記録されている撮影場所やカメラ情報などのことを言います
「遅延読み込み」というのは、初めて聞いた人にとってはマイナスな機能にも思えるかもしれませんが、むしろこの機能によって「ページ表示の高速化」が期待できます
関連
「画像の遅延読み込み」については、こちらをどうぞ ↓
-
【2021年】WordPress高速化におすすめな方法「7選」を初心者向けに1から解説【ブログを最適化してサイトスピード向上】
続きを見る
つづいてその下にある…
↑「幅の上限」と「高さ上限」についてですが、これが冒頭でもお伝えした「EWWW Image Optimizer」のサブ機能である…
画像の「ピクセル数」を自動リサイズ
する機能になります
ただし！
この初期設定の段階では、ブログ画像における代表的な「ピクセル数」の1つである…
幅 1024px
という数値が、なぜか設定できないんですね
なのでこの時点では、一旦…
↑ このように、「幅」と「高さ」のいずれも ”0” にしておけばOKです
重要
上記の「自動リサイズ」については、この初期設定を一通り済ませたら表示できるようになる「通常の設定画面」からであれば、幅「1024px」という定番の数値を指定できるようになります
具体的な設定手順については、この次のパートでご紹介していきます
最後に、その下にある…
↑ こちらの、英語で表記されている2つの項目について
ここの選択も任意ですが、自分は…
↑ このように、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％の割引コードを取得する
といった意味です
ということで、ここまで設定できたら左下の…
↑「Save Settings」ボタンをクリックしましょう
つづいて…
↑「Done」ボタンをクリックします
表示画面が…
↑ このような画面に切り替わったら、【メイン設定】については完了です
補足
今後は WordPress管理画面 ＞ 設定 ＞ EWWW Image Optimizer をクリックすると、さきほどの「初期設定」画面ではなく、こちらの「通常」画面が表示されるようになります
これで今後WordPressにアップロードする画像については、「ファイルサイズ＝容量」が…
自動で圧縮
されるようになります
とはいえ…
実際にどれくらい圧縮されているのか？
気になるかもしれないですよね
ということで！
「自動圧縮」の稼働状況をチェックするやり方について、サクッとご紹介しておきます🐣
WordPress管理画面の一覧メニューから…
↑ メディア ＞ ライブラリ をクリックしましょう
つづいて、左上に表示されている…
↑ こちらの「リスト」型アイコンをクリックします
すると、今までWordPressにアップした画像が一覧表示されるので、その右側にある…
↑ こちらの、「画像最適化」という列を見てみましょう
まず、「EWWW Image Optimizer」の導入以降にアップロードした画像については…
↑ このように、画像のファイルサイズが自動で「すでに圧縮済み」ということがわかります
一方で！
「EWWW Image Optimizer」を導入する以前からアップロードしていた画像については、「自動圧縮」が行われていないので…
↑ このように「圧縮します」という表記になっています
つまり…
- 「EWWW Image Optimizer」の導入以降にアップロードしている画像 → 勝手に圧縮してくれるので、なにもしなくてOK！
- 「EWWW Image Optimizer」の導入以前からアップロードしていた画像 → 自動圧縮の対象外なので、「手動」で圧縮をかける必要がある！
ということですね
で！
後者の、「EWWW Image Optimizer」導入以前からアップロードしていた画像については…
一括最適化
という機能を使うことで、すべての画像を「まとめて圧縮」することができます
その前に…
さきほどの【メイン設定】を済ませたら、セットで忘れずに行っておきたい「自動リサイズ設定」のやり方について、次パートで見ていきましょう🐥
【設定2】「EWWW Image Optimizer」の付属機能である、「自動リサイズ」の設定方法
プラグイン「EWWW Image Optimizer」のメイン機能は、あくまで…
画像ファイルサイズの圧縮
ですが、冒頭でもお伝えした通り、もう1つ…
ピクセル数の自動リサイズ
という付属機能もあります
さきほどの【メイン設定】をおえたら、またWordPress管理画面の一覧メニューから…
↑ 設定 ＞ EWWW Image Optimizer をクリックしましょう
まず、画面の上部に並んでいるタブについては…
↑ こちらの「基本」タブのままでOKです
この「基本」タブのなかにある…
↑「画像のリサイズ」という項目で、自動リサイズの具体的な数値（px＝ピクセル数）を指定することができます
まずは「幅の上限」側に、任意の…
px（＝ピクセル数）
を入力しましょう
ちなみに！
「ピクセル数とか言われても正直さっぱり…」という場合は、上の画像例のように…
1024
という数値が、ブログ画像における「幅の上限」としては、わりと定番になります
またその場合、右側の「高さ上限」については…
0
のままがおすすめです
関連
ただし！
「いつも画像編集ソフトを使って自分でリサイズしてからWordPressにアップしてる！」という場合であれば、この「自動リサイズ」はもちろん不要なので、その場合は…
幅 0 / 高さ 0
のままにしておきましょう
関連
ということで…
設定を変更した場合は「変更を保存」ボタンを忘れずにクリックして、この【画像の自動リサイズ設定】についても完了です🐥
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中！！！
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます
ステップ３：「EWWW Image Optimizer」を有効化する前からアップロードしてある画像を、「まとめて圧縮」するやり方【画像ファイルサイズの一括最適化】
最後の3つ目のステップは、「EWWW Image Optimizer」を導入する以前からアップロードしていた画像を「まとめて」圧縮にかける…
一括最適化
という機能のやり方について
WordPress管理画面の一覧メニューから…
↑ メディア ＞ 一括最適化 をクリックしましょう
すると…
↑ このような画面になります
まず、画面の上部に表示されている注意メッセージの通り…
「一括最適化」を行った画像は元に戻すことができない
という旨を了承したうえで、あらかじめ「画像のバックアップ」をとっておきましょう
つづいて…
↑ こちらの、「最適化されていない画像をスキャンする」というボタンをクリックします
画面が切り替わり、左上に「最適化できる画像が●●点あります」というメッセージが表示されるので、このまま最適化をスタートして問題なければ…
↑ こちらの…
●●点の画像を最適化
というボタンをクリックします
すぐに「一括最適化」の処理が始まって…
↑ こちらの画面左上に…
↑ このように…
- 完了
- 最適化済み ●●/●●（例 21 / 21 ）
と表示されれば、アップロード済み画像の「一括最適化」も完了です🐥
今回の記事はこちらの章に属しています
次の章はこちらからどうぞ
全９章のTOPページです
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性！
✔ 時間のかかる面倒なカスタマイズも「クリック１つ」でさくさく実現！
✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能！
今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中！！！
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます
-
【2021年】WordPressのクラシックエディタとグーテンベルグとは？プラグイン「Classic Editor」の導入方法まで1から解説
続きを見る
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020