WordPressでWebP画像を使う方法（3つの方法）

私たちは、画質と読み込み時間のバランスをとることの重要性を理解しています。多くのサイトオーナーから、WebP画像を使用する最適な方法について質問されます。

WebP画像は、画質を大幅に犠牲にすることなくファイルサイズを縮小することで、より優れた画像圧縮を提供する最新の画像フォーマットです。これにより、サイトの読み込みが速くなり、帯域幅を節約できます。

問題は、WordPressがネイティブでWebP画像のアップロードや表示をサポートしていないことだ。

この投稿では、WordPressでWebP画像を簡単に使う方法を紹介します。

WebPとは？

WebPは、ウェブで使用する画像の新しいファイル形式です。WebP画像フォーマットを使用することで、画質を落とすことなく、PNGやJPEGよりもファイルサイズを25～34％小さくすることができます。

もしImagelyがあなたのサイトを遅くしているのであれば、画像をWebPフォーマットに変換することで、ページ読み込み速度テストのスコアを改善することができます。

画像圧縮については、ウェブ用に画像を最適化する方法をご覧ください。

WebPは新しいファイル形式なので、まだすべてのブラウザーでサポートされているわけではありません。しかし、Google Chrome、Firefox、Microsoft Edgeなど、最新のブラウザのほとんどはWebP画像をサポートしています。

WordPressでWebP画像を使うべきか？

WebP画像はWordPressサイトの高速化に役立ちます。WordPressのキャッシュプラグインやCDNなどと併用することが推奨されるベストプラクティスです。

WordPress 5.8以降、WordPressは初期設定でWebP画像をサポートしています。つまり、プラグインを使わなくても、WordPressサイトにWebP画像を保存してアップロードすることができます。

しかし、そうは言っても、WordPressサイトで画像圧縮プラグインを使用したいかもしれません。もし多くのユーザーが未対応のブラウザーを使っているのであれば、画像圧縮プラグインの使用を検討すべきです。

画像圧縮プラグインは、既存の画像を WebP フォーマットに変換し、WebP をサポートしていないブラウザーで JPEG または PNG 画像を予備設定として表示することができます。

もしあなたのサイトがたくさんの画像を使用していて、WordPressブログの表示速度を遅くしているのであれば、ぜひWebP画像の使用を検討すべきです。

WordPressでWebP画像を使用する方法をご紹介します。複数の方法を紹介しますので、あなたに最適な方法を選んでください：

動画チュートリアル

Subscribe to WPBeginner

文章での説明がお好きな方は、そのまま読み進めてください。

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

EWWW Image Optimizerは、WordPressの画像を最適化できるWordPress画像圧縮プラグインの一つです。また、WebP画像をサポートし、サポートされているブラウザ上で自動的にそれらを表示することができます。詳しくはEWWW Image Optimizerのレビューをご覧ください。

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

有効化したら、プラグインオプションを設定するために、設定 ” EWWW Image Optimizerページに移動します。セットアップウィザードが表示されますが、’I know what I am doing’ リンクをクリックしてウィザードを終了することができます。

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

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

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

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

Insert Rewrite Rules’ボタンをクリックすると、プラグインが自動的に.htaccessファイルにリライトルールを挿入しようとします。

プラグインがこれらのルールの追加に成功すると、赤色の画像プレビューが緑色に変わり、「WebP」のテキストが表示されます。

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

完了したら、プラグインの設定ページに戻り、もう一度「変更を保存」ボタンをクリックします。プレビュー画像が緑色に変われば、WordPressサイトでWebP画像配信が有効化されたことになります。

オプションとして、JS WebP RewritingまたはWebP RewritingをWebP配信の設定として選択することができます。これらは、.htaccessの方法よりも少し遅いですが、仕事は完了します。

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

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

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

こうすることで、大量の画像をすばやく選択して一括最適化することができます。次に、上部にある「すべて選択」チェックボックスをクリックして、すべての画像を選択します。

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

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

その後、「Scan for Unoptimized Images（最適化されていない画像をスキャン）」ボタンをクリックして続行します。プラグインが検出した画像の数を表示しますので、「最適化」ボタンをクリックして次に進みます。

これで画像が最適化され、EWWW Optimizerが画像のWebPバージョンを生成します。

WebP画像配信のテスト

画像を最適化したら、複数の画像を含むブログ投稿にアクセスすることができます。

画像にマウスオーバーして右クリックすると、新しいタブで画像が開きます。

新しいブラウザータブで画像が開きます。

アドレスバーの拡張子が.webpであることが確認できるだろう。

プラグインがWebP画像を配信できない場合は、プラグインの設定ページに戻ることができます。ここから、WebP配信オプションを「JS WebP Rewriting」または「WebP Rewriting」メソッドに変更できます。

方法2：Imagifyを使ってWordPressでWebP画像を使う

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

まず最初に、Imagifyプラグインをインストールして有効化します。詳しくはWordPressプラグインのインストール方法をご覧ください。

有効化した後、プラグインを設定するためにSettings ” Imagifyのページにアクセスする必要があります。ここから、’Create a Free API Key’ボタンをクリックして次に進みます。

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

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

その下に、WordPressでWebP画像を表示するための2つの配信方法から選択することができます。1つ目は.htaccessを使う方法、2つ目はタグを使う方法です。

.htaccessの方法はより高速ですが、CDNサービスを使用している場合は機能しません。タグを使う方法はCDNでも機能するが、WordPressテーマによっては壊れる可能性がある。

あなたのサイトに合う方を選んでください。その後、一番下にある「保存してバルクオプティマイザーへ」ボタンをクリックしてください。

メディア ” バルク最適化のページが表示されます。

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

画像が多い場合は、時間がかかることがあります。ページを閉じても画像の最適化処理は止まりませんので、ページを閉じて後で戻ってくることもできますのでご安心ください。

WordPressでWebP画像をテストする

最適化が完了したら、いくつかの画像を含むページや投稿にアクセスすることができます。画像にマウスオーバーし、右クリックして「新しいタブで画像を開く」を選択します。

新しいブラウザータブで画像が開きます。

アドレスバーに拡張子.webpが表示されます。

方法3：SGオプティマイザを使用してWordPressでWebP画像を使用する

SiteGroundユーザーの方はこの方法をお勧めします。

SiteGroundは 最高のWordPressホスティングサービス会社の一つです。彼らはユーザーにWordPressのパフォーマンスを最適化することができます無料のSGオプティマイザープラグインを提供しています。また、WordPressの画像を最適化するオプションも含まれています。

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

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

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

その後、Media Optimizationタブに切り替え、「Generate WebP Copies of New Images」オプションをオンにします。

その下に、’Bulk Generate WebP Files’の設定があります。

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

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

SGオプティマイザでのWebP画像のテスト

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

その後、右クリックしてInspectツールを選択する。開発者コンソールが開きますので、「ネットワーク」タブに切り替えてください。

ここから「img」タブをクリックし、ページをリロードします（WindowsではCTRL+R、MacではCommand+R）。サイトがリロードされると、開発者コンソールに読み込まれたすべての画像が表示されます。

WordPressで画像を使用するためのエキスパートガイド

WordPressでWebP画像を使用する方法はお分かりいただけたと思いますが、WordPressサイトで画像を使用するための他のガイドもご覧ください：

• WordPressで画像を正しく追加する方法（ステップバイステップ）
• WordPressでおすすめ画像や投稿サムネイルを追加する方法
• WebP vs. PNG vs. JPEG: WordPressに最適な画像フォーマット
• クオリティを落とさずにウェブパフォーマンスのために画像を最適化する方法
• WordPress画像圧縮プラグインの比較
• ブログ投稿のための画像作成ツール
• 画像を管理するWordPressプラグイン（更新）
• WordPressの画像Altテキストと画像タイトルの違いとは？
• WordPressはサイトのどこに画像を保存するのか？
• WordPressで画像を簡単に遅延ロードする方法

WordPressでWebP画像を使用する方法について、この投稿がお役に立てれば幸いです。また、メールマガジンの作り方や、専門家が選んだサイトに最適なビジネスフォンサービスもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.