WordPressでWebP画像を使えるようにする方法3ステップ【サイト高速化】

こんにちは、ヨッチです。

あなたは、WebP画像をWordPressに導入したことはありますか?

jpg・pngと比べると、容量が圧倒的に少ないから便利ですよね。
それでいて画質もほとんど劣化しないので、まさに次世代フォーマットと呼べるでしょう。

この記事では、WordPressでWebP画像を使えるようにする方法を3ステップで紹介します。
画像の容量がグッと減るので、サイト高速化にもかなり役立つ内容です。

また、WebPフォーマットに対応しつつjpg・pngで表示することも可能です。
対応ブラウザのみWebPが表示されるので、あらゆるデバイスで利用できますよ。

WordPressでWebP画像を使えるようにする方法3ステップ

最初に、WebP画像を使えるようにする方法3ステップをまとめてお伝えします。

  1. プラグインでWebP変換を有効にする
  2. 「.htaccess」にリライトルールを追記する
  3. すでにアップされている画像をWebPに変換する

この流れで、簡単にWebP画像に対応できます。
しかも、一度設定すればあとは放置してもOKです。

ということで、各ステップをより詳しく見ていきましょう!

【1】プラグインでWebP変換を有効にする

WordPressでWebP画像を使うには、「EWWW Image Optimizer」というプラグインを利用します。

プラグインを有効化したら、「設定」→「EWWW Image Optimizer」を開きましょう。

「基本」タブに「WebP 変換」があるので、チェックを入れて「変更を保存」をクリックします。

「WebP 変換」

保存すると、「WebP Delivery Method」にリライトルールのコードが表示されます。

リライトルールのコードが表示される

ここから、「.htaccess」にリライトルールを追記していきます。

【2】「.htaccess」にリライトルールを追記する

まずは、「WebP Delivery Method」に表示されているコードをすべてコピーします。

コードをすべてコピーする

次に、WordPressがインストールされているルートフォルダの「.htaccess」を開きます。

FTPソフトで「.hataccess」ファイルをダウンロードして、テキストエディタで開けばOKです。

「.hataccess」ファイル

開いた「.htaccess」ファイルの一番下に、先ほどコピーしたリライトルールを追記しましょう。

一番下の行にリライトルールを追記する

すでに書かれているソースコードは、上書きしてはいけません。
かならず「追記」するようにしましょう。

「.htaccess」ファイルに追記したら、WordPressのルートフォルダに再アップロードします。

問題なくリライトルールが追記されていれば、プラグインの設定画面で緑色の画像が表示されます。

緑色の画像が表示される

このように「WEBP」と書かれた画像が表示されていればOKです。

「mod_headersが抜けているようです」と表示される場合

僕はエックスサーバーを使っていて、「mod_headersが抜けているようです」と表示されます。

「mod_headersが抜けているようです」

ビックリするかと思いますが、エックスサーバーでは気にしなくてOKです。

詳しく説明すると、エックスサーバーでは「nginx」というシステムが使われています。
「nginx」は従来の「Apache」とは異なるため、プラグインがメッセージを表示しています。

ただ、エックスサーバーではApacheで設定された「.htaccess」ファイルをそのまま使えます。

nginxについて

なので、このまま設定を進めて大丈夫です。

【3】すでにアップされている画像をWebPに変換する

最後に、すでにアップロードされている画像をWebPに変換しましょう!

ダッシュボードから「メディア」→「一括最適化」を開きます。

「メディア」→「一括最適化」を開く

画面の右側に、以下2つのチェックボックスがあります。

「再最適化を強制」「WebPのみ」のチェックボックス

  • 再最適化を強制
  • WebP のみ

今まで「EWWW Image Optimizer」を使ったことがあるかどうかでチェックの入れ方が変わります。

今回はじめて「EWWW Image Optimizer」を使う場合
どちらにもチェックを入れない
今まで「EWWW Image Optimizer」を有効化していた場合
「再最適化を強制」「WebPのみ」2つにチェックを入れる

今回はじめて「EWWW Image Optimizer」を有効化したなら、チェックは入れなくてOKです。
今までも利用していたなら、2つともチェックをいれましょう。

「最適化されていない画像をスキャンする」をクリックすると、対象の画像がピックアップされます。

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

次に「〇〇点の画像を最適化」をクリックすれば、すべての画像がWebPに変換されます。

「〇〇点の画像を最適化」をクリック

画像の変換が完了したら、画面を切り替えてもOKです。

画像の変換が完了

これであなたのサイトもWebPフォーマットに対応できました!

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

WebPが表示されているか確認するなら、Crome拡張機能の「WebP Highlighter」が便利です。

画像にハイライトで枠がついていれば、WebPで表示されているっていうことですね。

画像にハイライトで枠がついている

ちなみに、色分けのルールは以下のとおりです。

  • 緑:不可逆圧縮
  • 紫:可逆圧縮
  • 赤:アニメーションなどの拡張を含むWebP画像

インストールするだけで画像が色分けされるので、入れておくとわかりやすいですよ。

【まとめ】設定するだけでWebPに自動で対応できる

「EWWW Image Optimizer」を導入すれば、簡単にWebPフォーマットに対応できます。
しかも、一度設定しておけば放置してもOKです。

かなり導入しやすいうえに、サイト高速化の効果は絶大です。
少しでもレスポンス速度を上げるなら、必須の設定だといえます。

今回の設定では、WebPだけでなくjpg・pngの表示にも対応しています。
画像の振り分けも自動なので、できるだけ早めに導入しておきたいですね。

ヨッチヨッチ

最後まで読んでいただき、ありがとうございます。
どんなことでもコメントもらえると嬉しいです!
僕からもかならず返信しています。

WEBサイトは構築よりも運用のほうが重要

あなたもご存知のとおり、WEBサイトは作って終わりではありません。
むしろ、構築してからいかに運用するかのほうが重要です。

もしWEBサイトの運用に関してご質問等ありましたら、このブログでご相談を受け付けています。
長期的な運用にご興味があれば、僕が全力でサポートします。

【WPクエスト】サイト構築から学べる無料講座はこちら

【ミライヨッチ】お問い合わせはこちら