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

WPBeginnerでは、WordPressユーザーがより高速でパフォーマンスの高いウェブサイトを作成するのに役立つ新しいテクノロジーを常に評価しています。WebP画像は以前から注目していましたが、まだ自身のサイトには実装していませんが、その形式の可能性は認識しています。

WebPが興味深いのは、画質の低下がほとんどないにもかかわらず、画像ファイルのサイズを最大35％削減できる能力です。WebPを使用したサイトでは、読み込み速度とユーザーエンゲージメントに意味のある改善が見られました。

当社の調査とテストプロセスに基づき、このモダンな画像形式のスピードメリットを享受するために、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. WordPress での画像使用に関するエキスパートガイド

動画チュートリアル

WPBeginnerを購読する

書き込みによる説明をご希望の場合は、このままお読みください。

方法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リライティングまたはWebPリライティングメソッドを選択することもできます。これらは.htaccessメソッドよりも少し遅いですが、目的は達成できます。

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

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

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

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

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

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

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

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

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サービスを使用している場合は機能しません。タグメソッドはCDNでも機能しますが、一部のWordPressテーマを壊す可能性があります。

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

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

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

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

WordPressで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）。ウェブサイトが再読み込みされると、開発者コンソールですべての画像が読み込まれているのが表示されます。

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

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

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

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