ただし、WebPを介して画像を配信するのは簡単ではありません。サーバーのウェブサーバー、選択したcdn、テーマ、キャッシュプラグインなどによって異なります。
このガイドは、3つの方法でWebP画像をWordPressに配信するのに役立ちます。
WebPとは何ですか？
Web用の新しい画像形式
グーグルによって
WebPは、Googleが開発した画像形式（pngやjpgなど）です。 WebP（.webp）画像ははるかに小さい傾向があるため、Webサイトの速度が上がり、使用する帯域幅が少なくなります。
画像に応じて、サイズを25％から70％に縮小できます。
JPEG、PNG、GIFなどには長所と短所があります。以下の表はあなたにアイデアを与えるでしょう：
| JPG | GIF | PNG | SVG | |
| ベクター | ❌ | ❌ | ❌ | ✅ |
| ラスター | ✅ | ✅ | ✅ | ❌ |
| 透明性 | ❌ | ✅ | ✅ | ✅ |
| アニメーション | ❌ | ✅ | ✅ | ✅ |
| 失った | ✅ | ❌ | ❌ | ❌ |
WebPには、上記のほとんどすべての機能があります。では、なぜどこでもWebPを使用できないのでしょうか。
どこでもWebPを使ってみませんか？
ご覧のとおり、デバイスの80％のみがWebPのみをサポートしています。レガシーブラウザだけでなく、Safari / iOSSafariはまだWebPをサポートしていません。
WebPを提供するのがとても難しいのはなぜですか？
お気づきのように、ブラウザに合わせて画像を配信しています。ブラウザがWebPをサポートしていない場合は、元の画像（jpg / png / gif）を提供する必要があります。
WebPを提供する主な方法は2つあります。
画像タグの使用
使用できます写真タグを使用して、WebP形式であることをブラウザに通知します。ブラウザがサポートしている場合は、通常/フォールバック画像が読み込まれます。
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>別の答えで
別の答えでは、いつものように、1つのファイルがあります。その通り：
<img src="img.jpg" />1つの画像URLは、jpgファイルとwebpファイルの配信をサポートします。これはサーバーが行うことです。
.jpgファイル拡張子ですが、ブラウザがWebPをサポートしている場合、応答はWebPになります。 「多様な応答」とも呼ばれます。
画像タグと多様な応答
それぞれに長所と短所があります。比較表は次のとおりです。
| 画像タグ | 多様な反応 | |
|---|---|---|
| 背景画像で動作します | ❌ | ✅ |
| CDNフレンドリー | ✅ | ✅（ほんの数個） |
| サーバーを構成する必要があります | ❌ | ✅（nginx） |
| 遅延読み込みで動作します | ✅ | ✅ |
WordPressのWebPで画像を提供する方法は？
方法＃1-フライWebP変換でのみCDNを使用する
これはおそらく最も簡単な解決策です。一部のCDNプロバイダーは現在、画像の最適化とともにオンザフライの画像からWebPへの変換をサポートしています。
ここにいくつかあります：
- BunnyCDN
- ポーランド語のCloudflare（プロプラン）
- Cloudinary
- ShortPixelアダプティブイメージ（StackPath CDNを使用）
- WP圧縮
通常のWebPイメージと変換されたWebPイメージの両方を保存する必要がないため、この方法を使用してディスク領域を節約することもできます。
BunnyCDN
BunnyCDNにはBunnyOptimizerが付属しており、画像を圧縮してその場でWebPに変換できます。
方法＃2-多様な応答+ CDNを使用する
上記のように、「さまざまな応答」には、要求されたブラウザに応じてWebP画像と非WebP画像の両方を提供できる単一の画像URLが含まれます。
また、キャッシュキーとしてWebPリクエストヘッダーをサポートする適切なCDNを選択する必要があります。それ以外の場合、WebPイメージがサーバーにキャッシュされると、WebPをサポートしていないブラウザーに配信されます。
WordPressでのさまざまな応答のカスタマイズ
WordPressでWebPのリッチレスポンスを設定する最も簡単な方法は、WebPExpressプラグインを使用することです。プラグインをインストールし、[設定を保存して新しい.htaccessルールを強制する]をクリックするだけです。
WebP Expressは、WebPコンバーターを構成し、ルールを上書きして、要求を受信したときに画像をその場でWebPに変換し、ブラウザーがWebPをサポートしていない場合は、デフォルトの画像が配信されるようにします。
Nginxにいる場合
WebP Expressは、必要な「.htaccess」書き換えルールを追加しますが、Apache、LiteSpeed、またはOpenLiteSpeedサーバーでのみ機能します。 Nginxを使用している場合は、編集する必要がありますnginx.config次のコードを追加します。
＃WebP Expressルール＃-------------------- location〜 * ^ /？wp-content /.*.(png|jpe?g)$ {add_header Vary Accept; Expires 365d; if（$ http_accept！〜* "webp"）{break;} try_files / wp-content / webp-express / webp-images / doc-root / $ uri.webp $ uri.webp / wp-content /plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content;}＃存在しないWebPのリクエストをconverterlocationにルーティングします〜* ^ /？wp-content / 。* 。（png | jpe？g）。webp $ {try_files $ uri / wp-content / plugins / webp-express / wod / webp-realizer.php？wp-content = wp-content;}＃- -----------------（WebP Expressルールはここで終了します）上記のコードは、必要な応答ヘッダーを追加し（キャッシュ管理も異なります）、WebPが存在する場合は配信を試みます。それ以外の場合は、コンバーターにリダイレクトします（ブラウザーのサポートに基づく）
多様な応答をサポートするCDNプロバイダー
CDNプロバイダーがキャッシュキーとしてWebPをサポートしていない場合、WebPファイルはWebPをサポートしていないブラウザーに配信されます。同様に、非WebP画像がサポートされているブラウザに配信される可能性があります。
BunnyCDN , KeyCDN , Google CDN 他の多くのCDNプロバイダーは、キャッシュキーとしてWebPをサポートしています。必ず設定で有効にしてください。
VBunnyCDN :
VKeyCDN :
Cloudflareの無料プランを使用していますか？
残念ながら、Cloudflareの無料プランはキャッシュキーとしてWebPをサポートしていません。 BunnCDNのようなCDNを使用するか、プロフェッショナルプランにアップグレードしてください。
人気のホスティングプロバイダーとの多様な応答+ CDNを設定する
WebPExpressがインストールされていることを確認してください。
- KinstaまたはWPエンジン-サポートチームに連絡して、上記のNginx構成を追加し、CDN（KeyCDN）にWebPキャッシングキーを含めます。
- Cloudways-WebP Expressをインストールし、.htacessを使用して設定を保存するだけです。 CloudwaysはハイブリッドApache + Nginxアプローチを使用しているため、そのままで機能します。
- SiteGound-サポートに連絡してNginx構成を追加します。上記のようにサポートされているCDNを使用します。
- LiteSpeed / OpenLiteSpeed / Apacheサーバー-WebPExpressをインストールし、「。htacess」で設定を保存するだけです。上記のようにサポートされているCDNも使用してください。
- Nginxを使用したカスタムVPS（LEMPスタック）-セットアップ
nginx.conf上記のようにサポートされているCDNを使用します。
方法＃3-画像タグを使用する
上記の両方の方法がうまくいかない場合は、画像タグを使用できます。サーバー構成（nginx.confの編集）を必要とせず、すべてのCDNプロバイダーをサポートします。
このメソッドを使用すると、WebP配信のHTMLが変更されます。背景画像では機能せず、一部のテーマ、キャッシュプラグイン、遅延読み込みプラグインなどと互換性がありません。
この方法を使用すると、すべてのimgタグが次のように変換されます。
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>ブラウザがWebPをサポートしている場合は、対応するファイルが配信されます。それ以外の場合は、通常の画像が配信されます。
WordPressでのWebPの画像タグのカスタマイズ
画像タグを設定する最も簡単な方法は、WebPExpressを使用することです。
動作モードを「CDNフレンドリー」に設定し、「HTMLの変更」を有効にします。
結論
すべてのブラウザがWebPをサポートする日が来ることを願っています！
月に数ドルを費やすことができる場合、最も簡単で効率的な方法は、BunnyCDNのようなCDNを使用することです。これにより、画像がその場でWebPに変換されます。それ以外の場合は、上記の方法2に固執します。
