WordPressプラグイン

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

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

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

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

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

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

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

EWWW Image Optimizer とは

「EWWW Image Optimizer」は、WordPressの機能を拡張するプラグインの一種。

インストール、有効化するだけで下記の効果があります。

  • 画像が圧縮され、ファイルのサイズが縮小
  • サイト内が軽くなり、表示速度が格段にアップ
  • 読み込みが速くなり、離脱率が減少
YOTA
YOTA
たくさんの画像を掲載するサイトなら是非おすすめします。

EWWW Image Optimizerのインストール方法

まずはインストールの手順をざっと確認していきましょう。

  • 1.WordPress内のプラグインの新規追加ページへ
  • 2.「EWWW Image Optimizer」と検索
  • 3.「今すぐインストール」をクリック
  • 4.インストール完了後、「有効化」をクリック

以上の手順を今度は画像付きで詳しく説明します。

 

 

まず、WordPressの左端のダッシュボードの「プラグイン」「新規追加」をクリック。

右上の検索欄に「EWWW Image Optimizer」と入力して検索。

「EWWW Image Optimizer」の「今すぐインストール」をクリックします。

YOTA
YOTA
このとき、よく似た名前のプラグインと間違えないように注意しましょう。

インストール完了後、「EWWW Image Optimizer」の「有効化」を選択。

画像のようにプラグインが有効化されたらインストールは完了です。

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

インストール

「プラグイン → 新規追加」をクリックして、検索窓に「EWWW Image Optimizer」と入力してください。

 
「EWWW Image Optimizer」と「EWWW Image Optimizer Cloud」の2種類が表示されます。

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

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

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

設定方法

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


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

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

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

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

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

Basic(基本設定)

設定画面のBasic(基本設定)タブを表示させて下さい。
 

 
「Remove Metadata」という項目のチェックが入っているか確認します。

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

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

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

Convert(変換設定)

設定画面のConversion(変換設定)タブを表示させて下さい。
「コンバージョンリンクを非表示」という項目にだけチェックを入れます。
 

 
ここにチェックを入れておかないとサイト管理者以外のユーザーにも画像を「png->jpg」や「jpg->png」に変換するためのリンクが表示されてしまいます。

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

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

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

EWWW Image Optimizer の基本的な使い方

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

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

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

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

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

圧縮結果は左メニューの「メディア→ライブラリ」で表示される画像一覧で確認する事ができます。
 

 
上記写真の通り、元画像に対してどれだけ圧縮されたか確認できます。

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

既存画像を一括で圧縮

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

左管理メニューより「メディア→一括最適化」と進みます。
 

 
一括最適化の設定画面に切り替わるので「最適化されていない画像をスキャンする」ボタンをクリックします。

画面が切り替わって「最適化を開始」ボタンが表示されますので、クリックします。
 

 
一括最適化の過程を示すログを出力して処理が終了します。既存画像の圧縮はこれだけでOKです。
 
ちなみに、EWWW Image Optimizerによる画像圧縮に加えて、サイト表示時に画像読み込みを後回しにするプラグイン『Lazy Load』を使用するだけでも画像に対する対策は万全となります。

高速化プラグイン『Lazy Load by WP Rocket』の使い方と設定方法この記事ではサイト高速化プラグイン「Lazy Load by WP Rocket」をご紹介します。 Lazy Load(遅延読み込み)...

次世代フォーマット『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」にチェックを入れます。最後に「変更を保存」で設定を保存します。
 

.htaccesファイルへの追記

設定をすると「WebP」タブのページ下部に.htaccessファイルに追記するためのコードが自動生成されます。(①)
 

 また、右下の方に赤の背景色でPNGという表示があります。(②)

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

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

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

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

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

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」に切り替わらない場合

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

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

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

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

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

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

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

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

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

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

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

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

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

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

たくさんの画像を手動でWebP変換するのはけっこう大変です…!

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

work-efficiency-eyecatch
無料ツールで仕事を効率化して自分の時給を上げた話こんにちは、YOTAです。 人から仕事のやり方を習うことはあっても、仕事の効率化を習うことって実はあまり無いですよね。でも、自分の収入...

まとめ

この記事では以下内容をまとめました。

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

「EWWW Image Optimizer」プラグインを導入するだけで簡単にサイトの画像を圧縮することができ、サイト表示速度を向上させることができます。
 
また、以下ページでは初心者向けにブログの始め方をまとめています。ブログ開設中の方はこちらを参考にして設定を進めてみてください。

【まとめ】ブログ開設から収益化までの流れこのページでは初心者の方がブログを開設して収益化するまでの流れや手順を解説していきます。 もしかしたら、ブログを一人で開設したり収益を...
YOTA
YOTA

僕は現在、ブログ運営をきっかけに独立してPC1台で自由に働いています。でも、それまでは世間の常識通り少しでも良い会社に入って安定を目指す人生でした。

でも、いつしか「働く時間も収入も全て決められた人生」に報われなさを感じるようになっていきました。この生活は本当に幸せなのだろうか、と。

そんな人生を変えるために独立し、今はブログで得たWEB集客やマーケティングの知識を活かして個人でコンサルとして仕事をしています。

働く時間や場所を自由に選べる。そして何より仕事に充実感があり、人生を今まで以上に楽しめるようになりました。

超安定志向だった僕が社会のレールを外れてどうやって独立したのか?

上記フォームから登録できる無料メルマガで紹介しています。

プロフはこちらに掲載しています >> YOTAのプロフィール

関連記事
ブログを使って"会社以外でも働ける"ようになる方法
詳細をチェックする
ブログを使って在宅でも月30万円稼げるようになる方法
詳しくはこちら