WordPressサイトの画像をWebPに変換・対応できるプラグイン「WebP Converter for Media」

「画像を軽量化するためにWebP対応を行いたい」

しかし、「WebP」は古いブラウザに対応していないため、直接使用するのは現実的ではありません。

そのため、対応ブラウザには「WebP」、未対応ブラウザでは従来の形式の画像（JPEG等）を配信するのが理想的です。ただし、このような振り分けは開発者でなければ難しいでしょう。

そこで、画像をWebPに自動変換し、ブラウザによって画像の振り分けを行ってくれるプラグイン「WebP Converter for Media」をご紹介します。手軽に導入できるので、サイトの表示速度向上にお役立てください。

WebPとは？

Googleが開発している画像フォーマット「.webp」です。下記の特徴があります。

• 非可逆圧縮（jpegと同じ）
• 画像の圧縮率が高い（超軽量）
• 背景透過に対応
• アニメーション（gifのような）に対応

とにかく高性能で超軽量なのですが、IE等の古いブラウザに対応していないため、「WebP」形式の画像だけを直接使用することは難しい状況にあります。

現時点で、主要ブラウザは対応しています。（対応ブラウザはこちらをご覧ください）

「WebP Converter for Media」機能概要

WordPressサイトの画像のWebP対応を丸ごと行ってくれる非常に優秀なプラグインです。

• 対応ブラウザではWebPを表示
• 非対応ブラウザでは元形式（JPEG等）の画像を表示
• 画像アップロード時に自動でWebPに変換
• 既存の画像も一括変換可能
• テーマ・プラグイン内の画像も変換可能
• プラグインを無効化すると元形式の画像を表示

また、変換した画像は、別ディレクトリ（/wp-content/uploads-webpc/）に保管してくれます。

プラグインのインストール

管理画面から「WebP Converter for Media」を検索してインストールするか、下のボタンからもダウンロード可能です。ファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。

WebP Converter for Media

また、プラグインの基本的なインストール方法は下記をご覧ください。

「WebP Converter for Media」の使い方

各種設定を済ませて、既存の画像を一括変換するだけです。プラグイン有効化後は、画像をアップロードすると自動で変換してくれるので安心です。

「設定」>「WebP Converter」を選択し、設定画面を開きます。

各種設定を行う

下記の「Setting」で設定を行っていきます。基本的にはデフォルトの設定のままでも大丈夫です。

Image loading mode
画像を読み込む方法を設定します。推奨の「via .htaccess (recommended)」を選択します。

List of supported files extensions
変換する画像のフォーマットを選択します。GIFもWebPに変換できますが、アニメーションが失われ、静止画になりますので、ご注意ください。

List of supported directories
変換対象のディレクトリを選択します。テーマ内の画像もサイト上に表示されることが多いため、「/uploads」に加え、「/themes」にもチェックを入れておくといいですね。

Conversion method
画像の変換方法を選択します。サーバーによってはどちらかしか選択できません。
基本的には、プラグインの推奨設定である「GD」を選択しておきましょう。

Images quality
画質を75%〜100%の間で調整できます。値を小さくすると容量を削減できますが、画像が荒くなります。（75%でも画質に大きな問題はありませんでした。）

Extra features
こちらはデフォルトの設定で特に問題ありません。もし、画像をアップロードしても自動で変換されない場合は、Enable cron to convert 〜 adding imagesのチェックを外して再度動作を確認してください。

設定できたら「Save Changes」を押して、設定を保存します。

既存の画像を一括変換する

既にアップロード済みの画像を全てWebPに変換していきます。「Regenerate All」を押して、100%になったら変換完了です。

再度一括変換する際に、全ての画像（変換済みの画像を含む）を変換する場合は、「Force convert all images again」にチェックを入れてから「Regenerate All」を押してください。

「Images quality」を85%に設定したけど、75%で変換し直したい場合等にチェックを入れます。

一括変換時にエラーが表示された場合

一括変換時に下記のエラー文が表示され、正常に変換できないことがあります。

An error occurred while connecting to REST API. Please try again.

この時、パーマリンク設定で「基本」以外を選択しているかご確認しましょう。「基本」に設定していると上記のエラー文が表示され、正常に動作しないようです。

また、「基本」以外を選択しているにも関わらず、上記のエラー文が表示される場合は、一度別ブラウザ（普段使わない）でWordPressの管理画面にログインして、一括変換を実行してみてください。これで解決されることが多いようです。

WebPで読み込まれているか確認する

変換を行った後に画像がWebPで読み込まれているかどうかは、ディベロッパーツールで確認できます。

ディベロッパーツールの「Network」を開き、「img」を選択して対象を画像に絞ります。その状態のままリロード（再読み込み）すると、読み込んだ画像が一覧で表示されるので、「Type」欄をご確認ください。

下記のように「WebP」になっていたらOKです。

また、PageSpeed Insightsでも確認してみましょう。今回は画質を「75%」に設定しましたが、スコアを15ポイント上げることができました。

元画像を最適化する

WebPに自動変換してくれるプラグインの使い方について解説しました。こちらを導入することで、かなりの容量削減に繋がりますが、変換前の画像を最適化しておくことも大切です。

下記のツールを使えば、画質を確認しながら画像のリサイズや容量削減を行えます。ぜひ、メディアライブラリにアップロードする前に画像を最適化しましょう。

WebP関連記事