WordPressプラグイン

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

この記事では自動的に画像を圧縮をしてくれるプラグインであるEWWW Image Optimizerのインストール方法と設定方法をご紹介します。

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

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

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

簡単に設定できますので、ぜひこの機会に導入しておきましょう!

【追記】
WebPはあくまでも応用編になるのでブログ初心者の方は設定しなくて大丈夫です。
基本設定を入れるだけで十分画像の圧縮効果を得られます。

また、このプラグインは仕様がよく変わるため設定画面が若干異なる場合もあるかと思います。その際は最新情報を調べつつ、必要最低限の設定だけ反映していきましょう。 

YOTA
YOTA
プラグインはデフォルト設定である程度使えるようになっているので、最初はあまり深入りしすぎずにサクサク進めていく姿勢が大事です。

EWWW Image Optimizer とは

EWWW Image Optimizer,設定

「EWWW Image Optimizer」は画像を自動で圧縮してくれるプラグインです。

設定すると以下の効果を見込めます。

  • 画像を圧縮してファイルサイズを縮小する
  • サイト内が軽くなり表示速度が上がる
  • 読み込みが速くなり不要な離脱を減らす
YOTA
YOTA
良いことばかりなのでサイトの初期設定時に導入しておきましょう。

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

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

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

ここからは実際にインストール方法を画像付きで解説していきます。

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

EWWW Image Optimizer,設定

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

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

EWWW Image Optimizer,設定

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

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

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

EWWW Image Optimizer,設定   

EWWW Image Optimizerの設定方法

次は画像のファイルサイズをより小さくする設定方法の解説です。

左端のダッシュボードの「設定」「EWWW Image Optimizer」をクリックし開きます。

EWWW Image Optimizer,設定

下記の画像のように「基本」タブ内の2箇所にチェックを入れます。

EWWW Image Optimizer,設定
  1. 今は無料モードのままにする
  2. メタデータを削除
YOTA
YOTA
メタデータは撮影時の情報のこと。個人情報に繋がるので削除しましょう

「基本」タブの2箇所にチェックを入れたら「変更を保存」をクリックします。

EWWW Image Optimizer,設定

 次に「変換」タブを選択し、「変換リンクを非表示」にチェックを入れて「変更を保存」をクリックします。

EWWW Image Optimizer,設定

以上でEWWW Image Optimizerの設定は完了です。

YOTA
YOTA
ブログ開設したばかりの方はここまででOKです!後半は応用的な使い方なので最初は触らないで大丈夫です。

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による画像圧縮に加えて、サイト表示時に画像読み込みを後回しにするプラグイン『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のプロフィール

関連記事