WebP Converter for Media

サイトの画像をWebPに対応させるプラグインWebP Converter for Mediaが簡単設定でした!

今まで当サイトでは画像ファイルはJPEGやPNGを使用していましたが、先日SafariでもWebP(ウェッピー)に対応するとの発表がありました。これまでWebPはSafariで対応してないからなと思ってなぜか対応を見送っていましたが、ついにSafari対応!とのことなので重い腰を上げてみました。当サイトではWebP対応のプラグインを色々探してみた結果、「WebP Converter for Media」が良さそうだなと思い、導入してみました。

結果として、思いの他簡単にWebPに対応でき、なおかつ設定が簡単でしたので、もっと早く対応させても良かったかと思います。導入後はこれまでスマートフォンなどの格安回線で当サイトを閲覧した時に、少し読み込みがあるなと思っていましたが、その読み込み時間も体感的に短縮されとても良かったかと思います。

WebP(ウェッピー)とは?

WebPとはなんぞや?ということで少し調査してみました。WebPは米Google社が開発している静止画像のフォーマットになります。これまでよく使用されていたJPEGやPNGよりも容量が少なくなりWebサイトの表示速度の高速化とトラフィック量軽減に繋がります。また、容量を抑えながらもキレイな画質で表現できるのも特徴です。

問題点としましては、サポートされているブラウザが少なかったという点です。これを理由に自分は採用を後回しにしていましたがSafari対応(IEはほぼ無視)ということでこの問題点も解消ということにしました。

WebPについての詳細はこちらのサイトをご確認ください。

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の設定画面を開いてください。下図のような画面が表示されます。

WebP Converter for Media設定画面

設定項目は英語ですが直感的に理解できると思います(英語赤点ばかりの自分でもなんとかなりました)
下記に設定内容を記載しておきますので参考までにご確認ください。

①List of supported files extensions
サポートする画像のファイル形式を設定します。チェックの入っている形式の画像をWebPに対応させます。当サイトではJPEGとPNGを対応させました。
②List of supported directories
サポートするディレクトリを設定します。チェックの入っているディレクトリに保存されている画像をWebPに対応させます。当サイトはthemesとuploadsのディレクトリ内の画像に対応させました。
③Conversion method
画像の変換方法を設定します。当サイトでは推奨設定の「GD」のまま使用しました。
④Extra features
追加機能になります。1行目はオリジナルの画像よりもWebPが容量大きくなってしまった場合はWebPファイルを自動削除しますという設定になります。2行目はWebPをブラウザキャッシュさせるかという設定になります。当サイトでは両方ともチェックを入れました。
⑤Images quality
生成されるWebPの画像品質の設定です。当サイトでは初期設定の85%に設定しています。

上記の設定が完了したら、「Save Changes」ボタンで設定を保存してください。

WebP画像の再生成について

上記設定をしておけば、これから画像をアップロードする場合はWebP画像が生成され、対応ブラウザにはWebPで画像を配信できますが、既存の画像はそのままJPEGやPNGで配信されてしまいます。しかしこのWebP Converter for Mediaは既存の画像もすべて変換してくれる機能がついています。

WebP Converter for Media設定画面の下の方にRegenerate imagesという項目があります。こちらの「Force convert all images again」にチェックを入れ、Regenerate Allボタンをクリックすればこれまでアップロードした全ての画像をWebPに変換してくれます。変換をスタートすると下図のように変換進行状況が表示されますので、しばらくお待ちください。アップロードしている画像が多いと変換完了まで時間がかかる可能性がありますので気長にお待ちください。

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を起動させます。

Developer Tool

Chrome Developer Toolを起動させたら、①タブ部分をNetworkにしてください。②Networkにしたら②部分をimgにしてください。そうすれば画像ファイルの一覧が取得できます。その後サイトを再読み込みすると画像の一覧が取得できます。画像一覧の③部分のTypeがwebpになっていたらその画像はWebP形式で配信されているとうことになります。

WebP Converter for Mediaについてまとめ

WebP Converter for Mediaを使えば、簡単にWebサイトの画像をWebPに対応させることができました。ちゃんと非対応ブラウザの対策もされており、こんなに簡単に設定できるのならもっと早く対応させておけばと思った所存です。個人的にはモバイル表示の体感速度も上がったので満足のプラグインでした。