2021/07/30 (更新日: 2021/12/02)

【画像付き】EWWW Image OptimizerでWebP画像への変換を設定する方法

※本ページにはプロモーションが含まれている場合があります。

こんな方におすすめです。

・サイトを高速化してSEO対策を強化したい
・プラグイン「EWWW Image Optimizer」でWebPにする方法を知りたい
・そもそもWebPとか「EWWW Image Optimizer」って何？
・WebPだけでなくさらに画像を圧縮してサイトを高速化する方法を知りたい

本記事の内容

WebPについて
EWWW Image OptimizerでWebPに変換するための設定や使い方
うまくできない時の対処法
さらに画像を圧縮する・サイトを高速化する方法

本記事を読むと、EWWW Image OptimizerでWebPに画像を変換する方法だけでなく、サイトを高速化するために合わせてすべきことまでわかります。

以下の経歴と実績を持つなべたろ(@seonabe)が解説するよ♪

なべたろの実績

ライター100名以上の組織の法人を経営→株式譲渡
立ち上げから半年で月間1,000万PVを達成
1年で月間1200万PVを達成
年商約1億円を達成
法人向けコンサル1社あたり月額60~100万円
PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数

＼　月間1300万PVのプロが解説　／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓

>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！

【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！ブログのSEO対策にも『抑えどころ』があります。検索順位1位を取りまくってブログを爆速で伸ばすためのSEOの基礎から『抑えどころ』まで約4万文字でプロが解説。読者にもGoogleにも評価されるSEO対策とブログ作りのノウハウがまる分かり。初心者から中級者まで学べるブログのSEO戦略の決定版。

EWWW Image OptimizerでWebP画像を表示しよう
- 次世代フォーマットの「WebP」とは
- WebPへの変換はEWWW Image Optimizerが便利
EWWW Image Optimizerの導入方法
- インストールと有効化
- 初期設定
EWWW Image OptimizerでWebPに変換するための設定
アップロード済みの画像をEWWW Image Optimizerで一括でWebPに変換する方法
画像がWebPで表示されているか確認する方法
WebPに変換できない・反映されない時のチェックリスト
さらに画像を圧縮してブログを高速化する方法
EWWW Image OptimizerでWebP画像を表示してブログを高速化！

EWWW Image OptimizerでWebP画像を表示しよう

今回はEWWW Image Optimizerという画像圧縮・変換プラグインを使って、WordPressの画像をWebPという形式に変換する方法を解説します。

次世代フォーマットの「WebP」とは

そもそも「WebP」とは、、、

JPEG 2000
JPEG XR

などの画像形式と並んで次世代フォーマットと言われている最先端の画像形式です。

Googleもこれらの画像形式を使うことを推奨しており、PNGやJPEGなどの画像に比べて大幅にデータを削減してサイトを高速化できます。

>> PageSpeed Insights

サイトの表示速度を計測できるPageSpeed Insightsでも、

上の画像のように記載されており、サイト速度改善のためにWebPが必要だと記載されています。

JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。

各ブラウザのWebPへのブラウザの対応状況

WebPは次世代フォーマットということもあり、まだWebPに対応していないブラウザもあります。

Safariも最近対応が完了したばかりですが、残りはKaiOS BrowserとIEの2つのブラウザがWebPに未対応です。

>> WebP image format | Can I use

「WebP image format | Can I use」というページで、上の画像のように各ブラウザのWebpへの対応状況を確認できます。

WebPの画像サイズの圧縮度合い

「WebPが良いと言っても具体的にどれくらい違うの？」

というところですが、

JPEGからWebPへの圧縮率：25%~34%
PNGからWebPへの圧縮率：23%

といったデータがあるようです。

30%前後も圧縮できるのはかなり大きいね！！

ブログ記事でもたくさんの画像を使用するので、30%前後の削減は積み重なるとかなりのサイトの高速化になります。

PageSpeed Insightsでの評価も上がるよ♪

WebPへの変換はEWWW Image Optimizerが便利

>> EWWW Image Optimizer

WordPressでWebP画像を使うための方法はいくつかありますが、

画像最適化プラグインの「EWWW Image Optimizer」が便利です。

WordPressでWebPを使うための他の方法は以下の記事で解説。
>> WordPressでWebP画像に変換・対応させる3つの方法【WebP画像】

EWWW Image OptimizerではWebPに変換するだけでなく

画像を圧縮して軽くしてくれる
画像の読み込みを工夫して、ページ速度を改善してくれる
画像のメタデータという余分なデータを削除して軽くしてくれる
リサイズもしてくれる

というように、全般的に画像を最適化してサイトを高速化してくれます。

EWWW Image Optimizerの細かな設定やWebP以外の使い方については以下の記事で解説しています。

【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】

今回は、EWWW Image Optimizerのインストール・初期設定・WebPに変換するための設定や使い方を解説します。

⇡目次へ戻る

EWWW Image Optimizerの導入方法

EWWW Image OptimizerでWebPに変換するためにまずはインストールと初期設定を進めましょう。

インストールと有効化

WordPressの管理画面から「プラグイン」→「新規追加」をクリックします。

検索窓に「EWWW Image Optimizer」と入力して検索します。

「EWWW Image Optimizer」が見つかったら「今すぐインストール」をクリックします。

注意

「EWWW Image Optimizer Cloud」という似たプラグインがありますが、「EWWW Image Optimizer Cloud」ではなく「EWWW Image Optimizer」をインストールしましょう。

インストールが完了したら「有効化」をクリックします。

「プラグインを有効化しました。」と表示されたらEWWW Image Optimizerのインストールと有効化は完了です。

次は初期設定♪

初期設定

WordPressの管理画面から「設定」→「EWWW Image Optimizer」をクリックします。

上のような初期設定画面が表示されるので、

サイトを高速化
保存スペースを節約

の両方にチェックを入れ、

「今は無料モードのままにする」

を選択して

「次へ」をクリックします。

この画面はデフォルトのままでOKです。

「完了」をクリックします。

上の画像の画面が表示されたら、EWWW Image Optimizerの初期設定は完了です。

ここからはWebPのための設定やWebPに変換する方法を解説するよ♪

WebP以外の細かな設定は以下の記事で詳しく解説しています。
WebPと合わせてさらにサイトを高速化するためにご参考ください。

⇡目次へ戻る

EWWW Image OptimizerでWebPに変換するための設定

WebPに変換するためには以下の4Stepで進めます。

【Step1】：EWWW Image OptimizerでWebPの設定をする
【Step2】：WebPのためのコードを取得する
【Step3】：「.htaccess」にコードを貼り付ける
【Step4】：画像をアップロードすれば自動でWebPに変換される

Step3まで設定が完了したら、あとは画像をアップロードするだけで自動でWebPに変換してくれるようになるよ♪

【Step1】EWWW Image OptimizerでWebPの設定をする

まずはWordPressの管理画面から「設定」→「EWWW Image Optimizer」をクリックして、EWWW Image Optimizerの設定画面を開きます。

「基本」のタブのメニューが開かれていることを確認してください。

「WebP変換」という項目があるところまで画面をスクロールします。

「WebP変換」にチェックを入れて「変更を保存」をクリックします。

【Step2】WebPのためのコードを取得する

「WebP変換」にチェックを入れて「変更を保存」をクリックしたら、次の画像のようにコードが表示されます。

ここに表示されたコードを全てコピーしてください。

以下に同じコードを記載しておきます。

<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

これでStep2は完了です。

あとはStep3で、このコードを「.htaccess」というファイルに貼り付けすればWebPのための設定が完了になります。

注意

「リライトルールを挿入する」というボタンで自動的に「.htaccess」にコードを追記することができますが、エラーが起こりやすいのでStep3で解説する方法で手動で行ってください。

【Step3】「.htaccess」にコードを貼り付ける

このStepでは、先ほどコピーしたコードを「.htaccess」という設定ファイルに記述します。

次の3つの手順で進めます。

サーバーにログインする
「.htaccess」ファイルの編集画面を開く
コードを貼り付けて保存する

それぞれ順番に解説します。

注意

「.htaccess」という設定ファイルを編集することになるので、以下の記事を参考にWordPressのバックアップを取っておきましょう。数分で簡単にバックアップを取れます。
>> 【2021年最新】BackWPupの正しい設定方法と使い方：自動バックアッププラグイン【WordPress】

【2021年最新】BackWPupの正しい設定方法と使い方：自動バックアッププラグイン【WordPress】

【Step3-1】サーバーにログインする

まずはWordPressを利用しているレンタルサーバーのマイページにログインをしてください。

【Step3-2】「.htaccess」ファイルの編集画面を開く

次は「.htaccess」ファイルの編集画面を開きます。

memo

本記事では「.htaccess」の開き方を、mixhostを例に解説しますが、他のレンタルサーバーでも大まかな操作方法は同じです。

大まかな手順は同じですが、さらに詳細な手順を知りたい方は以下のそれぞれのサイトをご覧ください。

各サーバーでの「.htaccess」編集方法

>> mixhostでの「.htaccess」ファイルの編集方法
>> エックスサーバーでの「.htaccess」ファイルの編集方法
>> ロリポップでの「.htaccess」ファイルの編集方法
>> ConoHa WINGでの「.htaccess」ファイルの編集方法

マイページを開いたら「ファイルマネージャー」をクリックします。

サーバーのファイルの一覧が表示されるので、画面右上の「Settings」をクリックします。

「Show Hidden Files(dotfiles)」にチェックを入れて「Save」をクリックします。

「Show Hidden Files(dotfiles)」とは

「.htaccess」などの名前が「.」から始まるファイルは通常はファイルマネージャーでは非表示になっています。この設定を変更することで、「.」から始まるファイルを表示することができます。

「.htaccess」にEWWW Image OptimizerのWebPコードを貼り付ける-4

「public_html」 > 「ドメイン名」

のフォルダを開きます。

・wp-admin
・wp-content
・wp-include

などのフォルダが見つかれば正しい場所を開けています。

「.htaccess」のファイルをクリックで選択してから「Edit」をクリックします。

注意

「バックアップを取っておきましょう。」のようなことが書かれているので、以下の記事を参考にWordPressのバックアップは取っておきましょう。
>> 【2021年最新】BackWPupの正しい設定方法と使い方：自動バックアッププラグイン【WordPress】

「Edit」をクリックすれば「.htaccess」ファイルの編集画面を開くことができます。

【Step3-3】コードを貼り付けて保存する

あとは先ほどEWWW Image Optimizerの設定画面でコピーしたコードを、「.htaccess」ファイルの冒頭に貼り付けて「Save Changes」をクリックして保存します。

注意

コードは必ず「.htaccess」ファイルの冒頭に挿入してください。

注意：ブラウザキャッシュを使っている時は追加のコードが必要

サイトを高速化するためにブラウザキャッシュを利用する設定にしている方は、

追加で以下のコードを挿入する必要があります。

ExpiresByType image/webp "access plus 1 weeks"

上記のコードを

<IfModule mod_expires.c>

と

</IfModule>

の間に挿入すればOKです。

WebPのキャッシュを作成して利用するためのコードだよ♪

【Step3-4】緑のWEBPマークが表示されたら完了

「.htaccess」ファイルにコードを記述したら、EWWW Image Optimizerの設定画面を開いて再読み込みをすると

上の画像のように緑の「WEBP」マークが表示されています。

無事緑のマークが表示されていれば、WebP画像を使うための設定が完了です。

memo

「マークが赤色のPNGから変わらない」という方は「①設定が赤色の「PNG」から緑色の「WEBP」に変わらない場合」の見出しで対処法を解説しています。

注意

設定が完了しても

「このサイトには mod_headers が抜けているようです。この apache モジュールを有効化するよう、ホスティング会社やシステム管理者にご連絡ください。」

の表示が消えない場合がありますが、時間が経つとこの表示は消えているようです。

【Step4】画像をアップロードすれば自動でWebPに変換される

Step3まで設定が完了したら、あとは通常通り画像をアップロードするだけでWebPに自動的に変換されます。

WebPに変換できているか確認しよう

WebPにちゃんと変換されているか確認してみよう♪

WordPressの管理画面の「メディア」→「ライブラリ」をクリックします。

上の画像のマークをクリックして、ライブラリをリスト表示に切り替えます。

すると画面の右の方に「画像最適化」という欄が表示されます。

これがEWWW Image Optimizerでの圧縮や変換のステータスです。

「WebP：〇〇KB」

のように、WebPと表示されていれば画像が無事変換されています。

memo

WebPを設定する前にアップロードされていた画像はまだWebPに変換されていないので、次の「アップロード済みの画像をEWWW Image Optimizerで一括でWebPに変換する方法」の見出しで変換方法を解説します。

レンタルサーバーのファイルマネージャーで画像ファイルを確認しても、無事WebPのファイルが作成されています。

⇡目次へ戻る

アップロード済みの画像をEWWW Image Optimizerで一括でWebPに変換する方法

EWWW Image OptimizerでWebPに変換する設定を完了しても、設定する以前にアップロードされた画像はWebpに変換されないので、

自分で操作してWebPに変換する必要があります。

一括で変換できるから安心してね♪

WordPressの管理画面で「メディア」の中に「一括最適化」という項目が増えているのでクリックします。

すると画像のような画面に切り替わります。

EWWW Image Optimizerを使って一括で画像を操作するための画面です。

以前にEWWW Image Optimizerを使って画像を圧縮した場合は、WebPへの変換をスキップされてしまうので、以前の履歴を削除する必要があります。

そのために、「最適化の履歴を表示する」をクリックしてください。

「最適化履歴を消去」をクリックします。

これで以前の履歴の削除は完了です。

もちろん画像は削除されないので安心してね♪

アップロード済みの画像をEWWW Image OptimizerでWebPに変換する方法-5

・「画像の圧縮はしなくて良い」
・「WebPに変換するだけで良い」

という方は「WebPのみ」にチェックを入れることで、圧縮などは行わずにWebPへの変換だけを行うこともできます。

ですが、サイトを高速化するためには圧縮も全て行うのがおすすめです。

「最適化されていない画像をスキャンする」をクリックします。

変換可能な画像の枚数が表示されるので、「◯点の画像を最適化」をクリックすると変換が始まります。

あとは画像の変換が完了するのを待てば、全ての画像がWebPに変換されます。

⇡目次へ戻る

画像がWebPで表示されているか確認する方法

画像がWebPに変換されているか確認する方法は「WebPに変換できているか確認しよう」の見出しで解説したとおりですが、

サイトでWebP画像が表示されているかも確認しておきましょう。

Firefox・Google Chrome・Safariの場合

WebPで表示されているか確認するには以下の手順で確認できます。

自分のサイトを開く
画像の上で右クリック
「名前を付けて画像を保存」をクリック

画像を保存する画面で上の画像のように

形式が

「Google’s WebP」

となっていればWebPで表示されている証拠です。

memo

「画像のアドレスをコピー」などでアドレスを確認するだけではPNGやJPEGのアドレスになっていることもあります。「名前を付けて画像を保存」から確認しましょう。

IEの場合

ブラウザがIEの場合はブラウザ自体がWebPにまだ対応していないので、Google Chromeなどの他のブラウザからご確認ください。

⇡目次へ戻る

WebPに変換できない・反映されない時のチェックリスト

・うまく設定できない
・変換されい
・WebPで表示されない

などうまくいかない時のために

以下の3つの場合とその対処法を解説します。

①設定が赤色の「PNG」から緑色の「WEBP」に変わらない場合
②画像をWebPに変換できない場合
③サイトで画像がWebPで表示されない場合

①設定が赤色の「PNG」から緑色の「WEBP」に変わらない場合

「.htaccess」にコードを貼り付けても、設定が反映されない場合についてです。

対処法①ブラウザのキャッシュを削除する

1つ目の原因は、ブラウザのキャッシュが残っていることです。

使用しているブラウザの設定メニューでブラウザのキャッシュを削除してから、再度EWWW Image Optimizerをリロードして確認してみてください。

対処法②画像の遅延読み込み機能があるプラグインを停止する

2つ目の原因は、他の「画像の遅延読み込み」機能があるプラグインと干渉してうまく動作していない場合です。

「画像の遅延読み込み」はサイトを高速化するために重要な機能ですが、EWWW Image Optimizerで「画像の遅延読み込み」もできるので、干渉しているプラグインを停止してEWWW Image Optimizerだけを使うのがおすすめです。

②画像をWebPに変換できない場合

最適化の処理を行ってもWebPに変換できない場合の対処法をご紹介します。

対処法①「最適化履歴を消去」する

以前にEWWW Image Optimizerで最適化したことがある画像はWebPに変換しようとしてもスキップされてしまいます。

なので以前の最適化の履歴を削除してから、再度一括最適化で変換しましょう。

「一括最適化」のページで、「最適化の履歴を表示する。」をクリックして

「最適化履歴を消去」をクリックして履歴を消去してから一括変換してみましょう。

対処法②一括ではなく個別で変換する

一括最適化を行っても、圧縮はできてもWebPに変換できないことがあるようです。

その場合は一括ではなく個別でWebPに変換する必要があります。

「メディア」の「ライブラリ」を開き、上の画像のように「画像最適化」の項目を確認します。

「今すぐ最適化！」か、もしくは

「再最適化！」と表示されているので、これをクリックすることで個別で手動でWebPに変換できます。

全ての画像を行うのは大変なので、データの大きな画像だけ対応しよう♪

③サイトで画像がWebPで表示されない場合

サイトを確認すると、WebPの画像で表示されない場合についてです。

対処法①IEではWebPは表示されない

1つ目の原因は、IEブラウザで確認している場合です。

IEはまだWebPに対応していないので、他のブラウザで確認しましょう。

対処法②キャッシュを削除する

続いての原因は、キャッシュが残っていて新しく変換されたWebPの画像を読み込まれていないことです。

ブラウザのキャッシュを削除する
キャッシュ系のプラグインを利用している場合はWordPressでもキャッシュを削除

と対応してから再度ページを読み込むとWebP画像が表示されるはずです。

対処法③設定で「<picture>WebPリライト」にチェックを入れる

それでもWebPにならない場合は、EWWW Image Optimizerの設定から「<picture>WebPリライト」にチェックを入れてみましょう。

画像のように「<picture>WebPリライト」にチェックを入れて設定を保存してからページを確認すると、WebPで表示されているはずです。