【神】EWWW Image Optimizerの設定&使い方ガイド【画像のWebP化方法】

画像をWebP化してますか？

この記事で紹介する「画像をWebP化する方法」を実践すると、次世代の画像フォーマットに対応しつつ、サイトスピードの高速化を実現できます。実際に僕も、サイトの表示速度が上がり、ユーザーの離脱率が「3%」も低下しました。

そこで本記事では、WordPressプラグイン「EWWW Image Optimizer」の使い方や設定方法、画像をWebP化する方法を解説します。

この記事を読むと、画像圧縮の重要性を理解し、ユーザーファーストなSEO対策を実現できます。

結論、画像のWebP化には、画像圧縮の神プラグイン「EWWW Image Optimizer」を使いましょう。

サイト高速化マニアは必見です。画像を圧縮し、ファーストインプレッションで離脱させないサイト作りを実践しましょう。

EWWW Image Optimizerとは？

EWWW Image Optimizer とは、画像圧縮の定番WordPressプラグインです。具体的には、下記の画像対策ができます。

• その①：画像の圧縮
• その②：画像のWebP化
• その③：画像のリサイズ
• その④：画像の遅延読み込み

どれも重要ですので、それぞれ解説します。

その①：画像の圧縮

EWWW Image Optimizer の機能①は「画像の圧縮」です。 

EWWW Image Optimizer｜画像の圧縮

上記の画像をご覧ください。左側が「圧縮前の画像」、右側が「圧縮後の画像」です。

ほんの少しだけ、画質が悪くなるものの、画像のデータ容量を減らすことができます。そして注目すべきは、スマホ画面では、その優劣がほとんどわからないこと。

PC画面では、画質の粗さが気になりますが、スマホでは画面が縮小されるため、画質の粗さがそんなに気になりません。

その②：画像のWebP化

EWWW Image Optimizer の機能②は「画像のWebP化」です。

EWWW Image Optimizer｜画像のWebP化

WebP（ウェッピー）とは、Googleが開発した圧縮率の高い次世代画像フォーマットでして、ファイルの拡張子は「.webp」です。

設定すると、画像のファイル形式を自動で「.webp」に変換してくれます。新しい画像フォーマットを使用することで、画質を落とさず、圧縮できる点がメリットですね。

Googleのデータによると、画像をWebP化すると、従来より「約30%」も画像が軽くなることがわかりました。

Googleの示した事例では、ファイルサイズは非可逆圧縮モードで（同一画像、同等画質の）JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしている。引用元：Wikipedia｜WebP

今まで「.jpeg」「.png」を使ってた方は、この機に画像をWebP化し、サイトを高速化してみましょう。WebP化の方法は「画像をWebP化する方法【4ステップ】」をどうぞ。

その③：画像のリサイズ

EWWW Image Optimizer の機能③は「画像のリサイズ」です。

EWWW Image Optimizer｜画像のリサイズ

画像のリサイズは、画像を新規アップロードするたびに自動で行なってくれます。また、手動で既存の画像をリサイズすることもできます。

その④：画像の遅延読み込み

EWWW Image Optimizer の機能④は「遅延読み込み（LazyLoad）」です。

画像の遅延読み込みとは、ファーストビューに表示されてない他の画像を、ページスクロール後に読み込む技術のこと。サイトの表示速度がガツンと改善します。

とはいえ「AFFINGER」「SANGO」などのWordPressテーマによる遅延読み込み機能と重複するため、必ずどちらかで、機能をOFFにしましょう。

 EIO側の設定

画像の遅延読み込み：EWWW Image Optimizer 側の設定

EWWW Image Optimizer の設定より、画像の「遅延読み込み」にチェックを入れましょう。画面をスクロールし、画像が表示領域に入ったときだけ画像が読み込まれます。

これにて、サイト表示スピードが大幅に改善されます。

 テーマ側の設定

画像の遅延読み込み：WPテーマ側の設定

たとえば「AFFINGER」のWPテーマを使ってる方は、AFFINGER管理 >「その他の設定」>「遅延読込」から、画像の遅延読み込み設定ができます。

EWWW Image Optimizer で設定してる方は、テーマ側で機能をOFFにしておきましょう。

画像圧縮、WebP化が重要な理由3つ

続いて、画像の圧縮、とりわけ「画像のWebP化」が重要な理由を解説します。

• 理由①：Googleの重要指標
• 理由②：サイトの表示速度が向上
• 理由③：SEO対策で必須

理由①：Googleの重要指標

Googleの掲げる理念では「サイトスピードの重要性」が説かれてます。

3. 遅いより速いほうがいい。

Google は、ユーザーの貴重な時間を無駄にせず、必要とする情報をウェブ検索で瞬時に提供したいと考えています。自社のウェブサイトにユーザーが留まる時間をできるだけ短くすることを目標にしている会社は、世界中でもおそらく Google だけでしょう。Google は、Google のサイトのページから余計なビットやバイトを削ぎ落とし、サーバー環境の効率を向上させることで、自己の持つスピード記録を何度も塗り替えてきました。検索結果の平均応答時間は 1 秒足らずです。Google が新しいサービスをリリースするときには、常にスピードを念頭に置いています。モバイルアプリをリリースするときも、新時代のウェブにふさわしい高速ブラウザの Google Chrome をリリースするときも同じです。今後も、さらなるスピードアップを目指して努力を続けていきます。引用元：Googleが掲げる10の事実

もはや、これが「答え」でして、サイトの表示スピードは超重要です。論より証拠、下記の調査データもどうぞ。

引用元：Think with Google

• ページの表示速度「1〜3秒」→直帰率が32％UP
• ページの表示速度「1〜5秒」→直帰率が90％UP
• ページの表示速度「1〜6秒」→直帰率が106％UP
• ページの表示速度「1〜10秒」→直帰率が123％UP

つまり、ページの表示速度に時間がかかるほど、ユーザーはガマンできず、ページを離脱してしまう...ということです。

そのため画像のWebP化は重要でして、記事をクリックした瞬間からページが表示されるまでの時間を高速化させましょう。

理由②：サイトの表示速度が向上

画像をWebP化すると、サイトの表示速度が向上します。

• 画像のサイズが軽くなる
• 無駄なストレージ容量を減らせる
• 記事やサイトの読み込み速度がUPする

このように、画像圧縮の恩恵が大きく、WebP化しない =「損」を意味します。もちろん、Googleやユーザーにとってもマイナスなので、画像圧縮をなるべくすべきですね。

画像圧縮のデメリット

画像を「圧縮」することによって、大なり小なり"劣化"するのは仕方ありません。また、手間が発生するのも、デメリットですね。

しかし、容量の重たい画像を軽量化しないことで発生するユーザーへのデメリットの方が大きいので、画像圧縮は欠かせません。

理由③：SEO対策で必須

Googleは、ページの読み込み速度がランキング要員の一つであることを発表してます。

検索ユーザーはできるだけ早く質問に対する答えを見つけたいと考えています。研究によると、ユーザーはページの読み込み速度を非常に気にかけています。読み込み速度これまでもランキング シグナルとして使用されていましたが、デスクトップ検索を対象としていました。そこで 2018 年 7 月より、ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。引用元：Google検索セントラル｜ページの読み込み速度をモバイル検索のランキング要素に使用します

いわゆる"Speed Update"ですが、サイトスピードがデスクトップだけでなく、モバイル検索でのランキング要因にもなりました。

画像はわりと重たいですから、圧縮にてサイトスピードを低下させない施策が求められます。とはいえ、下記の3点に注意です。

• 表示速度が極端に遅い場合に適応
• 表示速度が早くても、検索順位が上がるワケではない
• 表示速度が遅くても、検索上位に表示される可能性はある

何はともあれ、ブログで画像を使う本質は「読者の悩みを解決させる手段」ですから、過度に画像を使用しては、ユーザービリティを低下させることだけは避けましょう。

詳しい画像SEOの方法は【10選】SEOに効果的！おすすめ画像対策まとめ【PV1.5倍/画像検索の重要性】をどうぞ。

EWWW Image Optimizerの設定方法【2ステップ】

画像SEOの重要性を理解したところで、さっそく「EWWW Image Optimizer」をインストールしていきましょう。

• 手順①：新規インストール
• 手順②：各種設定

ミヤビ

サクッと3分で終わります！

手順①：新規インストール

WordPress管理画面 >「プラグイン」>「新規追加」より、検索欄に「EWWW Image Optimizer」と入力します。

手順①：新規インストール

そしたら「今すぐインストール」をクリックし、インストール後「有効」をクリックして有効化してください。

手順②：各種設定

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

• 設定①：モード変換
• 設定②：基本
• 設定③：ローカル←デフォルト設定でOK
• 設定④：高度な設定←デフォルト設定でOK
• 設定⑤：リサイズ←デフォルト設定でOK
• 設定⑥：変換←デフォルト設定でOK

 設定①：モード変更

設定①：モード変更

設定画面が開いたら [Enable Ludicrous Mode]（詳細モード）をクリックします。

ミヤビ

無料版で、十分です！

 設定②：基本

設定②：基本

• メタデータの削除：チェック→写真の位置情報などを削除します
• 画像のリサイズ：上限を超えるピクセル幅の画像をアップしたときにリサイズする
• 不足している寸法を追加：チェック→ユーザーエクスペリエンス改善
• 遅延読み込み：チェック→読み込み速度を改善

上記のとおり、設定してください。なお「画像のリサイズ幅」に関して、サイズを最適化した画像をアップロードすることで、サーバーへの負荷を減らせます。

続いて、画像のWebP化についてです。

設定②：基本｜WebP変換

• WebP変換：チェック→[.jpg]や[.png]を[.webp]に変換
• WebPの配信方法：「リライトルールを挿入する」をクリック

次世代の画像フォーマットに対応するため「WebP変換」にチェック。怪しいコードも書かれてますが、いったんスルーしつつ「リライトルールを挿入する」をクリック。

設定②：基本｜WebPの配信方法

契約してるサーバーがWebP対応してると、上記のとおり「赤（PNG）→緑（WEBP）」になります。

もし、失敗して「赤（PNG）」のままの方は「画像をWebP化する方法【4ステップ】」にお進みください。

ミヤビ

これにて、画像のWebP化は「成功」です。

 設定③：ローカル

ローカル設定は、サーバー内部で実行される処理のこと。デフォルトのままでOK。

設定③：ローカル

 設定④：高度な設定

高度な設定についても、デフォルトのままでOK。

設定④：高度な設定

 設定⑤：リサイズ

リサイズ設定についても、デフォルトのままでOK。

設定⑤：リサイズ

リサイズ設定は、WordPress本体側で設定可能です。

設定⑥：変換

変換設定についても、デフォルトのままでOK。

設定⑥：変換

特に「オリジナルを削除」をONにすると、変換する前の画像も削除されます。バックアップ用に、いつでも戻せるようOFFにしておきましょう。

画像をWebP化する方法【4ステップ】

先ほどのWebP化で、[.htaccess] へのコード挿入が失敗した方は、コードを手動で挿入しなければなりません。画像をWebP化する手順は、下記のとおりです。

• 手順①：サーバーにログインする
• 手順②：専用コードをコピーする
• 手順③：[.htaccess]を編集する
• 手順④：WebP化を確認する

お手数ですが、WordPressブログを運営する「レンタルサーバー」のサーバーパネルにアクセスする必要があります。あらかじめ、IDとパスワードをご用意くださいませ。

上級者向けです

本章では「.htaccess」を編集します。記述コードをミスると、WordPressがホワイトアウトしたり、ログインできなくなる可能性があります。

編集後、ウェブサイトが正常に表示されるか、必ず確認してください。

WordPessにログインできなくなった場合、おそらく [.htaccess] の記述ミスが原因。焦らず、元の状態に戻してください。編集前、元のコードをコピーしておきましょう。

手順①：サーバーにログインする

本記事では「エックスサーバー」にて解説します。サーバーパネルへのログインに必要な下記の2点を入力してください。

• サーバーID
• サーバーパネルパスワード

手順①：サーバーにアクセスする

安心してください！他のレンタルサーバーでも、基本的にやり方は同じです！

手順②：専用コードをコピーする

下記の画像のとおり、WebP化に必要な専用コードをコピーします。

手順②：専用コードをコピーする

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP_ACCEPT} image/webp
	RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
	RewriteCond %{REQUEST_FILENAME}\.webp -f
	RewriteCond %{QUERY_STRING} !type=original
	RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
	<FilesMatch "\.(jpe?g|png|gif)$">
		Header append Vary Accept
	</FilesMatch>
</IfModule>
AddType image/webp .webp

手順③：[.htaccess] を編集する

ここからは、慎重に操作してください。

手順③：「.htaccess」を編集する-01

サーバーパネルにログインできたら、メニュー >「ホームページ」>「.htaccess」に進みます。

手順③：「.htaccess」を編集する-02

[.htaccess] を編集するドメインを選んだら「.htaccess編集」をクリックします。

手順③：「.htaccess」を編集する-03

そしたら [.htaccess ] の一番上にコードをコピペします。

貼りつけたら「確認画面へ進む」>「実行する」をクリックし、忘れず保存しましょう。

ミヤビ

以上で [.htaccess]の編集はおわり！

 注意点

.htaccess の注意点

上記のとおり。「#BEGIN WordPress」から「#END WordPress」間に記述すると、危ない。

[.htaccess] の編集前には「バックアップ」をとりましょう。

手順④：WebP化を確認する

EWWW Image Optimizer の設定画面に戻ると、緑枠で「WEBP」になってるかと。

手順④：WebP化を確認する

WebP化は「リライトルールを挿入する」or「.htaccess編集」でできます。ブラウザによっては反映されないかもなので、Chromeなどの定番ブラウザで行いましょう。

EWWW Image Optimizerの使い方2つ

無事にWebP化できたと思うので、具体的な使い方をサラりと解説しますね。

• 使い方①：新規画像を自動最適化
• 使い方②：既存画像を手動最適化

使い方①：新規画像を自動最適化

今後、WordPressにアップロードする画像は、自動で最適化されます。

使い方①：新規画像を自動最適化

WordPress管理画面 >「メディア」>「ライブラリ」と進むと、アップロードされた画像がどれほど圧縮されてるかを確認できます。

圧縮率は「20%〜80%」ほどでして、データサイズをかなり削減できます。さらに、画像のWebP化もされており、画像がより軽量化されます。

使い方②：既存画像を手動最適化

一括最適化機能を使うと、過去にアップロードした画像をまとめて圧縮できます。

使い方②：既存画像を手動最適化-01

WordPress管理画面 >「メディア」>「一括最適化」と進んだら「最適化されていない画像をスキャンする」をクリックします。

スキャン結果が表示されたら「○○点の画像を最適化」をクリックし、アップロードした画像の圧縮が始まります。

使い方②：既存画像を手動最適化-02

最適化する画像枚数が多いですが、その理由は「一つの画像に対し、いろんな画像サイズが含まれてる」から。

WordPressは、サイトにアップロードするすべての画像に対して、デフォルトで4〜6のサイズ変更を作成します。テーマまたはインストールした他のプラグインにより、アップロードごとに作成されるサイズが追加される場合があります。したがって、メディアライブラリを見て、画像が1,000枚しかないように思われるかもしれませんが、少なくとも5,000枚ある可能性があります。引用元：なぜ自分のサイトにこんなにたくさん画像があるのですか?

おそらく、スキャン画像が大量にありますが、気にせず最適化しましょう。30分〜1時間くらいかかると思います。

ミヤビ

これにて、画像の最適化は完了！

EWWW Image Optimizerでよくある質問5つ

+ 質問④：WebP化した画像の確認方法は？

記事の画像にマウスを当て、右クリックから「名前を付けて画像を保存」をクリックしましょう。

WebP化した画像の確認方法：画像のダウンロード

すると、画像のフォルダ名が表示されまして、確認すると「.webp」になってるハズ。

+ 質問⑤：サイト表示速度の確認方法は？

Googleが無料で提供する「Page Speed Insights」が便利です。サイトURLを入力するだけで、サクッとページ速度の点数と改善項目を分析できます。

 スコアの目安とは？

Page Speed Insights｜ページ速度の確認

• PC：パフォーマンス「90点」以上
• SP：パフォーマンス「70点」以上

点数の目安は、上記のとおり。

とはいえ、点数を上げることに夢中になっては本末転倒です。なお、サイトスピードの改善は「スマホ」を意識してください。

現代は、スマホユーザーからの閲覧が「7割以上」を占めますので、PCで記事を見てる人はほとんどいません。

EWWW Image Optimizerで画像をWebP化せよ

本記事では、画像圧縮で人気定番なWordPressプラグイン「EWWW Image Optimizer」の設定方法や使い方を解説しました。

画像圧縮のプラグインでお悩みでしたら、マルッとこれ一本で解決します。

次世代の画像フォーマット「.webp」は常識になりつつありますので、この機会に挑戦してみてください。画像を最適化し、読者ファーストなSEO対策を実践しましょう。

 SEO対策

 おすすめ画像サイト

 おすすめプラグイン

WordPressブログの始め方

最後までお付き合いありがとうございました。僕のTwitter（@ImperialMiyavi）もフォローしてもらえたら嬉しいです。ブログ運営に関するお役立ち情報を発信しており、ブログとセットで勉強できます！