本記事には広告が含まれている場合があります ブログを始める

【初心者向け】EWWW Image Optimizerの使い方と初期設定|画像を自動で軽くする方法

EWWW Image Optimizer使い方 アイキャッチ

・画像の圧縮・最適化を自動でやってくれるプラグインって何?

・画面の圧縮をし忘れた時に自動でやってくれるプラグインってあるかな?

・初心者向けの簡単な使い方のものがいいな

moko
moko

ブログに画像をアップする前にサイズ変更・圧縮をしてからアップをしていましたが、

圧縮をするのを忘れてアップしてしまったことがありました。

画像の圧縮を忘れてしまってもEWWW Image Optimizerを使用すれば自動で圧縮をしてくれて最適化もしてくれます。

EWWW Image Optimizerの基本の初期設定について後で自分で見返せるように備忘録もかねてまとめました。

この記事はブログを始めたばかりの超初心者向けの内容になってます。

EWWW Image Optimizerの設定方法にすすむ

EWWW Image Optimizerについて

EWWW Image Optimizer」はWordPressのプラグインで、画像を圧縮して最適化することができます。

プラグインをインストールして有効化し初期設定をするとアップした画像を自動で圧縮・変換してくれます。

過去にアップした画像の一括最適化をすることができます。

また、画像の最適化の他に、初期設定でメタデータの削除を設定することで画像のメタ情報を自動で削除してくれるので個人情報を守ることもできます。

無料版と有料版がありますが、無料版の範囲で無制限に使用することができるので大変便利で、とても人気があるプラグインです。

無料版でできることをWordPress.orgより引用しました↓

これらすべてを無料で入手できます:

  • あらゆるサイズの画像を圧縮するための無限の画像最適化
  • ほとんどのウェブホストと互換性のあるローカル画像最適化モード
  • ロスレスJPG、PNG、GIF、SVG画像最適化(平均8%の節約)
  • すべてのウェブホストに対応したWebP変換(平均60%の節約)
  • どのプラグインからも画像を最適化できます
  • アップロード時やまとめて画像をリサイズしてください
  • レスポンシブ画像の自動スケーリング付きレイジーロード—レイアウトシフト防止(CLS)を防ぐために適切なサイズのプレースホルダーを使用します。
  • サムネイル画像をシャープして画質を良くする
  • JPGとWebPの品質調整(プレミアムでAVIF品質設定可能)
  • 個々のWordPressサムネイルの作成と最適化を制御する
  • 画像を最適なフォーマットに変換してください(GIFからPNG、PNGからJPGへ、またはその逆)
  • ローカルイメージバックアップ
  • サムネイル内のGIFアニメーションを保持する
  • 無料のメールサポート

引用元:EWWW画像オプティマイザー(WordPress.org)

ちょっと分かりにくいですが、EWWW Image Optimizerでは下記のことなどができます。

・画像アップ時に自動圧縮

・過去にアップした画像の一括最適化(圧縮・WebP 化)

・WebP / AVIF に自動変換

・可逆圧縮(かぎゃくあっしゅく)ロスレス圧縮

・画像のリサイズ(アップ時に指定サイズ以上の大きい画像を調節)

 

画像の自動圧縮や WebP変換をしてくれるのでサイトの表示速度が速くなり、SEOの向上にも効果があります。

 

可逆圧縮(かぎゃくあっしゅく)ロスレス圧縮について詳しく書かれてます↓

WebPについてはコチラをご参考ください↓

WebP【.webpファイル】(IT用語辞典 e-Words)

ブログをはじめるなら→エックスサーバーがおすすめです。

EWWW Image Optimizerの基本的な使い方の流れ(画像最適化の手順)

EWWW Image Optimizer基本的な使い方 簡単な流れ

  • 画像のリサイズ(サイズ変更)をする
  • ブログに圧縮をしていない画像or圧縮済みの画像をアップする
  • アップした画像をEWWW Image Optimizerが自動で最適化をしてくれる

画像(圧縮していないもの)をそのままアップすることで自動で圧縮してくれます。

1枚1枚事前に圧縮しなくてもいいので効率化ができます。

画像を更に圧縮をしたい場合は、他の圧縮できるソフトなどで画像をアップ前に手動で圧縮してアップすることもできます。

事前に手動で圧縮をしたものをアップする場合は画像の劣化に注意が必要です。

画像が大きいものや表示サイズより極端に大きい画像は、大きくて重いので小さくサイズ変更してからブログにアップします。

✳️画像が大きいものや表示サイズより極端に大きい画像

・一眼レフやミラーレスカメラで撮った写真、シュクショ、PNG画像など(5MB〜20MBのような大きい画像)

・高精度な写真、スマホで撮った写真など(4000px以上の画像)

画像サイズ(目安)

・アイキャッチ画像......1200px(横) × 630p(縦)

(SNSシェアされたときに画像がピッタリ表示され綺麗・Google Discoveの掲載条件)
・本文中の画像......800px (横)× 600px(縦)以内
・サムネイル画像.....150px(横) × 150px(縦)

記事に入れるところのサイズで作成します

自分のPC上の画像やWeb上の気になった画像のサイズ(容量・大きさ)などをすぐに調べたい場合は、「ラッコキーサーバープラス 画像サイズ確認ツール」が簡単です。

調べたい画像をドラッグしていれると、幅・高さ・比率・容量・形式が表示されます。画像ドラッグの他に、Web上の画像のURLをツールのURLに貼り付けることで調べることができ、画像のダウンロードをする必要がなく、インストール不要で無料で使えるので便利です。

Web上の画像のURLをツールのURLに貼り付ける方法:画像の上で右クリックする→画像アドレスをコピー →ラッコキーサーバープラス 画像サイズ確認ツール→URLに画像アドレスを貼り付ける→チェックをクリックすると解析情報が表示されます。

画像を事前に手動で圧縮・サイズ変更をしたい場合に便利です。よければ、あわせて読んでみてください↓

squooshの操作方法
【Spuoosh(スクーシュ)】画像圧縮ツールの使い方|初心者でも操作簡単!

続きを見る

EWWW Image Optimizerの設定方法の手順

Affinnger6での設定の仕方で記載しています。

EWWW Image Optimizerの設定方法の手順 簡単な流れ

  • EWWW Image Optimizerをインストールして有効化する
  • EWWW Image Optimizerの初期設定をする
  • EWWW Image Optimizerのインストール前にアップした画像の一括最適化をする
  • 画像アップ時に自動で最適化をしてくれる

初期設定を入力する前にバックアップをとる事をおすすめします。万が一失敗してしまった場合に元に戻すことができるので安心です。

moko
moko

EWWW Image Optimizerをインストールして有効化して初期設定まで終わらせておくことがおすすめです!

step
1
EWWW Image Optimizerをインストールして有効化する

インストール方法: +マーク→ダッシュボード→プラグイン→プラグインの追加をクリック→プラグインの検索にEWWW Image Optimizerと入力→EWWW Image Optimizerが表示される→今すぐインストールをクリック→有効化する
EWWW Image Optimizer使い方①

step
2
EWWW Image Optimizerの基本の初期設定「必須タグ」の設定をする

初心者向け基本設定

  • メタデータの削除(写真には撮影日・位置情報(GPS)などが含まれています)にチェックを入れる
  • 遅延読み込みのチェックを外す(必要な場合)
  • WebP変換にチェックを入れる
  • WebPの配信方法の設定をする
  • 画面のリサイズのサイズ設定(必要な場合)
  • 既存画像の最適化
  •     

ダッシュボード→設定→EWWW Image Optimizerをクリックして設定画面→初期設定「必須タグ」を開きます。

必須タグ」設定手順:

①メタデータを削除→チェックを入れます。(または、チェックが入っているか確認します)メタ情報を削除するとファイルサイズが軽くなります。

②遅延読み込み→WordPressのテーマによっては機能の重複になる場合はチェックを外します。

テーマに機能が付随している場合はプラグインの機能をOFFにします。

テーマに機能が付いていない場合はチェックを入れます。

EWWW Image Optimizer使い方②

③WebP変換→チェックを入れます。

④WebPの配信方法→リライトルールを挿入する→必要なコードが自動的に.htaccessファイルに追加→WebPルールが正常に検証されましたと表示される→緑のWebPボタンが表示されいるか確認する。(緑のボタンが表示されていれば設定できています)

EWWW Image Optimizer使い方③

⑤画面のリサイズ設定

事前に画像を手動でサイズ変更しブログにアップしている場合は設定は不要になります。

事前にサイズ変更をしていない場合は、画像のリサイズ設定をするとアップ時に指定サイズ以上の画面は自動で縮小をしてくれます。

設定手順:必須タブMax Image Dimensions →幅の上限高さの上限にサイズを入力する

幅の上限・高さ上限のサイズは、アップする画像サイズが決まっている場合はそのサイズを入力しておくと指定したサイズに自動で調節してくれます。

最後に忘れずに、画面一番下に表示されている 「変更を保存」をクリックします!

WebPで配信されているか確認するには、

プレビュー→画像を右クリック→名前を付けて画面を保存→ファイルの種類 WEBPファイルで確認できます。

step
3
過去にアップした画像を一括最適化をするには

EWWW Image Optimizerをインストール前にアップした画像は自動で最適化されないので、一度、全画像を一括最適化をします。

設定手順:ダッシュボード→メディア→一括最適化最適化されていない画像をスキャンする最適化できる画像数は表示されるのでクリックする→最適化が完了し最適化ログが表示されます。

最適化済みの画像一覧が表示され最適化の状況が分かります。

最適化済みの画像一覧のファイル名のところに、オリジナル復元と言う項目があります。ここをクリックすると元の画像に戻すことができます。

画像の最適化済みを確認するには

アップした画像が最適化されているか確認するには、

ダッシュボード→設定→EWWW Image Optimizer→最適化済み画像を表示(画面の右上あたりボタンがあります)をクリックします

ダッシュボード→メディアでも最適化の状況を確認することができます)

まとめ EWWW Image Optimizerで画像の最適化をラクにできます(初心者向け)

EWWW Image Optimizerの基本の初期設定の仕方について記載しました。

初期設定をしておけば自動で画像のアップ時に圧縮・最適化をしてくれます。

画像に含まれているメタ情報の削除もしてくれるので、個人のブログ運営時の安心につながります。

ブログで画像をアップする際に役立つプラグインなので、良かったら活用してみてください。

ブログを始めたばかりの方、これからブログを始めたい方に少しでも参考になればうれしいです。

EWWW Image Optimizer基本的な使い方 簡単な流れ

  • 画像のリサイズ(サイズ変更)をする
  • ブログに圧縮をしていない画像or圧縮済みの画像をアップする
  • EWWW Image Optimizerが自動で最適化をしてくれる

EWWW Image Optimizerの設定方法 簡単な流れ

  • EWWW Image Optimizerをインストールして有効化する
  • EWWW Image Optimizerの初期設定をする
  • EWWW Image Optimizerのインストール前にアップした画像の一括最適化をする
  • 画像アップ時に自動で最適化をしてくれる

「EWWW Image Optimizer」をはじめから読む

WordPressのインストールもできます ∥


ヒトデさんの本で、ブログをstartさせたい方におすすめです。

初心者の方でもとても分かりやすいです↓


  • この記事を書いた人

moko

mokoといいます。

-ブログを始める