EWWW Image Optimizerプラグインの設定と使い方|WebPの設定なども紹介

Wordpress
この記事は約10分で読めます。

はじめに

 今日は、EWWW Image Optimizerプラグインについて紹介します。

 この記事を読むと次の疑問について知ることができます。

👉EWWW Image Optimizerプラグインとはどのようなもの?
👉EWWW Image Optimizerの日本語表示はできるの?
👉EWWW Image Optimizerの有料版は?
👉EWWW Image Optimizerのインストールはどうすればよいの?
👉EWWW Image Optimizerプラグインの設定と使い方はどうするの?
・簡易設定
・詳細モード
👉テストでEWWW Image Optimizerプラグインの簡易モード設定の確認したらどうなったか?

 OS、機種などで説明の仕方が変わってくることがありますので、私の使用しているパソコン環境やスマホについて載せておきます。

パソコンOS : Windows10 Pro
Windowsバージョン : 20H2
iphoneのスマホの機種 : iphone11(iOSバージョン:14.5.1)
Androidのスマホの機種 : Xiaomi Redmi Note 10 Pro(Androidバージョン:MIUI 12(Android 11準拠))

EWWW Image Optimizerプラグインとは?

 EWWW Image Optimizerプラグインは、JPEG、PNG、GIFの静止画をWordoPressのブログ内で記事内に利用している際に、自動でリサイズ、自動圧縮などして、画像の最適化をしてくれるプラグインなんです。

 また、最近になって色々なOSやブラウザーでも対応するようになった次世代画像フォーマットであるWebPにも自動で変換しくれ、対応しないブラウザーでは元のJPEG、PNG、GIFを、対応するブラウザーにはWebPで表示してくれるために、あなたのブログの読み込み速度を速めることができ、結果的に画像を含んだページの表示速度を上げる効果があります。

 したがって、私などもそうですが、WordPressのサイトをPageSpeed Insightsで表示スピードを計測した際に悪いスコアーを出すサイトは、一番の解決策は画像容量を小さくすることがPageSpeed Insightsで表示スピードのスコアーを上げるために、最初に取り組む解決策でしょう。

 そうすることにより、あなたのブログの表示スピードが速ければ、ブログを訪れてくれる方にも喜んでもらえ、強いては、あなたのブログの評価を上げる結果にもつながります。

 EWWW Image Optimizerプラグインは、現時点(2021年5月16日)でのバージョンが6.1.4です。

 このプラグインの「詳細表示」を見ると、有効インストール数800,000+となっており、80万以上の方がインストールして活用し、レビュー1038件、評価が4.7となっており、大変人気のWordPressプラグインと言えるでしょう。

 このプラグインの使う上での利用条件は次の通り。

【EWWW Image Optimize(バージョン:6.1.4)の利用条件】

◆WordPress の必須バージョン :  5.4 以上
♦必須 PHP バージョン :  7.1 以上
♦対応する最新バージョン :  5.7.2

EWWW Image Optimizerの日本語表示

 Google ChromeやMicrosft Edgeの場合ですと翻訳機能が付いているので、英語のページなどを日本語に翻訳してくれます。

 EWWW Image Optimizerで英語表示されているところがあった際には、そのページの翻訳したい英語の表示部分で右クリックして表示されるメニューで「日本語に翻訳」を選択すれば、日本語に翻訳して表示してくれます。

 例えば、 EWWW Image Optimizerプラグイン画面で「詳細を表示」で現れるEWWW Image Optimizerの説明は英語で書かれていますが、この英語の部分で右クリックしてでるメニューで「日本語に翻訳」をクリックすれば、日本語に翻訳して表示してくれます。

 この機能は、EWWW Image Optimizerのページに限らず、他の英語表記の部分でもできますので、試しにやってみて下さい。

EWWW Image Optimizerの有料版は?

EWWW Image Optimizerは、基本的に無料で利用できますが、有料版にすることによりさらに便利に利用が可能です。

 有料版には3つのプランが用意されており、それらの違いは次の通りです。(Exactly WWWのホームのGoogle翻訳による)

有料プランStandardGrowthInfinite
月額価格(年額)7ドル(70ドル)15ドル(150ドル)25ドル(250ドル)
サイト数110無制限
処理画像サイズ無制限無制限無制限
自動圧縮
自動WebP化
JS / CSSオプティマイズ
SWISパフォーマンス
帯域幅200GB400GB800GB
CND米国およびEUグローバルグローバル
カスタムドメイン×
より多くのオプション×
サイト速度監査××

EWWW Image Optimizerのインストールと有効化

 WordPressのダッシュボードより、「プラグイン」⇒「新規追加」と順にクリックします。

 上部右の方にあるキーワードプラグインの検索欄に「EWWW」と記入して検索すると、でてくる「EWWW Image Optimizer」の右上にある「今すぐインストール」をクリックします。

 その後に出る「有効化」をクリックすると、プラグイン画面の上部に「プラグインを有効化しました」と表示されます。

 これであなたのWordPrssでEWWW Image Optimizerを使える準備ができたことになります。

EWWW Image Optimizerプラグインの設定と使い方

 最初のEWWW Image Optimizerプラグインをインストールして有効化した後から、簡易モード前までの手順を次に載せます。

 ここでも、Google Chrome 、Microsoft Edgeを利用しているようであれば、英語表記されている部分で右クリックすることにより日本語に翻訳してくれます。

【EWWW Image Optimizerプラグインの有効化の後から簡易モード前までの手順】

  1. プラグイン画面の「EWWW Image Optimizer」の「設定」をクリック
  2. 「In order to recommend the best settings for your site, please select which goal(s) are most important:(Google翻訳:サイトに最適な設定を推奨するには、最も重要な目標を選択してください。)」とでるので、
    ☑サイトの高速化
    ☑保存スペースを節約
    〇 5倍以上の最適化と優先サポートを入手(有料で利用する場合はチェックを入れる)
    ●今は無料モードのままにする(無料で利用する場合はチェックを入れる)
    「次」をクリックする。
    または、「I know what I'm doing, leave me alone!(私は、何をすべきか知っているのでほっておいてくれ!)」をクリックするかのどちらかをしてください。ここでは、「I know what I'm doing, leave me alone!」をクリックします。
  3. これで、簡易設定画面の「基本」画面が現れます。

簡易モード

 ここでは、主要な設定のみでEWWW Image Optimizerを利用する場合の設定です。

次のように設定します。

 

☑ EXIF やコメント、カラープロファイルなどピクセルデータでないすべてのメタデータを削除します。

画像のリサイズ : 幅の上限として、あなたが利用しているブログの表示する横幅を入力、1000を入れておけばOK

遅延読み込み:他のテーマなどで設定する箇所がある場合は、チェックを入れない。ない場合は、チェックを入れる。テーマ(Cocoonの場合は、この設定があるのでチェックを入れない。)

WebP 変換 : ほかのブラウザでは元の画像を提供し、対応するブラウザ用では画像を次世代の形式に変換します。

WebP の配信方法: JS WebP リライト 又は<picture> WebP リライトのどちらかにチェックを入れる。ここでは、☑ JS WebP リライトにチェックを入れました。

すべての簡易モードの基本タブの設定が終了したら、「変更の保存」をクリックします。

サポート、貢献タブは何も触らないでデフォルトのままでOKです。

詳細モード

 簡易モードで左上部にある「Enable Ludicrous Mode」をクリックすると、詳細モードになります。

 詳細モードでは、「基本」、「ローカル」、「高度な設定」、「リサイズ」、「変換」、「上書き」、「サポート」、「貢献」があり、それぞれのタブで詳細な設定が可能となります。

しかし、これら詳細モードでの設定は、簡易モードで設定してあれば、詳細モードでの設定はする必要はありません。

 内容が十分理解できた段階で、詳細モードでパラメータを変えてやればよいと思いまます。

テストでEWWW Image Optimizerプラグインの簡易モード設定の確認

テスト(EWWW Image Optimizer)と言う記事を新規作成し、そこに1024×768ピクセルの画像ファイル(PNGの2.03MB)を挿入してしてみました。

 その結果、挿入された画像ファイルは、EWWW Image Optimizerによってリサイズ、圧縮され画像サイス1000 x 750 ピクセルの容量224KBのJPEGファイルに変換されてメディアライブラリーに保存されていました。

 実際に、WebPファイルも作成されてるかどうかを見るために、CoreserverのV2サーバーのファイルマネージャーで調べたら各種サイズのWebPファイルが作成され、最も大きいサイズのもので149KBでした。

 圧縮率を見てみると、元画像(PNGの2.03MB)に対しては(2.03-0.224)÷2.03×100≒89%のJPEGに圧縮、(2.03-0.149)÷2.03×100≒92.7%のWebPに圧縮されたことになります。

 表示を確認するために、このテストファイルを公開して、その記事のURLをChromeブラウザーのURL欄に記入して、表示された画像ファイルを右クリックして、「新しいタブで画像を開く」をクリックすると、画像ファイルがChromeの別タブウインドウで開くので、そのURLを見ると、WeBpファイルが使われていることが判明。

 さらに、InternetExplorerで同様にしてみたら、表示されている画像ファイルは、EWWW Image Optimizerでリサイズされ圧縮されて保存された(JPEG、224kB)でした。

 以上のように、WebP対応のブラウザーで見た場合は、WenPの画像が表示され、WebP非対応のブラウザーで見た際には、JPEGファイルが表示されることが分かりました。

 正常に作動し、大変便利であることが証明されました。

ただし、試験的に確かめてわかったことですが、下書き状態のプレビューで見たものは、例えWebP対応のブラウザーで見ても表示される画像はWebPではなくJPEGファイルになります。

おわりに

 如何だったでしょうか?

 EWWW Image Optimizerプラグインとはどのようなもの?、EWWW Image Optimizerの日本語表示はできるの?、EWWW Image Optimizerの有料版は?、EWWW Image Optimizerのインストールはどうすればよいの?、EWWW Image Optimizerプラグインの設定と使い方はどうするの?、簡易設定、詳細モード、テストでEWWW Image Optimizerプラグインの簡易モード設定の確認したらどうなったか?などについて解説してきました。

 是非、この記事を読んで、EWWW Image Optimizerプラグインをあなたのブログにもを使ってみてはどうだろうか?

 この記事が少しでもあなたのお役に立てれば、これほど嬉しいことはありません。

以上です。

 

コメント

タイトルとURLをコピーしました