今まで当サイトでは画像ファイルはJPEGやPNGを使用していましたが、先日SafariでもWebP（ウェッピー）に対応するとの発表がありました。これまでWebPはSafariで対応してないからなと思ってなぜか対応を見送っていましたが、ついにSafari対応！とのことなので重い腰を上げてみました。当サイトではWebP対応のプラグインをいろいろ探してみた結果、「WebP Converter for Media」が良さそうだなと思い、導入してみました。
結果として、思いの他簡単にWebPに対応でき、なおかつ設定が簡単でしたので、もっと早く対応させても良かったかと思います。導入後はこれまでスマートフォンなどの格安回線で当サイトを閲覧した時に、少し読み込みがあるなと思っていましたが、その読み込み時間も体感的に短縮されとても良かったかと思います。
WebP（ウェッピー）とは？
WebPとはなんぞや？ということで少し調査してみました。WebPは米Google社が開発している静止画像のフォーマットです。これまでよく使用されていたJPEGやPNGよりも容量が少なくなりWebサイトの表示速度の高速化とトラフィック量軽減につながります。また、容量を抑えながらもキレイな画質で表現できるのも特徴です。
問題点としましては、サポートされているブラウザが少なかったという点です。これを理由に自分は採用を後回しにしていましたがSafari対応（IEはほぼ無視）ということでこの問題点も解消ということにしました。
WebP Converter for Mediaの使い方
WebP Converter for Mediaを使用するにはまず、WordPressにWebP Converter for Mediaをインストールします。
WordPressにプラグインをインストールする手順はこちらを参照
WebP Converter for Mediaプラグインをインストールして有効化すると、WordPress管理画面に左メニューの「設定」項目の中に「WebP Converter」という項目が追加されていますので、クリックしてWebP Converter for Mediaの設定画面を開いてください。下図のような画面が表示されます。
General Setting
設定項目は英語ですが直感的に理解できると思います（英語赤点ばかりの自分でもなんとかなりました）
下記に設定内容を記載しておきますので参考までにご確認ください。
- ①Conversion strategy
- 生成されるWebPの画像品質の設定です。当サイトでは初期設定のOptimalに設定しています。Losslessだと圧縮率は下がりますが高画質にまります。Lossyだと圧縮率が高くなります。
- ②List of supported output formats
- 出力する画像のファイル形式を設定します。チェックの入っているWebPで出力します。AVIFはPROバージョンのみ対応。
- ③List of supported directories
- サポートするディレクトリを設定します。チェックの入っているディレクトリに保存されている画像をWebPに対応させます。当サイトはthemesとuploadsのディレクトリ内の画像に対応させました。
- ④Maximun image dimensions
- 画像の最大サイズを指定します。PROバージョンのみ対応。
- ⑤Conversion of new imags
- 新しくアップロードした画像を自動で変換します。当サイトではONにしています。
Advanced Setting
- ⑥List of supported files extensions
- サポートする画像のファイル形式を設定します。チェックの入っている形式の画像をWebPに対応させます。当サイトではJPEGとPNGを対応させました。
- ⑦Conversion method
- 画像の変換方法を設定します。当サイトでは推奨設定の「GD」のまま使用しました。
- ⑧Image loading mode
- 画像の読み込みを設定します。当サイトでは推奨設定の「.htaccess」のまま使用しました。
- ⑨Extra features
- 追加機能です。
1行目はオリジナルの画像よりもWebPが容量大きくなってしまった場合はWebPファイルを自動削除しますという設定です。
2行目は画像のメタデータを EXIF または XMP 形式で保存（GD 変換方式では使用不可）という設定です。
3行目はcron を有効にして、メディア ライブラリの外部から画像を自動的に変換します設定です。
4行目はdebug.log ファイルへの変換中にエラーを記録するという設定です。
当サイトでは1、4行目にチェックを入れました。
- ⑩Optimization statistics
- メディアライブラリに統計を表示します。当サイトではONにしています
上記の設定が完了したら、「Save Changes」ボタンで設定を保存してください。
WebP画像の再生成について
上記設定をしておけば、これから画像をアップロードする場合はWebP画像が生成され、対応ブラウザにはWebPで画像を配信できますが、既存の画像はそのままJPEGやPNGで配信されてしまいます。しかしこのWebP Converter for Mediaは既存の画像もすべて変換してくれる機能がついています。
WebP Converter for Media設定画面の下の方にBulk Optimization of Imagesという項目があります。こちらの「Force convert all images again」にチェックを入れ、Stat Balk Optimizationボタンをクリックすればこれまでアップロードした全ての画像をWebPに変換してくれます。変換をスタートすると下図のように変換進行状況が表示されますので、しばらくお待ちください。アップロードしている画像が多いと変換完了まで時間がかかる可能性がありますので気長にお待ちください。
WebPへ変換した場合 既存画像はどうなる？
WebPへ変換をした場合、既存画像はどうなるのか心配かと思いますが、既存画像は「wp-content」内の「uploads」ディレクトリ内にちゃんと残っています。WebP非対応のブラウザでサイトにアクセスがあった場合はこれまで通り「uploads」ディレクトリ内にあるJPEGやPNGなどの画像が使用されます。WebP画像は「uploads-webpc」というディレクトリが生成されており、その中に新たに生成されたWebP画像が保存されています。
「uploads」「uploads-webpc」内には.htaccessファイルがあり、こちらの設定ファイルでWebP対応ブラウザの場合はWebP画像を表示させ、非対応ブラウザの場合はJPEGやPNG画像を表示させるように振り分けているようです。
WebPで画像配信ができているかの確認
このプラグイン使用している状態でソースを確認すると、ソース上はJPEGやPNGの画像リンクが記載されています。WebPがちゃんと画像配信ができているかの確認は、Chrome Developer Toolを使えば確認できます。Chromeでサイトを表示しキーボードのF12ボタンを押してChrome Developer Toolを起動させます。
Chrome Developer Toolを起動させたら、①タブ部分をNetworkにしてください。②Networkにしたら②部分をimgにしてください。そうすれば画像ファイルの一覧が取得できます。その後サイトを再読み込みすると画像の一覧が取得できます。画像一覧の③部分のTypeがwebpになっていたらその画像はWebP形式で配信されているとうことです。
WebP Converter for Mediaについてまとめ
WebP Converter for Mediaを使えば、簡単にWebサイトの画像をWebPに対応させることができました。ちゃんと非対応ブラウザの対策もされており、こんなに簡単に設定できるのならもっと早く対応させておけばと思った所存です。個人的にはモバイル表示の体感速度も上がったので満足のプラグインでした。