【2024年版】WordPressでWebP変換&対応させる方法

2024年3月21日

WebPはGoogleが開発した画像フォーマットで、従来のJPEGやPNGよりも高品質な圧縮が可能です。
画像ファイルサイズを大幅に削減することができるため、ウェブサイトの読み込み速度を大きく改善することに繋がります。

とはいえ、WebPは2010年に発表された比較的新しい画像ファイル形式のため、ブラウザによってはサポートされていない場合があります。（例えばSafariの場合、”iOS14″以降、Macでは”macOS 11 Big Sur”以降でないとサポートされていません。
そのため、WebP画像を使用する場合は現状、非対応ブラウザへの対策も必要不可欠となります。

WebP画像に関する基本的な知識は以下の記事で解説しているので、あわせて読むと理解が深まります。

WebPで画像軽量化！pictureタグでの非対応ブラウザ対策

この記事では「WordPressでWebP画像を使用するための方法」に焦点を当てて、非対応ブラウザ対策のやり方も合わせて解説していきます。

（WebP対応におすすめのプラグインだけを知りたい方は、こちらをクリックしてください）

プラグインなしでWebP画像に対応する方法

プラグインなしでの実装方法は、開発者やサーバーの知識がある運用者向けの内容になっています。
それ以外の方が運用することが想定される場合は、後述するプラグインを使う方法を推奨しているので、こちらのリンクから解説部分に飛んでください。

プラグインを使わずにWebP画像に対応させるには、以下の手順を実行します。

「WebP形式の画像」と「従来のファイル形式の画像」を用意
メディアライブラリやサーバーに画像をアップロード
pictureタグで非対応ブラウザ対策

順番に解説していきます。

1. 「WebP形式の画像」と「従来のファイル形式の画像」を用意

WordPressには画像をWebP形式に変換するような機能は標準で備わっていないため、自分でWebP形式の画像を用意する必要があります。

画像をWebPに変換するためには、Squooshなどを使用すると便利です。
詳しいやり方は以下の記事で解説しています。

Squooshで画像をWebP形式へ変換する方法

WebP変換前の「従来のファイル形式の画像」も、WebPがサポートされていないブラウザに表示するために必要になります。

WebP形式の画像
従来のファイル形式の画像

の２種類の画像を用意しましょう。

2. メディアライブラリやサーバーに画像をアップロード

前の工程で用意した２種類の画像を配信できるようにするため、画像を任意のサーバーにアップロードします。

ここでは、(a) WordPressのメディアライブラリにアップロードする方法（WordPress5.8以降）と、(b) WordPressサーバーに直接アップロードする方法を紹介します。

2-(a) WordPressのメディアライブラリにアップロードする方法

WordPressはバージョン5.8から、メディアライブラリにWebP画像をアップロードすることが可能になりました。
WordPress5.8以降を使用している場合は、この方法を使うことができます。

メディアライブラリに「WebP形式の画像」と「従来のファイル形式の画像」を一緒にアップロードしましょう。

尚、メディアライブラリに画像をアップロードした場合は、「image-150×150.webp」や「image-300×300.webp」など、サイズバリエーションの画像も自動生成されるため、srcset属性で画面幅に応じた表示画像の切り替えも実装可能です。

以前はメディアライブラリはWebPのアップロードに対応していなかったため、WebP画像をアップロード可能にするためのfunctions.phpのコードを解説している記事が検索結果に出てくることがありますが、現在はそのような施策は不要です。

WebPのアップロードに対応したとはいえ、エディタの画像ブロックなどでWebP画像を挿入した場合、imgタグによって出力されるだけで非対応ブラウザ対策は標準で行われません。そのため、この後解説する非対応ブラウザ対策の実装が必要になります。

最後に、次の工程で画像を読み込むのに使用するため、画像のURLを控えておきます。
（アップロードした画像をクリックして詳細を開き、「URLをクリップボードにコピー」で画像のURLを取得できます）

2-(b) WordPressサーバーに直接アップロードする方法

FTPやレンタルサーバー側に搭載されているファイルマネージャーなどの機能を使うことで、WordPressがインストールされたサーバーに画像を直接アップロードすることが可能です。

バージョン5.8未満のWordPressを使用している場合や、画像の管理場所をメディアライブラリと別にしたい場合などは、こちらの方法を使用すると良いでしょう。

例として、ConoHa WINGのファイルマネージャー機能を使用した方法を紹介します。

ConoHa WINGの管理画面にログインしたら、「サイト管理」→「ファイルマネージャー」を選択します。

別タブでファイルマネージャーの画面が開くので、左のメニューから「public_html」→「サイトのドメイン名」→「wp-content」と選択します。wp-contentフォルダは、画像やテーマ、プラグインなど、WordPressサイトの外観や機能を変更するためのファイルが格納されています。
（メディアライブラリにアップロードした画像は、この中の「uploads」というフォルダ内に保存されます。）

wp-contentフォルダ内で右クリック→「新規フォルダ」を選択して、好きな名前でフォルダを追加しましょう。（ここでは、「files」というフォルダ名にしました。）
作成したフォルダ内に「WebP形式の画像」と「従来のファイル形式の画像」を一緒にアップロードしましょう。下の画像の赤枠部分のボタンを押すか、ファイルをドラッグ＆ドロップすることで、アップロードが出来ます。

メディアライブラリにアップロードした場合と違って、「image-150×150.webp」や「image-300×300.webp」などのサイズバリエーションの画像は自動生成されません。サイズ違いの画像を出し分けたい場合は、全て自前で画像を用意する必要があります。

最後に、次の工程で画像を読み込むのに使用するため、画像のURLを控えておきます。
画像のURLはhttps://サイトのドメイン/wp-content/作成したフォルダ名/アップした画像ファイル名の構成になります。

3. pictureタグで非対応ブラウザ対策

WordPressは標準ではWebP非対応ブラウザへ代替画像を表示する等の対策は行いません。
エディタの画像ブロックなどでWebP画像を挿入した場合も、imgタグによって出力されるのみです。

そのため、WebP非対応ブラウザをサポートするために、pictureタグで画像を表示します。

ブロックエディタの「カスタムHTML」などを使用して、直接HTMLを記述しましょう。

カスタムHTMLを選択し、以下のようにコードを記述してください。

<picture>
    <source type="image/webp" srcset="https://your-domain.com/wp-content/uploads/2023/04/image.webp" />
    <img src="https://your-domain.com/wp-content/uploads/2023/04/image.jpg" alt="" width="1024" height="1024" />
</picture>

sourceタグにtype="image/webp"と記述し、ブラウザがWebPをサポートしている場合に表示させるWebP画像のURLをsrcset属性に記述します。
WebPをサポートしていないブラウザでも代わりの画像を表示させるため、imgタグのsrc属性に、従来のファイル形式の画像URLを記述します。

WordPressの画像ブロック等で画像を挿入した場合と違い、カスタムHTMLで表示した画像にはCSSスタイルが適用されないため、各自でCSSの調整も行う必要があります。

サイズ違いの画像を画面幅に応じて出し分けたい場合は、以下の例のように記述します。（画像URLは自身のファイル名と合うように書き換えてください）

<!-- 例 -->
<picture>
    <source
        type="image/webp"
        srcset="
            https://your-domain.com/wp-content/uploads/2023/04/image-150x150.webp 150w,
            https://your-domain.com/wp-content/uploads/2023/04/image-300x300.webp 300w,
            https://your-domain.com/wp-content/uploads/2023/04/image-768x768.webp 768w,
            https://your-domain.com/wp-content/uploads/2023/04/image-1024x1024.webp 1024w,
            https://your-domain.com/wp-content/uploads/2023/04/image-1536x1536.webp 1536w,
            https://your-domain.com/wp-content/uploads/2023/04/image-2048x2048.webp 2048w,
        "
    />
    <img
        srcset="
            https://your-domain.com/wp-content/uploads/2023/04/image-150x150.jpg 150w,
            https://your-domain.com/wp-content/uploads/2023/04/image-300x300.jpg 300w,
            https://your-domain.com/wp-content/uploads/2023/04/image-768x768.jpg 768w,
            https://your-domain.com/wp-content/uploads/2023/04/image-1024x1024.jpg 1024w,
            https://your-domain.com/wp-content/uploads/2023/04/image-1536x1536.jpg 1536w,
            https://your-domain.com/wp-content/uploads/2023/04/image-2048x2048.jpg 2048w,
        "
        src="https://your-domain.com/wp-content/uploads/2023/04/image.jpg"
        sizes="(max-width: 1024px) 100vw, 1024px"
        alt=""
        width="1024"
        height="1024"
    />
</picture>

以上で、WebP対応ブラウザにはWebP画像が、非対応ブラウザには従来のファイル形式の画像が自動で表示されます。

pictureタグを使わずに、JavaScriptや.htaccessを使う方法もあります。

ただし、pictureタグは現在、IE等を除く主要なブラウザの全てでサポートされているため、あえてJSで工数をかけて実装するメリットは薄いです。

また、.htaccessを使用する方法は、メディアライブラリへのアップロード時に自動生成されるサイズ違いの画像に対してWebP対応させるのが非常に手間がかかります。

以上を踏まえて、プラグインを使わない場合はpictureタグで非対応ブラウザ対策することを推奨します。

プラグイン「EWWW Image Optimizer」でWebP変換＆対応する方法

画像のWebP変換や非対応ブラウザ対策を自動で行ってくれるプラグインは様々なものがありますが、中でもEWWW Image Optimizerというプラグインがおすすめです。

EWWW Image Optimizerは画像のWebP対応だけでなく、圧縮やリサイズも自動で行ってくれる機能があるので、画像を軽量化させるのにとても有用なプラグインです。

1. プラグインのインストール

プラグインの新規追加ページにて、検索欄に「ewww」と入力します。
すると、「EWWW Image Optimizer」のプラグインが表示されるので、インストールして有効化してください。

2. プラグインの初期設定

プラグインを有効化すると、以下のような初期設定画面に移行します。

「サイトを高速化」、「保存スペースを節約」、「今は無料モードのままにする」にチェックを入れ、「次へ」をクリックします。（有料にすることで更に高性能な機能が使用できますが、無料でも十分です）

続いて、

「メタデータを削除」にチェックを入れます
「遅延読み込み」は特に理由がなければチェックを外します。（WordPress5.5以降では画像の遅延読み込みが標準機能になっていることと、テーマや他のプラグインの機能と干渉する恐れがあるため）
「WebP 変換」にチェックを入れます。「WebP 変換」をクリック後に表示される「次へ」ボタンを押すことで「WebP 変換」にチェックが入ります

最後に「設定を保存」をクリックします。

上のような画面が表示されるので、「完了」ボタンを押せば、初期設定は完了です。

ここまでの設定内容は、WordPressサイドメニューの「設定」から「EWWW Image Optimizer」を選択することで、いつでも確認・変更が可能です。

WebP変換の機能が正しくONになっているか確認しましょう。

3. WebP配信方法の設定

続いて、WebP画像の配信方法を選択します。
WebP画像の配信には以下の３つの方法があります。

サーバーベースのWebP配信
　(a) .htaccessを使用する方法

HTMLベースのWebP配信
　(b) JavaScriptを使用する方法
　(c) pictureタグを使用する方法

プラグインが推奨しているのは、(a) .htaccessを使用する方法になります。この方法はApacheというWebサーバーを使用しているレンタルサーバーを対象にしています。（ConoHa WING、エックスサーバー、ロリポップ、mixhost、さくらのレンタルサーバ等は使用可能です）

.htaccessはサーバーの重要な設定ファイルなので、操作することに不安のある方や、手っ取り早く機能を使いたい方は、(c) pictureタグを使用する方法をおすすめします。

HTMLベースの(b)か(c)の方法を使用する場合、両方にチェックを入れて機能を兼用することもできます。
一方で、サーバーベースである(a)の方法と、HTMLベースである(b), (c)の方法は兼用できません。
（ (b), (c)のどちらかにチェックを入れて保存した場合、(a)のエリアは非表示になります。もし途中で.htaccessによる設定に切り替えたくなった場合は、(b), (c)両方のチェックを外して保存することで、再び(a)のエリアが表示されます）

3-(a) .htaccessを使用する方法

この方法はApacheというWebサーバーを使用していて、.htaccessの編集が許可されているサーバーでのみ使用可能です。
（ConoHa WING、エックスサーバー、ロリポップ、mixhost、さくらのレンタルサーバ等は.htaccessの編集が可能なため、この方法を使うことが出来ます。それ以外のレンタルサーバーを使用している場合は仕様を確認しましょう。）

.htaccessの設定を間違えると重大なエラーが発生する可能性があるため、事前にバックアップをとっておきましょう。
WordPressのバックアップには「UpdraftPlus WordPress Backup Plugin」というプラグインがおすすめです。

この方法では、.htaccessというファイルに画像の配信ルールのコードを追記します。
これにより、ページ閲覧者のブラウザから画像のリクエストがサーバーに送られた際、サーバーがWebP対応ブラウザに対してWebP画像をレスポンスとして返すよう指示することができます。

「リライトルールを挿入する」というボタンをクリックすることで、自動で.htaccessにコードを挿入してくれる機能がありますが、うまく動作しない場合があるため、手動で記述することを推奨します。

.htaccessファイルに追加するコードは、「WebPの配信方法」という項目の中に記載されています。
下の画像の赤枠部分のコードをコピーして、控えておきましょう。

続いて、ご自身のWordPressレンタルサーバーの管理画面から.htaccessの編集画面にアクセスしましょう。

各レンタルサーバーの.htaccess編集方法

.htaccessの編集画面に入ると、すでにいくつかのコードが記載されていると思います。
それらのコードを変えないよう注意しながら、ファイルの冒頭に先ほどコピーしたコードを貼り付け、忘れずに保存してください。（ファイルの冒頭以外に貼り付けると不具合の起きる可能性があります）

.htaccessの編集が終わったら、EWWW Image Optimizerの設定画面に戻り、ページを再読み込みしてください。
PNGと書かれた赤い画像が、WEBPと書かれた緑の画像に切り替わっていれば、正しく設定ができています。

⬇︎

以上で設定は完了です。

3-(b) JavaScriptを使用する方法

「JS WebPリライト」にチェックを入れることで、JavaScriptを使用してWebP画像を配信します。

この機能を有効化すると、headタグにスクリプトが挿入され、ページ読み込み時にブラウザがWebPをサポートしているか判定します。WebPをサポートしているブラウザの場合は、ページ内のimgタグに記載された画像URLが、JavaScriptによってWebP画像のURLに動的に切り替わります。

「JS WebP and Picture Web Exclusions」の欄で、この機能から除外する要素を指定することもできます。

3-(c) pictureタグを使用する方法

「Picture WebP Rewriting」にチェックを入れることで、pictureタグによってWebP画像が配信されます。

エディタで挿入した画像は通常、imgタグで出力されますが、この機能を有効化するとpictureタグによって出力されるようになります。pictureタグにはWebPサポートブラウザ向けの画像URLと、非対応ブラウザ向けの画像URLが自動で設定されています。

「JS WebP and Picture Web Exclusions」の欄で、WebP配信の機能から除外する要素を指定することもできます。

4. 既存のアップロード画像をWebPに変換

プラグインの設定をした時点で、それ以降アップロードされる画像に対しては、元画像と共にWebPに変換された画像も自動で保存されるようになります。

しかし、既にアップロードされている画像については、そのままだとWebP画像が生成されないため、以下の手順を実行する必要があります。

WordPressのサイドメニューから、「メディア」→「一括最適化」→「最適化されていない画像をスキャンする」を選択します。
元の画像も設定された上限幅と上限高さ（デフォルトはどちらも1920px）に収まるようリサイズされてしまうので、リサイズ前の元画像を残しておきたい場合は事前にバックアップを取りましょう。

もしも既存のアップロード画像に対して圧縮はせずにWebP変換だけを行いたい場合は、画面右側に表示されているオプションの「WebPのみ」にチェックを入れます。

最適化できる画像が存在する場合、「○点の画像を最適化」というボタンが表示されるので、クリックするとWebP変換が実行されます。

以上で、既存のアップロード画像に対してもWebP版の画像が生成され、ページを閲覧したユーザーのブラウザがWebP形式に対応していれば、WebP画像が表示されるようになります。

WebP画像が表示されるか確認する

実際にページを表示した際にWebP画像が表示されているかどうかは、(a) Chrome検証ツールか、(b) 画像をダウンロードすること等で確認できます。

(a) Chrome検証ツールで確認する

Google Chromeの検証ツールを利用することで、ページで読み込まれるリソースを確認できます。
（検証ツールは、Macの場合option+command+I、Windowsの場合はCtrl+Shift +IもしくはF12で開けます。）

検証ツールを開いたら「Network」タブを開き、その状態でページを再読み込みします。
すると、ページで読み込まれたファイルが一覧表示されるので、該当の画像ファイルを探します。

該当する画像ファイルの「Type」の列がwebpになっていれば、WebP画像の配信に成功しています。（WebP対応ブラウザで確認した場合）

サーバーベースのWebP配信の場合
（.htaccessを使用する方法）

HTMLベースのWebP配信の場合
（JavaScriptやpictureタグを使用する方法）

.htaccessを使用したサーバーベースのWebP配信をしている場合、「Name」の列のファイル名の拡張子と「Type」の列のファイルの種類が異なっている場合があります。

これは、「Name」の欄はブラウザがサーバーに対してファイル取得のリクエストを送った際のファイル名であり、「Type」の欄はサーバーが実際にレスポンスとして返したファイルの種類を表しているためです。

.htaccessを使用するサーバーベースのWebP配信の場合、ブラウザがサーバーに対して送る画像のリクエストURLは共通になります。（よって、上記の例では.jpgの拡張子になっている）
その後、リクエストを受け取ったサーバーは、.htaccessの設定に基づいてブラウザがWebPに対応しているかを判定し、レスポンスとして返す画像を切り替えます。

それに対して、JSやpictureタグを使用したHTMLベースのWebP配信の場合、ブラウザがWebPのサポート状況を判定し、サーバーに対して送る画像のリクエストURLを切り替えているため、WebP対応ブラウザであればリクエストするファイル名が.webpの拡張子になっています。

(b) 画像をダウンロードして確認する

実際のページで、該当の画像をドラッグ＆ドロップや、右クリック→「名前を付けて画像を保存」でダウンロードして確認します。
ダウンロードした画像の拡張子が.webpになっていれば、正常にWebP画像の配信ができています。

.htaccessを使用したサーバーベースのWebP配信をしている場合、右クリック→「新しいタブで画像を開く」で表示されたページのURLを確認すると、画像の拡張子が.webpになっていないことがあります。

これは、アドレスバーに表示されているURLは、ブラウザがサーバーに対して送ったリクエストURLを表しているためです。リクエストを受け付けたサーバーは、.htaccessの設定に基づいてブラウザのWebP対応状況を判定し、レスポンスとして返す画像を切り替えています。

そのため、上記の例ではimage.jpgを表示するリクエストに対して、実際にはサーバーはimage.webpを返しているため、画像を保存してみると正しくWebP画像になっていることが確認できます。

それに対し、JavaScriptやpictureタグを使用したHTMLベースのWebP配信をしている場合、ブラウザがWebP対応状況を判定し、サーバーに送るリクエストURLを切り替えるため、「新しいタブで画像を開く」でページURLを確認すると、拡張子が.webpになっているはずです。

サイトが高速ならWebP化は必要ない

画像のWebP化はページ表示速度の高速化に効果的ですが、全てのWordPressサイトで画像のWebP化が必要というわけではないと思っています。
当サイトもWordPressで作られていますが、実のところ画像のWebP化はしていません。

それはなぜかというと、「元々サイトが高速だから」です。

下の画像はPage Speed Insightsでこのサイトのパフォーマンスを計測した結果になりますが、基本的にデスクトップ表示よりも遅くなる携帯電話側の表示でも、スコア100が出ています。（計測時期によってスコアの誤差はあります）

元々のサイトが高速なのであれば、重たいプラグインをインストールしてまで、WebP画像を使う必要はありません。

それでは、どうすればWordPressサイトを高速に保つことが出来るのか？についてですが、当サイトが行なっているのは次の２つの施策です。

高速なレンタルサーバー、テーマを使用する
自分で画像の最適化を行う

高速なレンタルサーバー、テーマを使用する

身も蓋もない根本的な話ではありますが、Webサイトが使用しているサーバーとテーマが重ければ、その後にどれだけ高速化を頑張っても限界はあります。

逆に、高速化に特化したサーバー・テーマを使用すれば、管理者が追加で何か特別なことをする必要もありません。WordPressにインストールするプラグインも最小限で良くなり、メンテナンスも断然楽になります。

当サイトでも使用している組み合わせですが、表示速度にこだわりたい方は以下のレンタルサーバー＆有料テーマが非常におすすめです！

レンタルサーバー：ConoHa WING
有料テーマ：SWELL

SWELLは高速化だけでなく、デザインの綺麗さ、管理画面の使いやすさも大変すばらしく、大人気のテーマです。

「今までどれだけ高速化の施策を試しても一向に改善しなかった」という方は、原因は根本のサーバーとテーマにあるかもしれません。この機会にサーバー・テーマの乗り換えを検討してみてはいかがでしょうか。

【国内最速No.1】高性能レンタルサーバーConoHa WING

SWELL – シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ

自分で画像の最適化を行う

当サイトの運営では、WordPressに画像をアップロードする前に、事前に画像の最適化を行なっています。
具体的な画像の最適化方法は、大まかに以下の３つです。

適切なファイル形式（拡張子）に変換する
表示する領域に合わせてリサイズする
圧縮する

このあたりは少し専門的な知識が必要ですが、画像の最適化方法について気になる方は、詳しく解説している記事があるので、こちらをご覧ください。

画像を圧縮・リサイズしてWebサイトを高速化しよう【Squoosh】

まとめ

WordPressでWebP画像を使用する方法について解説しました。
Webサイトに含まれる画像は一つ一つが大きな容量を占めているので、効率的に軽量化し、ページの表示速度を速めましょう。
WebPに関する基本的な知識や、WordPress以外での使用方法などは以下の記事で解説しています。

WebPで画像軽量化！pictureタグでの非対応ブラウザ対策

WebP対応を含め、どれだけ表示速度対策を行なっても改善しない方は、原因はサーバーとテーマにあるかもしれません。高速化に特化したレンタルサーバーConoHa WINGと、有料テーマSWELLの組み合わせを是非ご検討ください。

【国内最速No.1】高性能レンタルサーバーConoHa WING

SWELL – シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ

内容が良かったらSNSでシェアしていただけると嬉しいです！