EWWW Image Optimizerのインストールから設定方法と使い方まで徹底解説

「EWWW Image Optimizer」は画像ファイルを自動で圧縮、最適化してサイトの読み込み速度を向上させサイトの表示速度を改善してくれるプラグインです。初期にインストールを推奨する大事なプラグインの1つでもあります。この便利なプラグインのインストール方法から設定方法と使い方を徹底的に解説していきます。と言っても簡単なので安心してください。

EWWW Image Optimizerを設定する時の注意点

まず最初に1つだけ注意点があります。「EWWW Image Optimizer」はサイトの読み込みを速くしてくれる便利なプラグインですが、いくらサイトを軽くしたいからと設定を欲張ると思わぬトラブルが発生する可能性があるので注意が必要です。私も設定を欲張り困った事が何度もあります。

今回のEWWW Image Optimizerの設定の影響で、サイトのプロフィール画像や記事一覧のアイキャッチ画像、吹き出しのアイコン画像などの周りが謎の点線枠で囲まれてしまい、一時、見るも無残なデザインのサイトになってしまいました。

結局、EWWW Image Optimizerの設定が原因でした。では、その現象が直った設定方法と使い方を早速ご紹介していきます。

EWWW Image Optimizerのインストール方法

インストールしたい方はWordPressのプラグイン新規追加で「EWWW Image Optimizer」と入力してインストールして有効化します。またはこちらからダウンロードします。では、設定方法を解説していきます。

EWWW Image Optimizer「Bacic」(一般設定)の設定方法

まず、一番左のタブ「Bacic」これは一般設定です。チェックするのは「Remove meta date」だけです。メタデータの削除ですね。その下はお好みで設定してください。下記はGIFとPDFが無圧縮になっていますが、上の2つと同じようにPixel Perfectで大丈夫です。完了したら下の青いボタン「変更を保存」をクリックしてください。

EWWW Image Optimizerの設定方法basic

EWWW Image Optimizer「ExactDN」(一般設定)の設定方法

次に左から2番目のタブの「ExactDN」の設定方法です。一番上の「DNを使いページに自動的にフィットするように画像のリサイズを有効化する」のチェックを外します。他はチェックが入っていて大丈夫です。完了したら変更を保存ボタンをクリックします。

私の場合、この一番上のチェックを外して、次の「高度な設定」のチェックを外したら今回の画像の周りが点線枠で囲まれてしまう現象が直りました。

EWWW Image Optimizerの設定方法ExactDN

 

EWWW Image Optimizer「Advanced」(高度な設定)の設定方法

次に左から3番目のタブの「Advanced」高度な設定です。ノーチェックでOKです。変更があれば変更を保存ボタンをクリックします。

画像が点線枠で囲まれてしまうトラブルの原因は、先程の「DNを使ったリサイズ有効化の設定」と、この「高度な設定」にありました。私の場合は一番上に数字が入っていて、他にチェックが入っている箇所があったので外しました。

EWWW Image Optimizerの設定方法advanced

 

EWWW Image Optimizer「リサイズ」の設定方法

続いて左から4番目の「リサイズ」もノーチェックでOKです。同じく変更があれば変更を保存ボタンをクリック。

EWWW Image Optimizerの設定方法リサイズ

EWWW Image Optimizer「Convert」(変換の設定)の設定方法

最後の設定です。左から5番目のタブ「Convert」変換の設定です。

一番上の「コンバージョンリンクを非表示」にチェックが入っていればOKです。あとはノーチェックでOKです。

私は一番下の「GIF to PNG Conversion」にチェックが入っていますが、これはGIFをPNGに変換する設定です。お好みで設定してください。GIFを表示させたければノーチェックでOKです。

完了したら変更を保存ボタンをクリックして終了です。

EWWW Image Optimizerの設定方法convert

お疲れ様でした。設定は以上です。今回「EWWW Image Optimizer」を導入した方は、以降の画像の圧縮はEWWW Image Optimizerが自動で行ってくれます。

EWWWを導入したら過去にアップロードした画像を最適化しましょう。一括ワンクリックで最適化できるので簡単です。

EWWW Image Optimizerで画像を一括最適化する方法

ダッシュボードの「メディア」から「一括最適化」をクリック。下記画面で「最適化されていない画像をスキャンする」をクリックしてスキャン完了したら「最適化を開始」をクリックします。

私はすでにEWWW Image Optimizerを導入済みで自動で画像が最適化されているので、スキャンしても最適化されていない画像は「0」で「最適化を開始」は表示されません。

ewwwメディアから一括最適化画像

 

簡単ですね。あとは自動で画像を最適化してくれるので放置でOKです。

まとめ

 

今回も最後までお読み頂きありがとうございました。

今日も良い一日をお過ごしください。

-WordPress, プラグイン
-