WordPressでWebP画像を使用する方法（3つの方法）

画像は、WordPressサイトが遅くなる最大の原因であることがよくあります。ページが読み込まれるのに時間がかかりすぎると、訪問者はコンテンツを見る前に離れてしまいます。

幸いなことに、WebP画像を使用することでこれを解決できます。この最新のファイル形式は、品質を損なうことなく画像サイズを最大35%削減するため、サイトが大幅に高速化されます。

このガイドでは、3つの異なる方法を使用してWordPressでWebP画像を使用する方法を説明します。

WebPとは何ですか？

WebPは、Googleがウェブ用途に特化して開発した最新の画像フォーマットです。特筆すべきは、その優れた圧縮技術です。WebP画像は、JPEGやPNGファイルと比較して、同等の視覚品質を維持しながら、通常25〜35％小さくなります。

これを理解するために、現在のPNG画像が100KBの場合、WebP形式の同じ画像は品質に目に見える違いなく約65〜75KBになります。このサイズ削減は、ページの読み込み時間の短縮とユーザーエクスペリエンスの向上に直接つながります。

この形式は、ロッシー圧縮とロスレス圧縮の両方をサポートし、透明度やアニメーションなどの機能も備えているため、複数の従来の形式の汎用性の高い代替となります。

画像圧縮については、Web用に画像を最適化する方法に関するガイドで学ぶことができます。

ブラウザサポート：WebPはあなたのサイトの準備ができていますか？

現在、WebPは95%以上のグローバルカバレッジで強力なブラウザサポートを受けています。Chrome、Firefox、Safari（iOS 14以降）、Edgeを含むすべての主要ブラウザは、WebP画像を完全にサポートしています。

残りの5%は、主に使用率が急速に低下している古いブラウザバージョンで構成されています。

WordPress で WebP 画像を使用すべきか？

ほとんどのWordPressサイトでは、答えは「はい」です。WebPの実装は、WordPressサイトを大幅に高速化し、キャッシュプラグインやCDNなどの他のパフォーマンス最適化と完全に連携します。

WordPress 5.8以降、プラットフォームはネイティブのWebPサポートを備えているため、プラグインなしでWebP画像を直接アップロードして使用できます。ただし、この基本的なサポートには、以前にアップロードした画像の自動変換や、古いブラウザ用のフォールバックオプションは含まれていません。

最良の結果を得るために、専用の画像最適化プラグインの使用をお勧めします。これらのプラグインは、既存の画像をWebP形式に自動的に変換し、サポートされていないブラウザを使用しているごく一部のユーザーには、従来のJPEGまたはPNGバージョンを提供します。

WebPは、サイトが画像中心である場合（写真ブログ、eコマースストア、ポートフォリオなど）、またはWordPressブログが現在、大きな画像のために読み込み速度が遅いという問題を抱えている場合に特に有益です。

WordPress で WebP 画像を使用する方法は次のとおりです。最適な方法を選択できるように、複数の方法を紹介します。

1. EWWW Optimizer を使用した WordPress での WebP 画像の使用
2. Imagifyを使用してWordPressでWebP画像を使用する
3. SG Optimizer を使用した WordPress での WebP 画像の使用
4. 動画チュートリアル
5. WebP画像に関するよくある質問
6. WordPress での画像使用に関するエキスパートガイド

方法1：EWWW Optimizerを使用してWordPressでWebP画像を使用する

EWWW Image Optimizer は、WordPressの画像を最適化できる最高のWordPress画像圧縮プラグインの1つです。WebP画像もサポートしており、対応ブラウザでは自動的に表示できます。詳細については、EWWW Image Optimizerのレビューをご覧ください。

まず最初に行うべきことは、EWWW Image Optimizer プラグインをインストールして有効化することです。詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、設定 » EWWW Image Optimizerページに移動してプラグインオプションを設定します。セットアップウィザードが表示されますが、「わかっています」リンクをクリックして終了できます。

次の画面で、多くのプラグインオプションが表示されます。

下にスクロールして、「WebP変換」オプションの横にあるチェックボックスをオンにします。

その後、「変更を保存」ボタンをクリックして設定を保存します。

次に、WebP変換セクションまでスクロールダウンする必要があります。プラグインは、赤いプレビュー画像とともにいくつかのリライトルールを表示します。

「リライトルールの挿入」ボタンをクリックする必要があります。プラグインはこれらのリライトルールを自動的に.htaccessファイルに挿入しようとします。

プラグインがそれらのルールを追加することに成功した場合、赤い画像プレビューは「WebP」というテキストとともに緑色に変わります。

プラグインがルールを挿入できない場合があります。その場合は、プラグインの設定ページからリライトルールをコピーし、手動で.htaccessファイルの末尾に貼り付ける必要があります。

設定が完了したら、プラグインの設定ページに戻り、再度「変更を保存」ボタンをクリックしてください。プレビュー画像が緑色に変われば、WordPressウェブサイトでWebP画像配信が正常に有効になったことを意味します。

または、WebP配信オプションとして「JS WebP Rewriting」または「Picture WebP Rewriting」を選択することもできます。これらは、.htaccessメソッドがサーバー構成（例：CDNを使用している場合）で機能しない場合の信頼性の高い代替手段です。

古い画像をWebPバージョンに一括変換する

EWWW Image Optimizerを使用すると、以前にアップロードした画像ファイルを簡単にWebP画像に変換できます。単にメディア » ライブラリページに移動し、リストビューに切り替えます。

次に、「画面オプション」ボタンをクリックし、「1ページあたりの項目数」を999に変更する必要があります。1000枚以上の画像がある場合、それらの画像は次のページに表示されます。

これにより、一括最適化のために多数の画像を選択できるようになります。次に、一番上にある「すべて選択」チェックボックスをクリックして、すべての画像を選択します。

その後、「一括操作」ドロップダウンメニューをクリックし、「一括最適化」オプションを選択します。最後に、「適用」ボタンをクリックします。

次の画面で、プラグインは画像の圧縮をスキップしてWebPに変換するだけのオプションを提供します。画像がすでに最適化されている場合は、このオプションをチェックできます。

その後、「最適化されていない画像の検索」ボタンをクリックして続行します。プラグインは検出された画像の数を表示するので、「最適化」ボタンをクリックして進めることができます。

画像が最適化され、EWWWオプティマイザーが画像のWebPバージョンを生成します。

WebP画像の配信をテストする

画像の最適化が完了したら、複数の画像を含むブログ記事にアクセスできます。

画像の上にマウスカーソルを移動し、右クリックして新しいタブで画像を開きます。

これにより、画像が新しいブラウザタブで開かれます。

EWWW Image Optimizerは特別なリライトルールを使用するため、アドレスバーの画像URLには元のファイル拡張子（.pngまたは.jpgなど）が表示されたままになります。

それがWebP画像であることを確認するには、画像を右クリックして「名前を付けて画像を保存…」を選択します。ダウンロードウィンドウに、ファイルの種類として「WebP画像」が表示されているはずです。

プラグインがWebP画像を提供できない場合は、プラグインの設定ページに戻ることができます。ここから、WebP配信オプションを「JS WebPリライティング」または「WebPリライティング」の方法に変更できます。

方法2：Imagifyを使用してWordPressでWebP画像を使用する

Imagifyは、WP Rocket（最高のWordPressキャッシュプラグイン）の開発者が作成したWordPress画像最適化プラグインです。これにより、画像を簡単に最適化してWebP画像形式に変換できます。詳細については、Imagifyレビューをご覧ください。

まず、Imagifyプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化後、プラグイン設定を構成するために**設定 » Imagify**ページにアクセスする必要があります。ここから、「無料APIキーを作成」ボタンをクリックして続行します。

ビジネスメールアドレスの入力を求められます。その後、APIキーが含まれたメールをメールボックスで確認できます。そのキーをプラグインの設定ページにコピー＆ペーストし、「変更を保存」ボタンをクリックしてください。

次に、「最適化」セクションまでスクロールダウンする必要があります。そこで、「画像のWebPバージョンを作成する」と「サイトにWebP形式で画像を表示する」オプションの横にあるチェックボックスをオンにする必要があります。

その下で、WordPressでWebP画像を表示するための2つの配信方法を選択できます。最初の方法は.htaccessメソッドで、2番目の方法はタグを使用する方法です。

.htaccessメソッドは高速ですが、CDNサービスを使用している場合は機能しません。タグメソッド（<picture>タグを使用）はCDNで完全に機能しますが、サイトのコード構造がわずかに変更されます。

あなたのサイトに適した方を選択できます。その後、下部にある「保存して一括オプティマイザーに移動」ボタンをクリックします。

これにより、メディア » 一括最適化ページに移動します。

プラグインは、WordPressのすべての画像をバックグラウンドで自動的に最適化を開始します。

画像が多い場合、これには時間がかかることがあります。心配しないでください。ページを閉じても画像最適化プロセスは停止しないため、ページを閉じて後で戻ることができます。

WordPressでWebP画像をテストする

最適化が完了したら、いくつかの画像を含むページまたは投稿にアクセスできます。画像の上にマウスカーソルを移動し、右クリックして「新しいタブで画像を開く」を選択します。

これにより、画像が新しいブラウザタブで開かれます。

Imagifyは元のURL構造を維持するため、アドレスバーに.webp拡張子は表示されません。代わりに、画像を右クリックして「名前を付けて画像を保存…」を選択してください。保存ウィンドウのファイルの種類には「WebP画像」と表示されるはずです。

方法 3: SG Optimizer を使用した WordPress での WebP 画像の使用

この方法は、SiteGroundユーザーの場合におすすめです。

SiteGroundは、最適なWordPressホスティング会社の1つです。彼らはユーザーに無料のSG Optimizerプラグインを提供しており、これによりWordPressのパフォーマンスを最適化できます。WordPress画像の最適化オプションも含まれています。

まず、SG Optimizerプラグインをインストールして有効化する必要があります。

有効化すると、プラグインは管理サイドバーに「SG Optimizer」というラベルの新しいメニュー項目を追加します。それをクリックすると、プラグインの設定ページに移動します。

ここから、SiteGround の組み込みキャッシュシステムを使用したい場合は、キャッシュ設定をオンにすることができます。

その後、メディア最適化タブに切り替えて、「新規画像のWebPコピーを生成」オプションをオンにすることができます。

その下に、「一括WebPファイル生成」オプションが表示されます。

そのオプションのトグルボタンをクリックすると、WordPressメディアライブラリ内のすべての画像ファイルに対してWebPコピーの生成が開始されます。

完了すると、WordPress サイトは WebP 画像の配信を開始します。

SG Optimizer で WebP 画像をテストする

ウェブサイトがWebP画像を配信しているかどうかを確認するには、いくつかの画像が含まれるサイトのページを開く必要があります。

その後、右クリックして「検証」ツールを選択します。これにより開発者コンソールが開きますので、そこで「ネットワーク」タブに切り替える必要があります。

ここから、「Img」フィルタータブをクリックし、ページを再読み込みします（WindowsではCTRL+R、MacではCommand+R）。インスペクターの「Type」列を確認してください。画像の種類として「webp」が表示されているはずです。

動画チュートリアル

WPBeginnerを購読する

WebP画像に関するよくある質問

このファイル形式への切り替えや、それがウェブサイトのパフォーマンスにどのように影響するかについて、多くの読者から質問があります。WordPressでWebP画像を使用することに関する最も一般的な質問への回答をいくつかご紹介します。

1. WebP画像はSEOに本当に役立ちますか？

はい、WebP画像はSEOランキングを大幅に向上させることができます。Googleはページスピードを主要なランキング要因と見なしており、WebPを使用するとページ読み込み時間が短縮されます。

より小さな画像ファイルを配信することで、Core Web Vitalsのスコアが向上し、WordPressサイトが検索結果でより上位にランク付けされるのに役立ちます。

2. 訪問者のブラウザがWebPをサポートしていない場合はどうなりますか？

ほとんどの最新ブラウザはWebPをサポートしていますが、古いブラウザでは一部サポートしていないものがあります。

EWWW Image OptimizerやImagifyのような最適化プラグインを使用すると、プラグインが訪問者のブラウザを自動的に検出します。最新ブラウザにはWebPバージョンを、古いブラウザには元のJPEGまたはPNGファイルを配信し、誰もがコンテンツを見られるようにします。

3. プラグインなしでWebP画像を直接WordPressにアップロードできますか？

はい、WordPress 5.8以降では、JPEGやPNGファイルをアップロードするのと同じように、WebPファイルをメディアライブラリに直接アップロードできます。ただし、ファイルを直接アップロードしても、既存のメディアライブラリは変換されません。

古い画像を自動で変換するには、SG OptimizerやEWWW Image Optimizerのような画像最適化プラグインが引き続き必要です。

4. WebPはJPEGやPNGよりも優れていますか？

ほとんどの場合、WebPはウェブサイトのパフォーマンスにとってより優れています。WebP画像は、同等のJPEGまたはPNGファイルよりも通常25%から35%小さく、同じ視覚品質を維持しています。このファイルサイズの小ささは、帯域幅を節約し、訪問者にとってページの読み込みを大幅に高速化します。

5. WebPに変換すると元の画像は削除されますか？

ImagifyやEWWW Image Optimizerを含むほとんどの画像最適化プラグインは、デフォルトでは元の画像を削除しません。これらは、訪問者に表示するためのWebPバージョンの画像を作成し、バックアップとして元のファイルをサーバーに保持します。これにより、WebP形式の使用を停止することにした場合に、変更を元に戻すことができます。

WordPress での画像使用に関するエキスパートガイド

この記事がWordPressでWebP画像を使用する方法を学ぶのに役立ったことを願っています。WordPressサイトでの画像の利用に関するその他のガイドも参照してください。

• WordPressに画像を正しく追加する方法（ステップバイステップ）
• WordPressでアイキャッチ画像または投稿サムネイルを追加する方法
• WebP vs. PNG vs. JPEG：WordPressに最適な画像フォーマット
• 品質を損なわずにWebパフォーマンスのために画像を最適化する方法
• WordPress画像圧縮プラグイン比較
• ブログ記事用の画像をより良く作成するためのツール
• 画像管理に最適なWordPressプラグイン（更新済み）
• WordPressにおける画像Altテキストと画像タイトルの違いとは？
• WordPressはサイト上の画像をどこに保存しますか？
• WordPressで画像を簡単に遅延読み込みする方法

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。