EWWW Image Optimizerのおすすめ設定とWebPの使い方

 
くろくま
サイトの表示速度を改善するのに、画像を軽量化したいんだけど、おすすめのプラグインを教えてください。
 
しろくま
「EWWW Image Optimizer」というプラグインを使えば、画像を自動的に最適化できますよ。
更にGoogleが推奨している、次世代画像フォーマット「WebP」に変換する機能もあるのでおすすめです。
 
くろくま
(ふむふむ)
 
しろくま
「EWWW Image Optimizer」のおすすめ設定、WebPの使い方などを詳しく紹介します。
スポンサーリンク

EWWW Image Optimizerとは

EWWW Image Optimizerは、画質に影響を与えることなく、画像を自動的に圧縮・軽量・最適化してくれるプラグインです。

画像アップロード時、自動的に圧縮・軽量化してくれる他、アップロード済みの画像も一括で最適化する事が出来ます。

また、次世代画像フォーマット「WebP」への変換機能も備えているので、一つのプラグインで幅広い使い方ができます。

 
しろくま
EWWW Image Optimizerの機能や特徴がわかったところで、次はインストールを行いましょう。

EWWW Image Optimizerをインストールする

WordPressの管理画面から「プラグイン」→「新規追加」→キーワード欄に「
EWWW Image Optimizer」を入力し、インストールを行います。

Cloud版を間違ってインストールしないよう、気をつけましょう。

EWWW Image Optimizerを検索して、インストールする

インストール後は、「有効化」しておきましょう。

EWWW Image Optimizerを有効化する
 
しろくま
次は、EWWW Image Optimizerのおすすめ設定を紹介します。

EWWW Image Optimizerのおすすめ設定

EWWW Image Optimizerのおすすめ設定は、次の3つです。

  • メタデータを削除する
  • コンバージョンリンクを非表示にする
  • JPG,PNGからWebPにする
 
しろくま
おすすめ設定について、詳しく見てみましょう。

メタデータを削除する

WordPressの管理画面から「設定」→「WWW Image Optimizer」と進んで、[ベーシック]タブの「メタデータを削除」にチェックが入っている事を確認します。

設定変更していなければ、インストール時点でチェックがオンになっていると思います。

EWWW Image Optimizerのベーシックタブの「メタデータを削除」にチェックが入っていることを確認する
 
しろくま
画像のメタデータには、位置情報や撮影情報が含まれている事があるので、チェックするようにしましょう。

コンバージョンリンクを非表示にする

WordPressの管理画面から「設定」→「WWW Image Optimizer」と進んで、[変換]タブの「コンバージョンリンクを非表示」のチェックをオンにして、変更を保存します。

EWWW Image Optimizerの変換タブの「コンバージョンリンクを非表示」のチェックをオンにする
 
しろくま
設定をオンにすることで、「jpg→png」「png→jpg」など、メディアライブラリ上の画像形式を変換できるリンク表示を無効に出来ます。

JPG,PNGからWebPにする

 
くろくま
(そもそもWebPって何だろう…)
WebPとは?
WebP(ウェッピー)とは、Googleが開発しているオープンな静止画像フォーマットのこと。
ファイルの拡張子は「.webp」になります。
PNGやJPEGより圧縮性能が高く、ファイルサイズを抑えられるのが特徴です。(※2020年6月現在、IE・Safari・iOSサファリは未対応)
最新のWebP対応ブラウザ表はこちら
 
しろくま
EWWW Image Optimizerでは、JPGやPNG画像をWebPに変換する事ができます。
WebPの設定は、続きをご確認ください。

EWWW Image OptimizerでWebPを設定する

WordPressの管理画面から「設定」→「WWW Image Optimizer」と進んで、[WebP]タブの「JPG,PNGからWebP」のチェックをオンにして、変更を保存します。

EWWW Image OptimizerのWebPタブの「JPG,PNGからWebP」のチェックをオンにする

変更を保存後、[ベーシック]タブに戻ってくるので、画面を下までスクロールし、「リライトルールを挿入する」を選択します。

リライトルールを挿入するを選択する

「挿入成功」のメッセージと共に、右下の表示も「PNG」から「WEBP」に変わりました。

リライトルールの挿入成功の状態

WebPのリライトルールを挿入できない場合

WordPressからリライトルールを挿入できなかった場合、サーバーへアクセスして「.htaccess」を次のように直接編集する必要があります。

<IfModule mod_rewrite.c>RewriteEngine OnRewriteCond %{HTTP_ACCEPT} image/webpRewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$RewriteCond %{REQUEST_FILENAME}\.webp -fRewriteCond %{QUERY_STRING} !type=originalRewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]</IfModule><IfModule mod_headers.c>Header append Vary Accept env=REDIRECT_accept</IfModule>AddType image/webp .webp
 
しろくま
「.htaccess」の編集は慎重に行いましょう。
設定を誤ると、サイトを閲覧できなくなる事もあります。

画像を一括で最適化する

 
しろくま
EWWW Image Optimizerでは、既にアップロード済みの画像データを一括で最適化する事が可能です。
 
くろくま
それは助かるね!
 
しろくま
とても簡単に一括最適化を行えるので、確認してみましょう。

WordPressの管理画面から「メディア」→「一括最適化」の順にクリックして、「最適化されていない画像をスキャンする」ボタンを選択します。

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

最適化できる画像数が表示されるので、「○点の画像を最適化」ボタンを選択します。

○点の画像を最適化ボタンを選択する

最適化ログを確認すると、元のファイルサイズに対して、減少できた割合やサイズを確認できます。

最適化ログの結果

最適化済みの画像をWebP対応させたい場合

過去に最適化したものを含め、全ての画像にWebPを適用したい場合、最適化した履歴を削除し、再度全ての画像を最適化する必要があります。

WordPressの管理画面から「メディア」→「一括最適化」の順にクリックして、「最適化の履歴を表示する」を選択します。

EWWW Image Optimizerで最適化されの履歴を表示するを選択

「最適化履歴を消去」を選択します。

EWWW Image Optimizerで最適化履歴を消去を選択する

履歴消去後、一括最適化を再度行う事で、全ての画像にWebP対応させる事が可能となります。

さいごに

EWWW Image Optimizerのおすすめ設定、WebPの使い方などを紹介して参りました。

元々、当ブログを「PageSpeed Insights」で計測したところ、モバイルの改善項目として「次世代フォーマットでの画像の配信」がピックアップされていました。

PageSpeed Insightsの計測結果に「次世代フォーマットでの画像の配信」が改善項目として表示されている

EWWW Image Optimizerで、WebPによる最適化後、再度計測すると改善項目から消えていたので、やはり効果はありそうです。(5.1秒の差は大きい)

WebP最適化後、PageSpeed Insightsの計測結果から「次世代フォーマットでの画像の配信」が消えている

ウェブサイトの表示速度を改善することで、サイト離脱率の低減効果を期待できそうです。

スポンサーリンク
しろくまフォルダの最新情報をチェック!