ConoHa WINGのメリット・デメリットをチェック!

プラグイン「EWWW Image Optimizer」で画像を最適化・軽量化してSANGOのサイトもサクサクに!

WordPressプラグイン「WWW Image Optimizer」

WordPressプラグイン「EWWW Image Optimizer」で画像を最適化(軽量化)

EWWW Image Optimizer」というプラグインの紹介です。

 

こちらは画像を最適化(軽量化)してくれるプラグインです。

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

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

 

画像の最適化を行うと、画像を圧縮化して容量を小さくしてくれます。

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

 

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

ですが、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」の初期設定画面
「メタデータを削除」「遅延読み込み」にチェックを入れください。
メタデータとは写真に含まれるExifなどのデータになります。

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

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

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

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

ですが、WebP形式を利用することで画像をより軽量化できるので、設定を行っておきましょう。

 

因みに、基本タブの下あたりに「Enable Ludicrous Mode」というテキストリンクがあります。
そちらをクリックすると、さらに多くの設定項目が出てきます。
 
基本的には基本タブの設定のみで十分ですが、もし興味のある方はクリックして確かめてみてください。
Enable Ludicrous Mode

WebPで画像を最適化

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

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

 

また、オリジナル画像を残したまま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 リライト」の2項目についてはチェックは不要です。

一括最適化の方法・アップロード済み画像の最適化も可

「EWWW Image Optimizer」の基本設定が完了すれば、今後アップロードする画像は自動で最適化されます。

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

 

WordPress管理画面の左カラムにある「メディア」の中の「一括最適化」メニューをクリックしてください。

「EWWW Image Optimizer」の一括最適化画面が表示されます。
「WWW Image Optimizer」で一括最適化
「最適化されていない画像をスキャンする」をクリックしてください。

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

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

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

Exifの削除も行っておきましょう

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

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

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

 

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

 

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

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

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

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

「EWWW Image Optimizer」は画像を最適化するために使用されるプラグインで、アップロード済みの画像も一括で最適化することが可能です。
その為、運用中のサイトへの導入にも便利です。

 

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

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