WordPressプラグイン

【画像で解説】EWWW Image OptimizerでWebPを設定する方法

EWWW Image Optimizer, WebP

この記事では『EWWW Image Optimizer』を用いてGoogleも推奨している次世代の画像フォーマットである『WebP(ウェッピー)』を設定する方法をご紹介します。

WordPressで数多くの記事を投稿していくと、いずれ問題として浮かび上がってくるのが画像データ量の問題です。増大するとサイト読み込みに時間がかかり、表示速度を低下させてしまいます。

サイトの表示速度が落ちるとSEOに不利に働くだけでなく、ユーザビリティーが低下し、閲覧者の離脱率が高くなってしまいます。

特にスマートフォンなどのモバイル環境では、データ量が多く、重いサイトは顕著に離脱率が上がってしまいます…!

そこで、この記事では自動的に画像を圧縮をしてくれるプラグインである「EWWW Image Optimizer」の使い方とその応用編である『WebP』の設定方法を画像を用いて順番にご説明します。

また、記事の後半ではWebPが設定できない場合のトラブルシューティング方法をまとめていますので、設定が上手くできなかった方は後半からご確認いただければと思います。

EWWW Image Optimizer とは

【画像で解説】EWWW Image OptimizerでWebPを設定する方法
EWWW Image Optimizerとは画像をアップする際に自動で画像のデータ量を品質を劣化させる事無く圧縮してくれるプラグインです。

もともと、画像ファイルはそのフォーマット(拡張子)に応じてデータの圧縮を考慮していますが、更にプラグインの統一されたアルゴリズムで圧縮します。

サイトが重いと感じた際にこのプラグインを使えば、サイト全般の表示速度を上げる効果が期待できます。

画像データ自体を圧縮するので、画像を使っているページの全てにおいて効果が確実に現れます。サイトの表示スピードが向上する事で、表示のもたつきを理由に離脱率の低下が見込めます。

また、画像アップ時にデータを圧縮してくれるだけではなく、既にアップ済みの画像も一括でデータを圧縮してくれるなど、導入するだけで効果が実感できるプラグインとなっています。

EWWW Image Optimizerの設定方法と使い方

インストール

「プラグイン → 新規追加」をクリックして、検索窓に「EWWW Image Optimizer」と入力してください。
【画像で解説】EWWW Image OptimizerでWebPを設定する方法
 
「EWWW Image Optimizer」と「EWWW Image Optimizer Cloud」の2種類が表示されます。

使用するのは「EWWW Image Optimizer」の方です。理由は設定画面が日本語化されているからです。

「EWWW Image Optimizer」の「今すぐインストール」のボタンをクリックし、続けて「有効化」のボタンをクリックします。

ちなみに、両方インストールする事は可能ですが同時に有効化する事はできません。どちらかを無効化する必要があります。

設定方法

「EWWW Image Optimizer」の設定方法についてご説明します。ほとんどデフォルト設定のままで使えますので難しい点はありません。

【画像で解説】EWWW Image OptimizerでWebPを設定する方法
 
管理画面の左メニューの「プラグイン」をクリックすると、インストールされているプラグインの一覧が表示されます。そこで、「EWWW Image Optimizer」の「設定」をクリックすると、設定画面へ切り替わります。

もしくは、管理画面の左メニューの「設定」をクリックすると表示される一覧から「EWWW Image Optimizer」を選択します。

設定する項目は以下の2つです。

  • Basic(基本設定)
  • Convert(変換設定)

他の設定はデフォルトのままで問題ありません。

Basic(基本設定)

設定画面のBasic(基本設定)タブを表示させて下さい。
 
【画像で解説】EWWW Image OptimizerでWebPを設定する方法
 
「Remove Metadata」という項目のチェックが入っているか確認します。

この機能が有効になっていると画像に含まれているメタデータと呼ばれる、画像データ以外の余計なデータを削ぎ落としてサイズを圧縮できます。

画像のメタデータとはExifなどの撮影条件に関するデータ(座標、日時、画素数、機種名・・・)でデジタルカメラやスマートフォンで撮影した場合などに画像に埋め込まれます。

サイトで使う分には画像が表示できれば良いので必要の無いデータですし、個人情報を守る視点からも削除しておくべきデータですね…!

Convert(変換設定)

設定画面のConversion(変換設定)タブを表示させて下さい。
「コンバージョンリンクを非表示」という項目にだけチェックを入れます。
 
【画像で解説】EWWW Image OptimizerでWebPを設定する方法
 
ここにチェックを入れておかないとサイト管理者以外のユーザーにも画像を「png->jpg」や「jpg->png」に変換するためのリンクが表示されてしまいます。

画像フォーマットの変換は画質の劣化を伴う事もあるので、基本的に変換できない状態にしておきたいですね。

他の項目はリンクを表示させておく場合の設定なので、非表示の場合には気にする必要はありません。

これでEWWW Image Optimizerの設定は完了です。ここからは実際の使い方をご紹介します。

EWWW Image Optimizer の基本的な使い方

使用方法としては以下2つとなります。

  • 新規にアップロードする画像の圧縮
  • 既存の画像を一括で圧縮

この項目では画像圧縮を行いますので、事前にサイトのバックアップを取得しておきましょう。

新規にアップロードする画像の圧縮

EWWW Image Optimizerはインストールするだけで新規にアップロードする画像については自動で圧縮してくれます。

圧縮結果は左メニューの「メディア→ライブラリ」で表示される画像一覧で確認する事ができます。
 
【画像で解説】EWWW Image OptimizerでWebPを設定する方法
 
上記写真の通り、元画像に対してどれだけ圧縮されたか確認できます。

画像フォーマット自体がデータの圧縮を意識して作られていますので劇的には減りませんが、1割ほどサイズが落ちていることが確かめられました。

既存画像を一括で圧縮

EWWW Image Optimizerは既存の画像を一括で圧縮するも可能です。

左管理メニューより「メディア→一括最適化」と進みます。
 
【画像で解説】EWWW Image OptimizerでWebPを設定する方法
 
一括最適化の設定画面に切り替わるので「最適化されていない画像をスキャンする」ボタンをクリックします。

画面が切り替わって「最適化を開始」ボタンが表示されますので、クリックします。
 
【画像で解説】EWWW Image OptimizerでWebPを設定する方法
 
一括最適化の過程を示すログを出力して処理が終了します。既存画像の圧縮はこれだけでOKです。
 
ちなみに、EWWW Image Optimizerによる画像圧縮に加えて、サイト表示時に画像読み込みを後回しにするプラグイン『Lazy Load』を使用するだけでも画像に対する対策は万全となります。

lazy load - 【画像で解説】EWWW Image OptimizerでWebPを設定する方法
高速化プラグイン『Lazy Load by WP Rocket』の使い方と設定方法この記事ではサイト高速化プラグイン「Lazy Load by WP Rocket」をご紹介します。 Lazy Load(遅延読み込み)...

次世代フォーマット『WebP』の設定手順

【画像で解説】EWWW Image OptimizerでWebPを設定する方法
 次は『WebP』を使ったより効果的な画像の表示速度の向上方法をご紹介します。

方法としては「EWWW Image Optimizer」を利用して画像を全て『WebP』と呼ばれる次世代画像フォーマットに変換し、サイト設定に適用させる事でより劇的な画像データのスリム化を行います。

次世代画像フォーマットとは?

次世代画像フォーマットとは従来のPNGやJPEGより圧縮性能の高い、新しい画像フォーマットです。JPEG2000、JPEG XR、WebP(ウェッピー)などの種類があります。

それぞれに特徴がありますが、WebPはGoogleが開発している画像フォーマットであり、対応ブラウザもかなり増えてきていることを考慮すると今後の主流になる事が予想されます。

【WebP対応ブラウザ】

Google Chrome / Mozilla Firefox / Microsoft Edge / Opera

EWWW Image Optimizerを使って画像をWebPに変換する方法

WebPに画像変換させるための設定

「EWWW Image Optimizer」の設定画面から「WebP」タブを表示します。

そして「JPG、PNGからWebP」にチェックを入れます。最後に「変更を保存」で設定を保存します。
 
【画像で解説】EWWW Image OptimizerでWebPを設定する方法

.htaccesファイルへの追記

設定をすると「WebP」タブのページ下部に.htaccessファイルに追記するためのコードが自動生成されます。(①)
 
【画像で解説】EWWW Image OptimizerでWebPを設定する方法
 また、右下の方に赤の背景色でPNGという表示があります。(②)

これはサイトを閲覧しているブラウザとサイト側がWebPに対応済みの場合は緑色、対応していない場合は赤色のボタンが表示されます。

上記の画像ではまだ適用していないので赤色となっているということですね。

「③リライトルールを挿入する」をクリックすると自動で.htaccessの末尾に構文が挿入されますが、.htaccessの冒頭に挿入する必要があるためこちらは押さないように注意してくださいね。

.htaccessファイルの編集については、WordPressの設置にレンタルサーバを使用している場合、Web管理画面で.htaccessファイルのエディタが提供されていることがほとんどです。

また、FTPを用いてファイルをダウンロードしてテキストエディタで編集してからアップロードするという方法もあります。

【画像で解説】EWWW Image OptimizerでWebPを設定する方法Xserverの管理画面

 

.htaccessファイルに追記するコードだけ抜き出しますと以下のようになります。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(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」ファイルの冒頭に上記構文を挿入するようにしてください。

このコードの意味としては「ブラウザがWebPに対応しているなら画像ファイルをWebPで配信し、非対応なら元のフォーマット(JPEGやPNG)で配信する」という内容です。

つまり、ブラウザが対応している場合のみにWebPを使用するので、次世代フォーマットの設定をしたからといってWebP未対応のブラウザ使用者に悪い影響を与えることはありません。

【注意点】ブラウザキャッシュを利用している場合は.htaccessファイルにさらに追記が必要

ブラウザキャッシュを使用している場合は保存する画像の種類と期間を定義する以下コードを.htaccessファイルに追記する必要があります。

今まで.jpgや.pngをキャッシュとして保存していたように、WebPもキャッシュとして保存するということですね。

ExpiresByType image/webp “access plus 1 weeks”

※<IfModule mod_expires.c>〜</IfModule>の間に入れればOKです!

WebP画像ファイルへの変換

全ての作業が終わったら上記の見出し「既存画像を一括で圧縮」の手順と同様に「最適化されていない画像をスキャンする」ボタンをクリックします。

WebPへの変換が終わったら「WebPタブ」を再び開いて、右下のボタンが緑色で「WebP」と表示されていることを確認します。

なかなかボタンが緑色にならない…という場合は、トラブルシューティングの項目で解決方法をまとめてありますので参考にしてください。 

以上でWebPへの自動変換の設定と、すでにアップロードされている画像のWebP変換が完了しました。

ちなみに、WebPに画像を変換しても元画像は非対応ブラウザ用に残っていますのでご安心ください…!

そしてこれからアップロードされる画像は自動でWebP変換されます。自動で変換してくれるなんて本当に便利ですよね。 

WebPが設定できない場合のトラブルシューティング

WebPへの変換がうまくいかないケース毎の対処法をまとめてみました。

① 赤色「PNG」から緑色「WebP」に切り替わらない場合

【画像で解説】EWWW Image OptimizerでWebPを設定する方法

上記の設定をちゃんと終えたのに「WebP」タブの右下に表示される赤色「PNG」が緑色「WebP」 になかなか切り替わらない場合があるようです。

そんな時は下記2つの方法を試してみてくださいね。

【方法1】ブラウザのキャッシュを削除してリロードする

1つ目はブラウザのキャッシュが原因になっているケースです。

こちらの対処法は簡単で、ブラウザのキャッシュデータを削除してリロードを行なってください。

GoogleChromeであれば メニューボタン>その他のツール>閲覧履歴の消去>キャッシュされた画像とファイルからキャッシュデータを削除することができますよ。

「WebP」タブを再度開いてWebPの緑色表示へと変わったかを確認してみてください。

【方法2】画像の遅延読み込み系のプラグインとの相性を確認して必要であれば停止する

方法1を試してみても改善されていない場合は「Lazy Load」など画像の遅延読み込み系のプラグインが原因になっている場合があります。

画像の遅延読み込み系のプラグインを有効化してると、EWWW Image Optimizerとの相性問題でWebPの緑色表示にならないことがあるようです。

遅延読み込み系のプラグインを停止することで緑色表示になるようであれば、別のプラグイン導入を検討してみてください。

② 既存ファイルの一括最適化での変換がうまくいかない

上記の項目の手順で「一括最適化」を行うと、本来であればワンクリックで既存の画像をWebP変換してくれるはずなのですが、メディアのライブラリから確認してもWebPには変換されていないというケースがあるようです。

その場合は手動で個別に「再最適化」ボタンを押してください。

【画像で解説】EWWW Image OptimizerでWebPを設定する方法たくさんの画像を手動でWebP変換するのはけっこう大変です…!

そのため、既存の画像をWebP一括変換がうまくいかなければ、データの大きいアイキャッチ用画像だけでも手動で変換するといいと思います。

まとめ

【画像で解説】EWWW Image OptimizerでWebPを設定する方法この記事では以下内容をまとめました。

  • 「EWWW Image Optimizer」の設定方法と使い方
  • WebPの画像形式にサイトを対応させる方法

「EWWW Image Optimizer」プラグインを導入するだけで簡単にサイトの画像を圧縮することができ、サイト表示速度を向上させることができます。
 
また、こちらの記事ではさらにプラグインを用いたコード最適化とキャッシュの設定によりサイト表示速度を高速化させる方法をご紹介していますので、興味のある方は是非ご覧ください。

autoptimize cache enabler e1581331367430 - 【画像で解説】EWWW Image OptimizerでWebPを設定する方法
【これだけでOK】AutoptimizeとCache Enablerの設定でサイト高速化する方法WordPressは高機能で便利な反面、サイトが重くなりやすいという欠点もあります。 しかし、Googleの公式サイトである"Webm...

PC1台で自由なライフスタイルを実現する無料メルマガ

RELATED POST