WordPress

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

ewww image optimizer 設定

こんにちは、りゅうのすけ(@k_r001)です。

この記事では、画像圧縮プラグイン「EWWW Image Optimizer」の設定方法と使い方についてまとめました。

 

  • ブログの画像を軽くしたい
  • 画像圧縮せずに画像をアップロードしちゃった
  • EWWW Image Optimizerの使い方を知りたい

 

こういった方に向けて、書いています。

 

\このサイトの表示速度/
ewww image optimizer 設定

モバイルでの表示速度が97点に達しているので、参考になると思います。

EWWW Image Optimizerとは?

ewww image optimizer 設定

EWWW Image Optimizer」は、画像を最適化させるプラグインです。

「EWWW Image Optimizer」を入れておけば、アップロードした画像を自動で圧縮することができます。

 

また、すでにアップロードされている画像に関しても、一括で最適化することが可能です。

 

画像を圧縮してアップロードしてたとしてもさらに圧縮できるのでおすすめです!

EWWW Image Optimizerのインストール

まずは、「EWWW Image Optimizer」をインストールしましょう。

 

取得場所は、プラグイン ➡︎ 新規追加でWordPress内にインストールできます。

 

EWWW Image Optimizer 設定

インストールできたら有効化しましょう。

ダウンロードしたい方は、下記URLより取得できます。

 

\EWWW Image Optimizer取得/

 

EWWW Image Optimizerの設定

ewww image optimizer 設定

EWWW Image Optimizer」を追加できたら設定していきましょう。

 

設定の場所は、「設定」➡︎「EWWW Image Optimizer」にあります。

 

有効化するだけでは意味がないのでちゃんと設定を行いましょう。

EWWW Image Optimizerの初期設定

ewww image optimizer 設定

EWWW Image Optimizer」の設定画面でまずは初期設定を行いましょう。

下記3つにチェックを入れます。
 

  • Speed up your site➡︎サイトのスピードアップ
  • Save storage space➡︎ストレージスピードを節約
  • Stick with free mode for now➡︎無料で使える部分だけ使う。

 
英語表記だと意味がわからないので、右側に日本語訳を書いてます。

チェックを入れたらNEXTを押しましょう。

ewww image optimizer 設定

WebP 変換にチェックを入れましょう。

 

WebPって?
WebPは既存の拡張子「JPEG」や「PNG」と比較しても、約30%近く容量を節約できる新しい拡張子です。

詳細:WebP

拡張子は、画像の名前の「.」の後につくものが拡張子です。

 

チェックができたら「Save Settings」を押せば初期設定完了です。

EWWW Image Optimizerで画像の遅延読み込み

ewww image optimizer 設定

画像の遅延読み込みは、「Lazy-load」の機能ですが、「EWWW Image Optimizer」でも設定可能です。

 

設定 ➡︎ EWWW Image Optimizerで設定画面を開きます。

 

遅延読み込みの中にある

 

画像が表示領域に入った(または入ろうとしている)時にだけ読み込まれるため、読み込み速度を改善します。

 

にチェックを入れます。

ewww image optimizer 設定

Autoptimize」にも同じ機能があります。

同じ機能が複数あると、干渉しあってエラーの原因になるので、使うのはどちらか一つにしましょう。

 

\Autoptimizeの設定手順まとめ/

 

変換リンクを非表示

ewww image optimizer 設定

変換リンクを非表示にしておきましょう。

そうすることで、拡張子が勝手に変換されるということがなくなります。

 

拡張子が変換されてしまうと画像の質が悪くなったり、PNGの背景透過が外れてしまうことがあります。

 

そうならないためにも設定は必ず行いましょう。

ewww image optimizer 設定

 

\変換リンクを非表示の設定手順/
  1. 「Enable Ludicrous Mode」を押します。
  2. 変換
  3. 変換リンクを非表示にチェック
  4. 変更を保存

 

ewww image optimizer 設定

これで、「EWWW Image Optimizer」の設定は完了です。

EWWW Image Optimizerの使い方

ewww image optimizer 設定

EWWW Image Optimizer」では、画像の圧縮を行います。

 

画像の圧縮を行うには、メディア ➡︎ ライブラリ で圧縮できます。

 

アイコン表示の場合

ewww image optimizer 設定

まずは画像を選択しましょう。

右下に圧縮率など変換する項目があります。

圧縮率を調整して圧縮すれば、好みのサイズに圧縮できます。

ewww image optimizer 設定

リスト表示の場合

ewww image optimizer 設定

画像右側に、再最適化とあります。

ここを押せば画像の最適化は完了です。

この方法では面倒なので、一括最適化を使いましょう。

EWWW Image Optimizerで画像の一括最適化

ewww image optimizer 設定

EWWW Image Optimizer」で画像の一括最適化を行えば、これまでアップロードしていた画像を一括で最適化することができます。

 

\一括最適化の手順/

メディア ➡︎ 一括最適化➡︎最適化されていない画像をスキャンする

 

これで画像の最適化は完了です。

 

アップロードした画像が多い場合は時間がかかるので、最初の最適化は時間に余裕がある時に行いましょう。

 

次からアップロードする画像に関しては自動で最適化されるので、今後は最適化の必要はありません。

さらに表示速度を上げるには

ewww image optimizer 設定

表示速度をさらに高速化させるためには、事前にアップロードする画像を圧縮しておきましょう。

先に圧縮するのと、「EWWW Image Optimizer」のみで圧縮するのでは、圧縮率も違ってくるので必ず先に圧縮しておきましょう。

一度アップロードした画像の圧縮はできません。

一度アップロードした画像の再ダウンロード方法は、⬇︎下記記事でまとめてます。

 

\WordPressの画像ダウンロード/

 

ダウンロードした画像を圧縮して再アップロードしましょう。

画像を再アップロードするのが面倒な場合は、「EWWW Image Optimizer」で圧縮しましょう。

 

\画像圧縮の最適な手順まとめ/

 

まとめ

EWWW Image Optimizer」を使うだけで、圧縮し忘れた画像や、すでに圧縮した画像も最適化することができます。

ブログ記事の表示速度にとことんこだわって使い勝手のいいブログに仕上げましょう。

 

\WordPressの高速化/

 

参考にしてみてください。

最後まで見ていただき、ありがとうございました。
 

ABOUT ME
りゅうのすけ
高校卒業後、地元香川で就職、一度転職を経て現在はブロガーとして活動してます。 投資をしたり、MLMに騙されそうになった経験をもとに、ブログを書いています。
PS.

記事が有益だなと思った方は、サポートしていただけるとやる気出ます。
 

\1円からのドネーション/

仕事依頼

 

\WordPress開設依頼/

公式LINE

 

\公式LINEもやってます/
公式LINE無料プレゼント

 

  • ワンクリックで登録可能
  • 個人情報はこちらからわからないようになっているのでご安心を

 

こんな人におすすめ
  • ブログを進めていく上でわからないことがある
  • 設定など誰か相談できる人が欲しい
  • 記事ネタに困った時に情報収集したい
  • ブロガー仲間が欲しい

 
困っていることなど直接相談できる場所になってますので、登録しておくといいですよ!
 

登録者特典

 

公式LINE@無料プレゼント
  1. 限定公開記事の共通パスワード配布
    • ブログ内の限定公開記事のパスワードを配布してます。
  2. サイト作成依頼クーポンコード
    • サイト作成依頼時に使えるクーポンコードを配布します。
  3. ブログスターターキット
    • ブログに必要な便利ツール、イラストなど随時更新
  4. 完全個別無料相談
    • ブログについて、1日1人限定で無料相談を受けてます。
      (営業を仕掛けるのはやめてください。)

 

\友達追加しますと、下記のメニューが表示されます。/
公式LINEリッチメニュー

 
各ボタンをポチポチ押すことで欲しい情報だけで情報を取得できるので便利ですよ!