【5分で完了】WordPressの画像をWebPに変換・対応させるプラグイン設定方法

ユーザー

• PageSpeed Insightsで「次世代フォーマットでの画像の配信」を要求されている
• WordPressでWebP（ウェッピー）形式の画像が必要になった
• すでにアップロード済みの画像をWebPに一括変換したい

このような悩みを解決します。

こんにちは、セイタです。

WordPressでブログを運営する中で、ページの表示速度が遅いことはSEO（検索順位）に明確な悪影響を与えます。

そして、ページの表示速度が遅くなる最大の原因は、重いJPEGやPNGの「画像ファイル」が要因となっているケースがほとんどです。

ぼくは本業でシステムエンジニアをしながらブログを7年間運営していますが、画像の最適化はどんな立派なコンテンツを書くよりも先にやっておくべき基礎設定です。[cite: 1]

そのため今回は、WordPressのサイトで使用する画像を次世代フォーマットである『WebP（ウェッピー）』に自動で変換し、サイトを高速化する方法について解説します。

本記事の手順をなぞるだけで、専門知識がなくても5分でサイトのページ速度が劇的に向上するため、ぜひ最後までご覧ください。

WordPressの画像をWebP対応！プラグインを使ってサイト改善【5分で出来る】

WordPressにプラグインをインストールしてWebP対策をする前に、「なぜ画像をWebPにしなければいけないのか」その理由について簡単に確認しておきましょう。

WebP（ウェッピー）とは？

WebPとは、Googleが開発した次世代の画像フォーマット（形式）のことで、従来のJPEGやPNG形式の画像と比べると、画質を保ったままファイルサイズが圧倒的に小さいという特徴があります。

引用：A new image format for the Web | WebP | Google Developers

WordPressの画像をWebP対応にする最大の理由

WordPressで使用する画像をWebP対応する理由は、重いJPEGやPNGのままではサイトの表示速度が遅くなり、読者（ユーザー）の利便性を大きく阻害してしまうからです。

サイトの表示速度は「3秒以内」に表示出来ないと直帰率（ページから離脱する確率）が跳ね上がるという実験結果が発表されています。GoogleのJohn Mueller氏も『Webページの読み込み時間でユーザーが待てるのは2秒が限界』と公言していたほどです。

ページ速度と直帰率の関係：資料 Pingdom

そのため、WordPressで使用する画像を強制的にWebPに変換し、サイトの表示速度を早めなければ、SEOにおいて大きなマイナス評価を受ける原因になってしまいます。

画像をWebP対応しないとどうなる？

WordPressの画像をWebP対応しないと、ページの表示速度が低下し、読者がストレスを感じてブラウザバックしてしまいます。

例えば、いくら魂を込めて良いコンテンツページを作成したとしても、ユーザーに読まれる前に表示が遅くて直帰されてしまっては、Googleから「価値のないページ」と判断され、検索順位が低下するという事態に陥ります。

そのため、SEO対策プラグインを入れたり、質の高い文章を書くことも重要ですが、何よりも先に「ユーザーに快適なページ閲覧をしてもらうためのWebP対応（インフラ整備）」をしておかなければいけません。

WordPressの画像をWebP対応するためのプラグイン設定

WordPressの画像をすべて手作業でWebPにするのは不可能ですが、プラグインを使えば非常に簡単です。

『EWWW Image Optimizer』というプラグインを使用すれば、これからアップロードする画像だけでなく、すでにサイト内で使用している過去の画像も自動でWebPへ一括変換してくれます。

WebPに変換するプラグイン『EWWW Image Optimizer』を導入

まずは、WebP変換に必要になるWordPressのプラグインをインストールしていきましょう。

『EWWW Image Optimizer』をプラグインの新規追加から検索してインストールします。

インストールをして有効化をすると、WordPressのダッシュボードのサイドバー「設定」の中に『EWWW Image Optimizer』の項目が追加されます。

確認できたら、『EWWW Image Optimizer』をクリックして設定画面へ移動します。

『EWWW Image Optimizer』のWebP設定方法

今回はWebPの変換方法についての設定のみを解説するため、その他の細かな圧縮設定については省略します。

『EWWW Image Optimizer』の設定画面を開くと、上部に『WebP』というタブ（または基本設定タブ内のWebPの項目）が確認できると思います。そこをクリックすると、下記のような画面に移動します。

設定は非常に簡単で、『JPG, PNGからWebP（WebP の配信）』の隣にあるチェックボックスをクリックしてチェックを入れるだけです。

『変更を保存』ボタンを押すと、保存ボタンの下に注釈（赤いボックス）が表示され、何やら難しめのコードが書かれているはずです。

このコードの追記（コピペ）を行うことで、初めてWebPが有効化されます。

.htaccessにWebP変換用のコードをコピペする

WebP変換の配信に必要になるコードは、設定画面に表示されているものをそのまま使ってもらえればOKです。

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

※末尾に不要な空白が入っていないことを確認してください。

このコードをサーバー上にある『.htaccess』というファイルに追記します。方法はご利用のサーバーによって異なりますが、代表的なエックスサーバーの例で解説します。

エックスサーバーの管理画面から.htaccessへ追記する手順

エックスサーバーを使用している方は、ブラウザ上の管理画面から直接編集できるので一番簡単です。

※FTPソフトを使用する場合も、ドメインの「public_html」直下にある .htaccess ファイルをダウンロードし、テキストエディタ（TeraPadなど）で開いて最下部に追記し、上書きアップロードすれば完了です。メモ帳での編集はエラーの原因になるため厳禁です。

WordPressの「メディア」から一括最適化を実行して完了

.htaccessへのコード追記が完了し、EWWW Image Optimizerの設定画面で赤いボックスが消えて「PNG（WebP）アイコン」が緑色に変わったら設定完了です。

あとは、WordPressのサイドバーにある「メディア」＞「一括最適化」を開き、『最適化されていない画像をスキャンする』をクリックして実行します。

過去にアップロードした画像の量によってはある程度時間がかかるため、コーヒーでも飲みながら気長に待ちましょう。完了の文字が表示されたら、過去画像のWebP変換もすべて完了です。

画像がWebPに変換・配信されているか確認する方法

この手順でWebPに変換できているはずですが、実際に確認できないと不安だと思うので、念のため確認する方法を紹介しておきます。

デベロッパーツール（開発者ツール）で確認するのが一番簡単

ブラウザ（Google Chromeなど）の機能を使って、画像がWebPで読み込まれているか確認するのが最も確実です。

※サーバー側のファイル管理（FTPなど）を見てみると、元の「.jpg」ファイルと同じフォルダに「.jpg.webp」という拡張子のファイルが生成されていることが確認できるはずです。

まとめ：WordPressの画像をWebPに変換するのは必須のSEO対策

WordPressの画像をWebPに変換するのは、サイトのスピードを向上させるための必須インフラです。

意外とおろそかになってしまっている人が多いサイトの表示スピードですが、Googleのウェブマスター向けガイドラインでも非常に重要視されています。

WebP化することでサイトの離脱率を下げることができ、自サイトの検索順位（上位表示）にも直結するため絶対に軽視はできません。

コンテンツ作りに注力するのも大切なことですが、まずはサイト全体の快適さを保ち、読者に対しての配慮を行うことが、Googleからの評価を最大化させる第一歩になります。5分で終わる作業なので、今すぐプラグインを導入してWebP化を完了させてしまいましょう！