【ConoHa WING】当ブログ限定!5,000円割引あり!キャンペーンとの併用もOK!

EWWW Image Optimizerで画像を軽量化!Webサイト運営に必須!

EWWW Image Optimizerで画像を軽量化!WEBサイト運営に必須!

※当記事内には、商品プロモーションを含む場合があります

今回は、WordPressの人気プラグイン「EWWW Image Optimizer」の紹介です。

EWWW Image Optimizer

「EWWW Image Optimizer」は、画像の最適化を行えるプラグインで、アップロード画像を自動で軽量化してくれます。
アップロード済みの画像も一括で軽量化することができ、非常に人気のプラグインの一つです

画像の軽量化はSEO対策にもなるので、必ずインストールしておきたいプラグインです。

画像の最適化(軽量化)について

「EWWW Image Optimizer」は、画像を最適化(軽量化)してくれるプラグインです。

しかも、既にアップロード済みの画像も一括で最適化してくれるので、とても便利なプラグインです。

【主な最適化の内容】

  • 画像を圧縮(軽量化)
  • 画像に含まれるメタデータ(Exif、コメント、カラープロファイルなど)を削除
  • 遅延読み込みの設定
  • WebPへの変換

画像の最適化を行うと、画像を圧縮化して容量を小さくすることができます。

画像データの容量が大きいとWebサイトの表示速度にも影響を与えます。
その為、SEO対策の観点からも、画像の圧縮は必須とも言える処理です。

WordPress以外でサイトを構築している場合には、
https://tinypng.com/
を使っていつも圧縮しています。

ですが、WordPressからアップロードする画像を毎回ツールを使って圧縮するのは非常に面倒です。

そこで、「EWWW Image Optimizer」をインストールして設定しておくだけで、アップロード時に自動で圧縮してくれるので非常に助かります。

皆さんも実際にインストールして試してみましょう。

EWWW Image Optimizerのインストールと初期設定

「EWWW Image Optimizer」は、インストールするだけで画像の軽量化が可能です。
また、細かな設定も可能で、WordPress初心者から上級者にまでおすすめのプラグインになります。

まずは、「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」の初期設定画面
「サイトを高速化」「保存スペースを節約」「今は無料モードのままにする」の3つにチェックを入れます。
「チェックを入れたら「次へ」をクリックしてください。

↓

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

「メタデータを削除」「遅延読み込み」にチェックを入れください。
また、横幅と高さには「0」を設定しておきます(デフォルトでは「1920」と設定されている項目)。

メタデータとは写真に含まれるExifなどのデータになります。
詳細については、後ほど紹介します。
→ Exifの削除について

「WebP 変換」にもチェックを入れておいてOKですが、あとで詳しく説明します。
ここの画面では一旦飛ばして貰っても大丈夫です。
→ WebP変換について

↓

これで初期設定は完了です。
「EWWW Image Optimizer」の初期設定画面
「完了」をクリックしてください。

↓

以下のような「EWWW Image Optimizer」の設定画面へ遷移します。
「EWWW Image Optimizer」の初期設定画面

基本的な設定はこれで完了です。
これだけでも十分画像の最適化を行えるので、このまま運用して貰っても大丈夫です。

ですが、「EWWW Image Optimizer」では、詳細な設定も可能です。

上記の初期設定後画面の「基本」タブの下あたりに「Enable Ludicrous Mode」というリンクがあります。
そちらをクリックすると、詳細な設定画面へ切り替わります。
Enable Ludicrous Mode

この画面上で、画像の最適化に関する様々な設定が可能です。

WebPで画像を最適化

WebP(ウェッピー)とは、Googleが開発している画像フォーマットで、「webp」という拡張子の画像ファイルになります。

極力高画質を保ったまま画像を圧縮してくれて、圧縮率も高いのでページ表示速度の改善に効果的です。
表示速度の改善ということはSEO対策にもなるので、できればWebPへの変換設定を行っておいた方がいいです。

また、「EWWW Image Optimizer」では、オリジナル画像を残したままWebP画像を作ってくれるので、仮に元に戻す場合でも安心です。

さらに、世の中にはまだWebPに対応していないブラウザも存在します。
その場合、オリジナル画像の拡張子の画像を表示させてくれるので安心です。

WebP変換の設定方法を行うには、まず「EWWW Image Optimizer」の設定画面の一番下まで移動してください。
「WebP変換(ほかのブラウザでは元の画像を提供し、対応するブラウザ用では画像を次世代の形式に変換します。)」という項目があるのでチェックを入れてください。
WebPへの変換方法

チェックを入れると、以下のような「WebP の配信方法」という項目が開きます。

↓

WebPへの変換方法

ここでは、以下の記述を.htaccessに追記します。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_URI}.webp [T=image/webp,L] </IfModule>
<IfModule mod_headers.c>
<FilesMatch “\.(jpe?g|png|gif)$”>
Header append Vary Accept
</FilesMatch>
</IfModule>
AddType image/webp .webp

この記述は「リライトルールを挿入する」をクリックすると自動で挿入されます。
WebPへの変換方法

ただ、「リライトルールを挿入する」をクリックしても、.htaccessへの書き込みがエラーになることもあります。
その場合は、FFFTPなどを使用して手動で.htaccessに書き込んでください。

「JS WebP リライト」と「Picture WebP Rewriting」の2項目についてはチェックは不要です。

Exifの削除について

Exif(イクジフ)に関しても簡単に触れておきます。

Exifとは、写真データに含まれる関連データ(撮影日時やカメラの機種名、解像度、シャッタース速度、絞り値、ISO感度、焦点距離、GPSの位置情報など)です。

個人情報を含むこともあり、不要なデータにもなります。
Exifを削除することで僅かですが画像も最適化されるので、削除するようにしましょう。

Exifを削除するには「メタデータを削除」にチェックを入れておくだけです。
メタデータの削除設定
※初期設定画面で既に「メタデータを削除」にチェックを入れられていると思います。
 ですが、もしまだ設定していなければチェックを入れておくようにしましょう。

また、「メタデータを削除」にチェックを入れておけば、写真に含まれる「コメント」「カラープロファイル」などのデータも削除してくれます。

もしメタデータを残す必要が無ければ、「メタデータを削除」にもチェックを入れておきましょう。

EWWW Image Optimizerの使い方

「EWWW Image Optimizer」のインストール・有効化まで完了すれば、今後アップロードする画像は自動で最適化されます。

ですが、アップロード済みの既存画像はそのままになります。
そこで、アップロード済み画像は別画面から最適化を行います。

WordPress管理画面の左カラムにある「メディア」の中の「一括最適化」メニューをクリックしてください。
↓
「EWWW Image Optimizer」の一括最適化画面が表示されます。
「WWW Image Optimizer」で一括最適化
「最適化されていない画像をスキャンする」をクリックしてください。

↓

まだ最適化されていない画像点数が表示されます。
※既に最適化済みの画像は含まれないので、最適化済みの画像が重複して処理されることはありません。
「WWW Image Optimizer」で一括最適化
「xx点の画像を最適化」をクリックしてください。

↓

一括最適化の処理が開始ます。
「WWW Image Optimizer」で一括最適化
※アップロード画像が数千、数万となるとかなり時間(数時間)が掛かることもあります。

↓

最適化処理が完了すると以下のような画面が表示されて完了です。
「WWW Image Optimizer」で一括最適化

プラグイン「EWWW Image Optimizer」のまとめ

こちらの記事では、WordPressの人気プラグイン「EWWW Image Optimizer」についてまとめました。

「EWWW Image Optimizer」は、画像を最適化できる使用されるプラグインです。
アップロード済みの画像も一括で最適化することが可能で、運用中のWordPressへの導入も問題なく行えます。

画像を最適化して軽量化することで、Webサイト表示速度を改善することも可能です。
表示速度の改善は、Googleの検索順位にも影響するのでSEO対策にもなります。

「EWWW Image Optimizer」は必須ともいえるプラグインなので、必ずインストールして設定しておくことをおすすめします。