ブログ初心者

「EWWW Image Optimizer」の最新設定方法と使い方&WebP化のやり方も【画像の自動圧縮プラグイン】

「EWWW Image Optimizer」の最新設定方法と使い方【画像の自動圧縮プラグイン】

・サイトが重くてなかなか表示されない
・画像を圧縮するにはどうしたらいいのかな?
・EWWW Image Optimizerって便利なの?使い方を教えて欲しい

このような悩みにお答えします。

画像のファイルサイズはサイトの表示速度に影響を与えます。

そこで今回は、画像を圧縮して最適なデータサイズにしてくれるWordPressのプラグイン「EWWW Image Optimizer」の設定方法と使い方を紹介します。

画像サイズの軽量化を自動で行ってくれるのでサイトを作ったら必ず入れておきたいプラグインです。

この記事の内容

  • EWWW Image Optimizerをインストールし有効化
  • EWWW Image Optimizerの初期画面の設定
  • EWWW Image Optimizerの基本設定
  • EWWW Image Optimizerの使い方
  • 時世代フォーマットWebPに変換しさらに画像を軽量化!

ここでいう画像サイズとは、3MBとか250KBの画像容量のことを差します。画像容量が小さいほど記事ページの表示速度が早くなります。

「EWWW Image Optimizer」はインストールして設定してしまえば、今後Wordpressにアップロードする画像サイズを自動で小さくしてくれるので、1枚1枚データ容量を小さくする手間が省けます。

ではさっそくその導入方法と使い方を説明していきます!

「EWWW Image Optimizer」をインストールし有効化

まず、管理画面から「プラグイン」→「新規追加」へとすすみ、EWWW Image Optimizerをインストールします。有効化もしてしまいしょう!

プラグインインストール

MEMO

「EWWW Image Optimizer Cloud」というプラグインも検索ヒットします。性能的にはCloudの方が上のようですが設定がややこしいので、定番の「EWWW Image Optimizer」の利用をおすすめします。こちらの性能だけで十分です!

「EWWW Image Optimizer」の初期画面の設定

それではさっそく設定していきましょう!

step
1
「設定」→「EWWW Image Optimizer」を選択

設定からEWWWImageOptimizerを選ぶ

step
2
一番初めの選択画面

インストール後に初めて設定するときに限り以下の画面が表示されます↓

インストール後の初設定画面

以下3つにチェックを入れましょう。

ewww image初期設定画面
  • サイトの高速化
  • ストレージの節約
  • 無料モードで利用

ちなみに「Activate 5x more optimization and priority support」というのは、5倍速で最適化をしてくれる有料サポートです。

step
3
2番目の選択画面

チェックを入れるのは2つだけです。

ewww image初期設定の選択項目
  • メタデータを削除:画像ファイルに付帯している「編集者、作成日、保存場所」などの情報を削除することでデータ容量を軽くする
  • 遅延読み込み:画面のスクロールに応じて必要な分だけの画像を随時表示していく

MEMO

「WebP」とは、PNGやJPEGより圧縮性の高い次世代の画像フォーマットのことです。あとからいつでも設定可能なので初めは外しておけばOKです。この記事の最後に設定の仕方を説明しています。

「メタデータの削除」と「遅延読み込み」の2つにチェックを入れたら「設定を保存」をクリックします。

下の画面になったら「完了」をクリック。

完了をクリッック

「EWWW Image Optimizer」の基本設定

初期画面の設定が終わったら次に、基本設定をします。かんたんなのでさくっと終わりますよ!

管理画面の「設定」→「EWWW Image Optimizer」で設定できます。

step
1
画像のリサイズ

画像の幅・高さをリサイズすることで、データ容量がさらに軽くなります。

画像のリサイズ

「幅の上限」側に、任意の横幅サイズを入れます。

わたしは画像の横幅を1200pixelにしていますが、1024pixelでも1500pixelでも大丈夫です。
ただし1024pixelより小さい数字はやめておきましょう!
初期設定の1920pixelのままでもOKですよ!

「高さ上限」は、「0」にしておけば「幅」の縮小比率に合わせて自動でリサイズしてくれるので「0」がおすすめです。

変更をしたら必ず「変更を保存」をクリックしましょう!

step
2
「変換」の設定

「Enable Ludicrous Mode」という部分をクリックし、詳細設定の画面に切りかえます。

基本設定から詳細設定へ

「変換」タブをクリックし、「変換リンクを非表示」にチェックを入れましょう。

変換リンクを非表示

この設定をすることで「jpg」→「png」や「png」→「jpg」のように、画像形式の拡張子が勝手に変換されないようになります。

これでEWWW Image Optimizerの設定は完了です!次は実際の使い方を説明しますね。

「EWWW Image Optimizer」の使い方

「EWWW Image Optimizer」の使い方

EWWW Image Optimizerの使い方は2通りです。

  1. これから投稿する新規画像の圧縮&最適化
  2. すでにアップロード済み画像の圧縮&最適化

1つずつ説明しますね。

①:新規画像の圧縮&最適化

EWWW Image Opptimizerを有効化していれば、これから新規でアップロードした画像を自動で最適化してくれます。

何もする必要なく、今までどおり画像をアップロードするだけなのでとっても楽ちんです。

画像がどれくらい圧縮されているかは、左メニューの「メディア」→「ライブラリ」で表示される画像一覧で確認できます。

新規画像は自動圧縮

②:すでにアップロード済み画像の圧縮&最適化

では続いて、すでにアップロードしてしまっている画像の圧縮方法を説明します。

管理画面の「メディア」 → 「一括最適化」をクリックします。

アップロード済み画像一括最適化

「最適化されていない画像をスキャンする」をクリック。

最適化されていない画像をスキャンする

「◯点の画像を最適化」をクリックします。

画像を最適化

最適化完了です!

最適化完了

時世代フォーマットWebPに変換しさらに画像を軽量化!

もっと画像サイズを小さくしたい場合

「WebP(ウェッピー)」とはGoogleが開発した次世代のファイル形式で、画質を落とさずにJPEGやPNGよりファイルサイズを圧縮することができます。

WebPは画質が落ちず圧縮率が高いという優れたファイル形式なので、サイトに使用する画像をWebPにすれば、JPEGやPNGの画像を使うよりWEBサイトの表示が速くなります。

「Ewww Image Optimizer」を使えば、今後アップロードするものは自動でWebPに変換されますし、すでにアップロードしてある画像も簡単にWebP化できるんです。

ただし、一手間あるのでここからは任意です。お勧めしますが強制ではありません。先ほどまでの設定だけで十分でもあります。さらに高速化しておきたいという人は設定しておくといいでしょう。3分ほどで終わりますよ。

step
1
「WebP変換」にチェックを入れる

「基本」タブの「WebP変換」にチェックをいれて一度設定を保存してください。

Webp変換にチェックを入れる

step
2
WebPのコードをコピーします

「変更を保存」ボタンをクリックすると「WebPの配信方法」という項目が出現するのでコードをコピーしましょう。

webpのコードをコピー

右下のPNGがあとでWebPに変わりますよ

このコードをサーバーの「.htaccess」をいうファイルにコピペします。

ちなみに、左下にある「リライトルールを挿入」を押すと自動でコードが「.htaccess」へ記述されるのですが、エラーが出てしまう事例が多いので手動で行うようにしましょう。

step
3
「.htaccess」に貼り付ける

わたしが使用しているエックスサーバー を例に説明しますね。

エックスサーバーパネルにログインしましょう。

「.htaccess編集」をクリックしてください。

エックスサーバーの管理画面へ

step
4
「.htaccess編集」にコードをペースト

対象となるドメインをまず選び、次の画面で「.htaccess編集」タブをクリックします。

.htaccess編集タブをひらく

一番上に先ほどコピーしたコードを貼り付けます。

.htaccessにコードをペースト

一番下にある、「確認画面に進む」をクリックして、続けて「実行をする」をクリックして完了です!

必ず「確認」をクリック、「実行」をクリックしてくださいね。

step
5
EWWW Image Optimizerを確認する

WordPressの画面に戻り、EWWW Image Optimizerの設定画面を更新してみてください。

WebPになる

ためしに1枚画像をアップロードしてみると、ちゃんとWebP形式の画像が作成されていました。

アップロード画像がWebPになっている

まとめ:「EWWW Image Optimizer」を使ってサイトの表示速度を向上

まとめ:「EWWW Image Optimizer」でサイトの表示速度を向上

画像のファイルサイズを小さくしてくれる便利なプラグイン「EWWW Image Optimizer」の設定方法と使い方を説明してきました。

2021年の大型アップデートによって初期設定のやり方が今までと変わりましたので、その最新版の設定方法になります。

サイトの表示速度が遅いと訪問者の離脱率が上がります。

一度設定してしまえば今後は何もする必要がないので導入しておくことをおすすめします!

あと、画像のファイルサイズはPNGよりもJPGの方が小さくなり、さらにGoogleが開発したWebPならよりサイズが小さくなります。

WebP化はおすすめですが、手間であればEWWW Image Optimizerの通常設定だけでも画像が小さくなるので何もしないより十分ですよ。

えどがわ

◆2020年、40歳の時にブログを始めました ◆「返り咲きたい人たちを救う」をミッションに掲げ、悩みを持つ人たちの現状打破の参考になればと当ブログを運営 ◆ブログ収益:全く稼げない8ヶ月を経験→ゼロから徹底的に勉強→ブログノウハウの構築 ◆情報をまとめるのが好き ◆何歳であっても、武器の無い弱き人でも人生は変えれます!

-ブログ初心者

Copyright © 返り咲きブログ, All Rights Reserved.