画像のwebp化

以下、調べた作業用のメモです。

ブラウザサポートはどうなっている？

WebPは現代の主要なブラウザで広くサポートされていますが、全てのブラウザがWebPに対応しているわけではありません。主なブラウザでのWebPサポートは以下の通りです：

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Apple Safari (一部の環境やバージョンでサポートされることがありますが、全般的にはサポートが限定的です)

Internet ExplorerはWebPに対応していません。そのため、全ての画像をWebPに統一する場合、IEユーザーに対する予備の画像形式（JPEGやPNG）を用意するか、代替手段を検討する必要があります。

WordPressで画像をWebPに変換するためのプラグインはいくつか存在します。例えば、以下のプラグインが利用できます：

1. WebP Express:
   WebP Expressは、WordPressの画像をWebP形式に変換して提供するプラグインです。自動的にWebP画像を生成し、対応するブラウザにはWebP、非対応のブラウザには元の形式の画像を提供します。
2. Imagify:
   Imagifyは、画像を最適化してWebP形式に変換するWordPressプラグインです。これにより、画像のサイズを減らし、ページの読み込み速度を向上させることが期待できます。

これらのプラグインを導入すると、WebP画像が自動的に生成され、それが必要なクライアントに提供されるようになります。

一方で、PHPファイルに直接パスを書いている場合、手動でWebPファイルのパスを補完するためには、プラグインを使うか、テーマやカスタムコードを変更してWebP画像のパスを生成する必要があります。手動でパスを変更する場合、ブラウザのサポートに注意することが重要です。

ブラウザによって、表示させる画像の拡張子を変える

WebP画像をサポートしているブラウザにはWebP画像を、非対応のブラウザにはPNGなどの代替画像を表示させるためには、以下のように<picture>要素を使用して条件分岐する方法があります。

<picture>
  <!-- WebP 対応ブラウザ用の画像 -->
  <source srcset="path/to/image.webp" type="image/webp">

  <!-- WebP 非対応ブラウザ用の代替画像 -->
  <img src="path/to/image.png" alt="Alt Text">
</picture>

このコードでは、<picture>要素の中に<source>要素を使用し、srcset属性にWebP画像のパスとtype属性にimage/webpを指定しています。これにより、ブラウザがWebP画像をサポートしている場合は<source>内の画像が使用され、サポートしていない場合は<img>要素内のPNG画像が使用されます。

注意点として、<picture>要素はIE11などの古いブラウザでサポートされていないことがあります。その場合は、JavaScriptやCSSを使用して代替手段を検討するか、IE11などの非対応ブラウザには通常の<img>要素でPNG画像を表示するなどの対応が必要です。

JavaScriptを使用してブラウザの対応状況を検知し、適切な画像を動的にロードする方法もありますが、基本的には上記のような<picture>要素の使用が推奨されています。